Skip to content

Commit

Permalink
Update ColorScheme to show the newly added color roles (#2299)
Browse files Browse the repository at this point in the history 
This PR is to fix #2289 and add newly added `ColorScheme` roles since
flutter/flutter#144273

---------

Co-authored-by: Parker Lougheed <[email protected]>
  • Loading branch information
@QuncCccccc @parlough
QuncCccccc and parlough committed May 22, 2024
1 parent 10776a0 commit 649e0e4
Show file tree
Hide file tree
Showing 3 changed files with 170 additions and 98 deletions.
253 changes: 165 additions & 88 deletions material_3_demo/lib/color_palettes_screen.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,10 @@ class ColorPalettesScreen extends StatelessWidget {
style: Theme.of(context).textTheme.bodySmall,
children: [
const TextSpan(
text: 'To create color schemes based on a '
'platform\'s implementation of dynamic color, '
'use the '),
text: 'To create color schemes based on a '
'platform\'s implementation of dynamic color, '
'use the ',
),
TextSpan(
text: 'dynamic_color',
style: const TextStyle(decoration: TextDecoration.underline),
Expand All @@ -75,55 +76,57 @@ class ColorPalettesScreen extends StatelessWidget {
);

return Expanded(
child: LayoutBuilder(builder: (context, constraints) {
if (constraints.maxWidth < narrowScreenWidthThreshold) {
return SingleChildScrollView(
child: Column(
children: [
dynamicColorNotice(),
divider,
schemeLabel('Light ColorScheme'),
schemeView(lightTheme),
divider,
divider,
schemeLabel('Dark ColorScheme'),
schemeView(darkTheme),
],
),
);
} else {
return SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.only(top: 5),
child: LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < narrowScreenWidthThreshold) {
return SingleChildScrollView(
child: Column(
children: [
dynamicColorNotice(),
Row(
children: [
Expanded(
child: Column(
children: [
schemeLabel('Light ColorScheme'),
schemeView(lightTheme),
],
divider,
schemeLabel('Light ColorScheme'),
schemeView(lightTheme),
divider,
divider,
schemeLabel('Dark ColorScheme'),
schemeView(darkTheme),
],
),
);
} else {
return SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.only(top: 5),
child: Column(
children: [
dynamicColorNotice(),
Row(
children: [
Expanded(
child: Column(
children: [
schemeLabel('Light ColorScheme'),
schemeView(lightTheme),
],
),
),
),
Expanded(
child: Column(
children: [
schemeLabel('Dark ColorScheme'),
schemeView(darkTheme),
],
Expanded(
child: Column(
children: [
schemeLabel('Dark ColorScheme'),
schemeView(darkTheme),
],
),
),
),
],
),
],
],
),
],
),
),
),
);
}
}),
);
}
},
),
);
}
}
Expand All @@ -136,7 +139,7 @@ class ColorSchemeView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
children: <Widget>[
ColorGroup(
children: [
ColorChip(
Expand All @@ -162,6 +165,31 @@ class ColorSchemeView extends StatelessWidget {
],
),
divider,
ColorGroup(
children: [
ColorChip(
label: 'primaryFixed',
color: colorScheme.primaryFixed,
onColor: colorScheme.onPrimaryFixed,
),
ColorChip(
label: 'onPrimaryFixed',
color: colorScheme.onPrimaryFixed,
onColor: colorScheme.primaryFixed,
),
ColorChip(
label: 'primaryFixedDim',
color: colorScheme.primaryFixedDim,
onColor: colorScheme.onPrimaryFixedVariant,
),
ColorChip(
label: 'onPrimaryFixedVariant',
color: colorScheme.onPrimaryFixedVariant,
onColor: colorScheme.primaryFixedDim,
),
],
),
divider,
ColorGroup(
children: [
ColorChip(
Expand All @@ -187,6 +215,31 @@ class ColorSchemeView extends StatelessWidget {
],
),
divider,
ColorGroup(
children: [
ColorChip(
label: 'secondaryFixed',
color: colorScheme.secondaryFixed,
onColor: colorScheme.onSecondaryFixed,
),
ColorChip(
label: 'onSecondaryFixed',
color: colorScheme.onSecondaryFixed,
onColor: colorScheme.secondaryFixed,
),
ColorChip(
label: 'secondaryFixedDim',
color: colorScheme.secondaryFixedDim,
onColor: colorScheme.onSecondaryFixedVariant,
),
ColorChip(
label: 'onSecondaryFixedVariant',
color: colorScheme.onSecondaryFixedVariant,
onColor: colorScheme.secondaryFixedDim,
),
],
),
divider,
ColorGroup(
children: [
ColorChip(
Expand All @@ -212,6 +265,31 @@ class ColorSchemeView extends StatelessWidget {
],
),
divider,
ColorGroup(
children: [
ColorChip(
label: 'tertiaryFixed',
color: colorScheme.tertiaryFixed,
onColor: colorScheme.onTertiaryFixed,
),
ColorChip(
label: 'onTertiaryFixed',
color: colorScheme.onTertiaryFixed,
onColor: colorScheme.tertiaryFixed,
),
ColorChip(
label: 'tertiaryFixedDim',
color: colorScheme.tertiaryFixedDim,
onColor: colorScheme.onTertiaryFixedVariant,
),
ColorChip(
label: 'onTertiaryFixedVariant',
color: colorScheme.onTertiaryFixedVariant,
onColor: colorScheme.tertiaryFixedDim,
),
],
),
divider,
ColorGroup(
children: [
ColorChip(
Expand Down Expand Up @@ -239,29 +317,55 @@ class ColorSchemeView extends StatelessWidget {
divider,
ColorGroup(
children: [
ColorChip(
label: 'surfaceDim',
color: colorScheme.surfaceDim,
onColor: colorScheme.onSurface,
),
ColorChip(
label: 'surface',
color: colorScheme.surface,
onColor: colorScheme.onSurface,
),
ColorChip(
label: 'onSurface',
color: colorScheme.onSurface,
onColor: colorScheme.surface,
label: 'surfaceBright',
color: colorScheme.surfaceBright,
onColor: colorScheme.onSurface,
),
ColorChip(
label: 'surfaceContainerHighest',
color: colorScheme.surfaceContainerHighest,
onColor: colorScheme.surfaceContainerHighest,
label: 'surfaceContainerLowest',
color: colorScheme.surfaceContainerLowest,
onColor: colorScheme.onSurface,
),
ColorChip(
label: 'surfaceContainerLow',
color: colorScheme.surfaceContainerLow,
onColor: colorScheme.onSurface,
),
ColorChip(
label: 'surfaceContainer',
color: colorScheme.surfaceContainer,
onColor: colorScheme.onSurface,
),
ColorChip(
label: 'surfaceContainerHigh',
color: colorScheme.surfaceContainerHigh,
onColor: colorScheme.onSurface,
),
ColorChip(
label: 'surfaceContainerHighest',
color: colorScheme.surfaceContainerHighest,
onColor: colorScheme.surfaceContainerHighest,
onColor: colorScheme.onSurface,
),
ColorChip(
label: 'onSurface',
color: colorScheme.onSurface,
onColor: colorScheme.surface,
),
ColorChip(
label: 'surfaceTint',
color: colorScheme.surfaceTint,
label: 'onSurfaceVariant',
color: colorScheme.onSurfaceVariant,
onColor: colorScheme.surfaceContainerHighest,
),
],
),
Expand All @@ -271,16 +375,13 @@ class ColorSchemeView extends StatelessWidget {
ColorChip(
label: 'outline',
color: colorScheme.outline,
onColor: null,
),
ColorChip(
label: 'outlineVariant',
color: colorScheme.outlineVariant,
label: 'shadow',
color: colorScheme.shadow,
onColor: null,
),
],
),
divider,
ColorGroup(
children: [
ColorChip(
label: 'inverseSurface',
color: colorScheme.inverseSurface,
Expand All @@ -298,30 +399,6 @@ class ColorSchemeView extends StatelessWidget {
),
],
),
divider,
ColorGroup(
children: [
ColorChip(
label: 'background',
color: colorScheme.surface,
onColor: colorScheme.onSurface,
),
ColorChip(
label: 'onSurface',
color: colorScheme.onSurface,
onColor: colorScheme.surface,
),
ColorChip(
label: 'scrim',
color: colorScheme.scrim,
),
ColorChip(
label: 'shadow',
color: colorScheme.shadow,
),
],
),
divider,
],
);
}
Expand All @@ -330,7 +407,7 @@ class ColorSchemeView extends StatelessWidget {
class ColorGroup extends StatelessWidget {
const ColorGroup({super.key, required this.children});

final List<Widget> children;
final List<ColorChip> children;

@override
Widget build(BuildContext context) {
Expand Down
12 changes: 4 additions & 8 deletions material_3_demo/lib/home.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -311,9 +311,8 @@ class _ColorSeedButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return PopupMenuButton(
icon: Icon(
icon: const Icon(
Icons.palette_outlined,
color: Theme.of(context).colorScheme.surfaceContainerHighest,
),
tooltip: 'Select a seed color',
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
Expand Down Expand Up @@ -365,16 +364,14 @@ class _ColorImageButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return PopupMenuButton(
icon: Icon(
icon: const Icon(
Icons.image_outlined,
color: Theme.of(context).colorScheme.surfaceContainerHighest,
),
tooltip: 'Select a color extraction image',
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
itemBuilder: (context) {
return List.generate(ColorImageProvider.values.length, (index) {
ColorImageProvider currentImageProvider =
ColorImageProvider.values[index];
final currentImageProvider = ColorImageProvider.values[index];

return PopupMenuItem(
value: index,
Expand All @@ -392,8 +389,7 @@ class _ColorImageButton extends StatelessWidget {
child: ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Image(
image: NetworkImage(
ColorImageProvider.values[index].url),
image: NetworkImage(currentImageProvider.url),
),
),
),
Expand Down

0 comments on commit 649e0e4

Please sign in to comment.