Skip to content

Commit a7df23f

Browse files
jwillericwindmill
jwill
and
ericwindmill
authored
Improve color display in M3 Demo (#2438)
- Added the color scheme schematic from Material Theme Builder aligning how colors are displayed here and in documentation across Android and Figma. - On desktop, individual colors can be copied to the clipboard - View adapts from the existing single column view to the new schematic at 500dp width. ### Before: <img width="1727" alt="Screenshot 2024-09-12 at 2 40 15 PM" src="https://github.com/user-attachments/assets/37423d79-174a-4691-b0e1-8f18c947550a"> ### After: ![mobile](https://github.com/user-attachments/assets/43a7bfbd-6217-4d3f-a1d6-902c99260905) ![Screenshot_20240912_144150](https://github.com/user-attachments/assets/48df7ad4-44a1-4802-8dac-06006dfb6bb1) ## Pre-launch Checklist - [x] I read the [Flutter Style Guide] _recently_, and have followed its advice. - [x] I signed the [CLA]. - [x] I read the [Contributors Guide]. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-devrel channel on [Discord]. <!-- Links --> [Flutter Style Guide]: https://github.com/flutter/flutter/blob/master/docs/contributing/Style-guide-for-Flutter-repo.md [CLA]: https://cla.developers.google.com/ [Discord]: https://github.com/flutter/flutter/blob/master/docs/contributing/Chat.md [Contributors Guide]: https://github.com/flutter/samples/blob/main/CONTRIBUTING.md --------- Co-authored-by: Eric Windmill <[email protected]>
1 parent c83e8c7 commit a7df23f

File tree

7 files changed

+540
-26
lines changed

7 files changed

+540
-26
lines changed

‎material_3_demo/lib/color_box.dart‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:flutter/services.dart';
3+
4+
class ColorBox extends StatefulWidget {
5+
const ColorBox(
6+
{super.key,
7+
required this.label,
8+
required this.tone,
9+
required this.color,
10+
required this.onColor,
11+
required this.height,
12+
required this.width,
13+
this.displayPaletteInfo = false});
14+
15+
final String label;
16+
final String tone;
17+
final Color color, onColor;
18+
final double height, width;
19+
final bool displayPaletteInfo;
20+
21+
@override
22+
State<ColorBox> createState() => _ColorBoxState();
23+
}
24+
25+
class _ColorBoxState extends State<ColorBox> {
26+
bool hovered = false;
27+
28+
@override
29+
Widget build(BuildContext context) {
30+
final fonts = Theme.of(context).textTheme;
31+
return MouseRegion(
32+
onEnter: (_) {
33+
if (mounted) setState(() => hovered = true);
34+
},
35+
onExit: (_) {
36+
if (mounted) setState(() => hovered = false);
37+
},
38+
child: Container(
39+
color: widget.color,
40+
height: widget.height,
41+
width: widget.width,
42+
child: DefaultTextStyle(
43+
style: fonts.labelSmall!.copyWith(color: widget.onColor),
44+
child: Stack(
45+
children: [
46+
Positioned(
47+
top: 10,
48+
left: 10,
49+
child: Text(widget.label),
50+
),
51+
Positioned(
52+
bottom: 10,
53+
right: 10,
54+
child: Text(widget.displayPaletteInfo ? widget.tone : ''),
55+
),
56+
if (hovered)
57+
Positioned(
58+
top: 0,
59+
right: 0,
60+
child: IconButton(
61+
padding: EdgeInsets.zero,
62+
color: widget.onColor,
63+
tooltip: 'Copy hex color',
64+
icon: const Icon(Icons.copy, size: 24),
65+
onPressed: () async {
66+
final messenger = ScaffoldMessenger.of(context);
67+
// Copy color as hex to clipboard
68+
String hex = '#';
69+
final c = widget.color;
70+
// Will change from int 0-255 to double 0.0-1.0 in 3.26+
71+
// The properties also change from red/green/blue to r/g/b
72+
// hex += (c.[r g b] * 255.0).round().toRadixString(16).padLeft(2, '0');
73+
hex += c.red.toRadixString(16).padLeft(2, '0');
74+
hex += c.green.toRadixString(16).padLeft(2, '0');
75+
hex += c.blue.toRadixString(16).padLeft(2, '0');
76+
final data = ClipboardData(text: hex);
77+
await Clipboard.setData(data);
78+
messenger.hideCurrentSnackBar();
79+
messenger.showSnackBar(
80+
SnackBar(
81+
content: Text('Copied $hex to clipboard'),
82+
),
83+
);
84+
},
85+
),
86+
),
87+
],
88+
),
89+
),
90+
),
91+
);
92+
}
93+
}

‎material_3_demo/lib/color_palettes_screen.dart‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,15 @@
44

55
import 'package:flutter/gestures.dart';
66
import 'package:flutter/material.dart';
7+
import 'package:material_3_demo/scheme.dart';
78
import 'package:url_launcher/url_launcher.dart';
89

910
const Widget divider = SizedBox(height: 10);
1011

1112
// If screen content width is greater or equal to this value, the light and dark
1213
// color schemes will be displayed in a column. Otherwise, they will
1314
// be displayed in a row.
14-
const double narrowScreenWidthThreshold = 400;
15+
const double narrowScreenWidthThreshold = 500;
1516

1617
class ColorPalettesScreen extends StatelessWidget {
1718
const ColorPalettesScreen({super.key});
@@ -94,32 +95,32 @@ class ColorPalettesScreen extends StatelessWidget {
9495
),
9596
);
9697
} else {
98+
Color seed = Theme.of(context).colorScheme.primary;
99+
ColorScheme lightScheme = ColorScheme.fromSeed(
100+
seedColor: seed, brightness: Brightness.light);
101+
ColorScheme darkScheme = ColorScheme.fromSeed(
102+
seedColor: seed, brightness: Brightness.dark);
97103
return SingleChildScrollView(
98104
child: Padding(
99-
padding: const EdgeInsets.only(top: 5),
105+
padding: const EdgeInsets.all(8),
100106
child: Column(
101107
children: [
102-
dynamicColorNotice(),
103-
Row(
104-
children: [
105-
Expanded(
106-
child: Column(
107-
children: [
108-
schemeLabel('Light ColorScheme'),
109-
schemeView(lightTheme),
110-
],
111-
),
112-
),
113-
Expanded(
114-
child: Column(
115-
children: [
116-
schemeLabel('Dark ColorScheme'),
117-
schemeView(darkTheme),
118-
],
119-
),
120-
),
121-
],
108+
SchemePreview(
109+
label: "Light ColorScheme",
110+
scheme: lightScheme,
111+
brightness: Brightness.light,
112+
contrast: 1.0,
113+
colorMatch: false,
122114
),
115+
const SizedBox(height: 16),
116+
SchemePreview(
117+
label: "Dark ColorScheme",
118+
scheme: darkScheme,
119+
brightness: Brightness.dark,
120+
contrast: 1.0,
121+
colorMatch: false,
122+
),
123+
const SizedBox(height: 16),
123124
],
124125
),
125126
),

0 commit comments

Comments
 (0)