Starter/samples
1
0
Fork 0
mirror of https://github.com/flutter/samples.git synced 2025-11-08 13:58:47 +00:00
Code Issues Releases Wiki Activity

Fixed hex color picker in material 3 demo (#2578)

Browse Source 
This pull request fixes the problem where the color picker wasn't
handling hex values correctly.

Fixes #2577
This commit is contained in:
Thomas Anderl
2025-02-13 04:52:14 +00:00
committed by GitHub
parent ac85e2c333
commit 3ae8c207ce
2 changed files with 77 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
material_3_demo/lib/color_box.dart
View File

@@ -66,14 +66,13 @@ class _ColorBoxState extends State<ColorBox> {
onPressed: () async {
final messenger = ScaffoldMessenger.of(context);
// Copy color as hex to clipboard
String hex = '#';
final c = widget.color;
// Will change from int 0-255 to double 0.0-1.0 in 3.26+
// The properties also change from red/green/blue to r/g/b
// hex += (c.[r g b] * 255.0).round().toRadixString(16).padLeft(2, '0');
hex += c.r.round().toRadixString(16).padLeft(2, '0');
hex += c.g.round().toRadixString(16).padLeft(2, '0');
hex += c.b.round().toRadixString(16).padLeft(2, '0');
final hex =
'#${_colorChannelToHex(c.r)}'
'${_colorChannelToHex(c.g)}'
'${_colorChannelToHex(c.b)}';
final data = ClipboardData(text: hex);
await Clipboard.setData(data);
messenger.hideCurrentSnackBar();
@@ -90,3 +89,8 @@ class _ColorBoxState extends State<ColorBox> {
);
}
}
String _colorChannelToHex(double value) {
final intVal = (value * 255).round();
return intVal.toRadixString(16).padLeft(2, '0');
}

66
material_3_demo/test/color_screen_test.dart
View File

@@ -2,8 +2,12 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:material_3_demo/color_box.dart';
import 'package:material_3_demo/color_palettes_screen.dart';
import 'package:material_3_demo/main.dart';
import 'package:material_3_demo/scheme.dart';
@@ -88,4 +92,66 @@ void main() {
expect(find.text('Dark ColorScheme'), findsOneWidget);
expect(find.byType(SchemePreview, skipOffstage: false), findsNWidgets(2));
});
testWidgets(
'ColorBox displays correct info and copies hex color on button tap',
(tester) async {
TestDefaultBinaryMessengerBinding.instance.defaultBinaryMessenger
.setMockMessageHandler('flutter/platform', (_) async {
// To intercept method calls to 'Clipboard.setData'
return const JSONMethodCodec().encodeSuccessEnvelope(null);
});
const hexColor = 0xFF3d3d8d;
const testColor = Color(hexColor);
const onTestColor = Colors.white;
const testLabel = 'Test Label';
const testTone = '50';
final gesture = await tester.createGesture(kind: PointerDeviceKind.mouse);
// Wrap in MaterialApp + Scaffold so we can show SnackBars
await tester.pumpWidget(
MaterialApp(
home: Scaffold(
body: ColorBox(
label: testLabel,
tone: testTone,
color: testColor,
onColor: onTestColor,
height: 100,
width: 100,
displayPaletteInfo: true,
),
),
),
);
expect(find.text(testLabel), findsOneWidget);
expect(find.text(testTone), findsOneWidget);
// The copy icon should NOT be there initially (only appears on hover).
expect(find.byIcon(Icons.copy), findsNothing);
await gesture.addPointer(location: Offset.zero);
addTearDown(gesture.removePointer);
await tester.pump();
await gesture.moveTo(tester.getCenter(find.byType(ColorBox)));
await tester.pumpAndSettle();
expect(find.byIcon(Icons.copy), findsOneWidget);
// Tap the copy icon, which copies the hex to clipboard and shows a SnackBar.
await tester.tap(find.byIcon(Icons.copy));
await tester.pumpAndSettle();
expect(find.byType(SnackBar), findsOneWidget);
expect(
find.text(
'Copied #${hexColor.toRadixString(16).substring(2)} to clipboard',
),
findsOneWidget,
);
},
);
}