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

Add surfaceTint, outlineVariant, scrim and re-arrange (#2070)

Browse Source 
Re-arrange colors according to [Baseline color scheme tokens]

[Baseline color scheme tokens]:
https://m3.material.io/styles/color/the-color-system/tokens#e26e130c-fa67-48e1-81ca-d28f6e4ed398

## 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/wiki/Style-guide-for-Flutter-repo
[CLA]: https://cla.developers.google.com/
[Discord]: https://github.com/flutter/flutter/wiki/Chat
[Contributors Guide]:
https://github.com/flutter/samples/blob/main/CONTRIBUTING.md
This commit is contained in:
Hrishikesh Kadam
2023-11-02 08:03:57 +05:30
committed by GitHub
parent 49eebf8c20
commit 49bc4d9d02
4 changed files with 294 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
experimental/material_3_demo/lib/color_palettes_screen.dart
View File

@@ -137,144 +137,191 @@ class ColorSchemeView extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Column( return Column(
children: [ children: [
ColorGroup(children: [ ColorGroup(
ColorChip( children: [
label: 'primary', ColorChip(
color: colorScheme.primary, label: 'primary',
onColor: colorScheme.onPrimary, color: colorScheme.primary,
), onColor: colorScheme.onPrimary,
ColorChip( ),
ColorChip(
label: 'onPrimary', label: 'onPrimary',
color: colorScheme.onPrimary, color: colorScheme.onPrimary,
onColor: colorScheme.primary), onColor: colorScheme.primary,
ColorChip( ),
label: 'primaryContainer', ColorChip(
color: colorScheme.primaryContainer, label: 'primaryContainer',
onColor: colorScheme.onPrimaryContainer, color: colorScheme.primaryContainer,
), onColor: colorScheme.onPrimaryContainer,
ColorChip( ),
label: 'onPrimaryContainer', ColorChip(
color: colorScheme.onPrimaryContainer, label: 'onPrimaryContainer',
onColor: colorScheme.primaryContainer, color: colorScheme.onPrimaryContainer,
), onColor: colorScheme.primaryContainer,
]), ),
],
),
divider, divider,
ColorGroup(children: [ ColorGroup(
ColorChip( children: [
label: 'secondary', ColorChip(
color: colorScheme.secondary, label: 'secondary',
onColor: colorScheme.onSecondary, color: colorScheme.secondary,
), onColor: colorScheme.onSecondary,
ColorChip( ),
label: 'onSecondary', ColorChip(
color: colorScheme.onSecondary, label: 'onSecondary',
onColor: colorScheme.secondary, color: colorScheme.onSecondary,
), onColor: colorScheme.secondary,
ColorChip( ),
label: 'secondaryContainer', ColorChip(
color: colorScheme.secondaryContainer, label: 'secondaryContainer',
onColor: colorScheme.onSecondaryContainer, color: colorScheme.secondaryContainer,
), onColor: colorScheme.onSecondaryContainer,
ColorChip( ),
ColorChip(
label: 'onSecondaryContainer', label: 'onSecondaryContainer',
color: colorScheme.onSecondaryContainer, color: colorScheme.onSecondaryContainer,
onColor: colorScheme.secondaryContainer), onColor: colorScheme.secondaryContainer,
]), ),
divider,
ColorGroup(
children: [
ColorChip(
label: 'tertiary',
color: colorScheme.tertiary,
onColor: colorScheme.onTertiary),
ColorChip(
label: 'onTertiary',
color: colorScheme.onTertiary,
onColor: colorScheme.tertiary),
ColorChip(
label: 'tertiaryContainer',
color: colorScheme.tertiaryContainer,
onColor: colorScheme.onTertiaryContainer),
ColorChip(
label: 'onTertiaryContainer',
color: colorScheme.onTertiaryContainer,
onColor: colorScheme.tertiaryContainer),
], ],
), ),
divider, divider,
ColorGroup( ColorGroup(
children: [ children: [
ColorChip( ColorChip(
label: 'error', label: 'tertiary',
color: colorScheme.error, color: colorScheme.tertiary,
onColor: colorScheme.onError), onColor: colorScheme.onTertiary,
),
ColorChip( ColorChip(
label: 'onError', label: 'onTertiary',
color: colorScheme.onError, color: colorScheme.onTertiary,
onColor: colorScheme.error), onColor: colorScheme.tertiary,
),
ColorChip( ColorChip(
label: 'errorContainer', label: 'tertiaryContainer',
color: colorScheme.errorContainer, color: colorScheme.tertiaryContainer,
onColor: colorScheme.onErrorContainer), onColor: colorScheme.onTertiaryContainer,
),
ColorChip( ColorChip(
label: 'onErrorContainer', label: 'onTertiaryContainer',
color: colorScheme.onErrorContainer, color: colorScheme.onTertiaryContainer,
onColor: colorScheme.errorContainer), onColor: colorScheme.tertiaryContainer,
),
], ],
), ),
divider, divider,
ColorGroup( ColorGroup(
children: [ children: [
ColorChip( ColorChip(
label: 'background', label: 'error',
color: colorScheme.background, color: colorScheme.error,
onColor: colorScheme.onBackground), onColor: colorScheme.onError,
),
ColorChip( ColorChip(
label: 'onBackground', label: 'onError',
color: colorScheme.onBackground, color: colorScheme.onError,
onColor: colorScheme.background), onColor: colorScheme.error,
),
ColorChip(
label: 'errorContainer',
color: colorScheme.errorContainer,
onColor: colorScheme.onErrorContainer,
),
ColorChip(
label: 'onErrorContainer',
color: colorScheme.onErrorContainer,
onColor: colorScheme.errorContainer,
),
], ],
), ),
divider, divider,
ColorGroup( ColorGroup(
children: [ children: [
ColorChip( ColorChip(
label: 'surface', label: 'surface',
color: colorScheme.surface, color: colorScheme.surface,
onColor: colorScheme.onSurface), onColor: colorScheme.onSurface,
),
ColorChip( ColorChip(
label: 'onSurface', label: 'onSurface',
color: colorScheme.onSurface, color: colorScheme.onSurface,
onColor: colorScheme.surface), onColor: colorScheme.surface,
),
ColorChip( ColorChip(
label: 'surfaceVariant', label: 'surfaceVariant',
color: colorScheme.surfaceVariant, color: colorScheme.surfaceVariant,
onColor: colorScheme.onSurfaceVariant), onColor: colorScheme.onSurfaceVariant,
),
ColorChip( ColorChip(
label: 'onSurfaceVariant', label: 'onSurfaceVariant',
color: colorScheme.onSurfaceVariant, color: colorScheme.onSurfaceVariant,
onColor: colorScheme.surfaceVariant), onColor: colorScheme.surfaceVariant,
),
ColorChip(
label: 'surfaceTint',
color: colorScheme.surfaceTint,
),
], ],
), ),
divider, divider,
ColorGroup( ColorGroup(
children: [ children: [
ColorChip(label: 'outline', color: colorScheme.outline),
ColorChip(label: 'shadow', color: colorScheme.shadow),
ColorChip( ColorChip(
label: 'inverseSurface', label: 'outline',
color: colorScheme.inverseSurface, color: colorScheme.outline,
onColor: colorScheme.onInverseSurface), ),
ColorChip( ColorChip(
label: 'onInverseSurface', label: 'outlineVariant',
color: colorScheme.onInverseSurface, color: colorScheme.outlineVariant,
onColor: colorScheme.inverseSurface), ),
ColorChip(
label: 'inversePrimary',
color: colorScheme.inversePrimary,
onColor: colorScheme.primary),
], ],
), ),
divider,
ColorGroup(
children: [
ColorChip(
label: 'inverseSurface',
color: colorScheme.inverseSurface,
onColor: colorScheme.onInverseSurface,
),
ColorChip(
label: 'onInverseSurface',
color: colorScheme.onInverseSurface,
onColor: colorScheme.inverseSurface,
),
ColorChip(
label: 'inversePrimary',
color: colorScheme.inversePrimary,
onColor: colorScheme.primary,
),
],
),
divider,
ColorGroup(
children: [
ColorChip(
label: 'background',
color: colorScheme.background,
onColor: colorScheme.onBackground,
),
ColorChip(
label: 'onBackground',
color: colorScheme.onBackground,
onColor: colorScheme.background,
),
ColorChip(
label: 'scrim',
color: colorScheme.scrim,
),
ColorChip(
label: 'shadow',
color: colorScheme.shadow,
),
],
),
divider,
], ],
); );
} }

2
experimental/material_3_demo/test/color_screen_test.dart
View File

@@ -70,6 +70,6 @@ void main() {
)); ));
expect(find.text('Light ColorScheme'), findsOneWidget); expect(find.text('Light ColorScheme'), findsOneWidget);
expect(find.text('Dark ColorScheme'), findsOneWidget); expect(find.text('Dark ColorScheme'), findsOneWidget);
expect(find.byType(ColorGroup, skipOffstage: false), findsNWidgets(14)); expect(find.byType(ColorGroup, skipOffstage: false), findsNWidgets(16));
}); });
} }

245
material_3_demo/lib/color_palettes_screen.dart
View File

@@ -137,144 +137,191 @@ class ColorSchemeView extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Column( return Column(
children: [ children: [
ColorGroup(children: [ ColorGroup(
ColorChip( children: [
label: 'primary', ColorChip(
color: colorScheme.primary, label: 'primary',
onColor: colorScheme.onPrimary, color: colorScheme.primary,
), onColor: colorScheme.onPrimary,
ColorChip( ),
ColorChip(
label: 'onPrimary', label: 'onPrimary',
color: colorScheme.onPrimary, color: colorScheme.onPrimary,
onColor: colorScheme.primary), onColor: colorScheme.primary,
ColorChip( ),
label: 'primaryContainer', ColorChip(
color: colorScheme.primaryContainer, label: 'primaryContainer',
onColor: colorScheme.onPrimaryContainer, color: colorScheme.primaryContainer,
), onColor: colorScheme.onPrimaryContainer,
ColorChip( ),
label: 'onPrimaryContainer', ColorChip(
color: colorScheme.onPrimaryContainer, label: 'onPrimaryContainer',
onColor: colorScheme.primaryContainer, color: colorScheme.onPrimaryContainer,
), onColor: colorScheme.primaryContainer,
]), ),
],
),
divider, divider,
ColorGroup(children: [ ColorGroup(
ColorChip( children: [
label: 'secondary', ColorChip(
color: colorScheme.secondary, label: 'secondary',
onColor: colorScheme.onSecondary, color: colorScheme.secondary,
), onColor: colorScheme.onSecondary,
ColorChip( ),
label: 'onSecondary', ColorChip(
color: colorScheme.onSecondary, label: 'onSecondary',
onColor: colorScheme.secondary, color: colorScheme.onSecondary,
), onColor: colorScheme.secondary,
ColorChip( ),
label: 'secondaryContainer', ColorChip(
color: colorScheme.secondaryContainer, label: 'secondaryContainer',
onColor: colorScheme.onSecondaryContainer, color: colorScheme.secondaryContainer,
), onColor: colorScheme.onSecondaryContainer,
ColorChip( ),
ColorChip(
label: 'onSecondaryContainer', label: 'onSecondaryContainer',
color: colorScheme.onSecondaryContainer, color: colorScheme.onSecondaryContainer,
onColor: colorScheme.secondaryContainer), onColor: colorScheme.secondaryContainer,
]), ),
divider,
ColorGroup(
children: [
ColorChip(
label: 'tertiary',
color: colorScheme.tertiary,
onColor: colorScheme.onTertiary),
ColorChip(
label: 'onTertiary',
color: colorScheme.onTertiary,
onColor: colorScheme.tertiary),
ColorChip(
label: 'tertiaryContainer',
color: colorScheme.tertiaryContainer,
onColor: colorScheme.onTertiaryContainer),
ColorChip(
label: 'onTertiaryContainer',
color: colorScheme.onTertiaryContainer,
onColor: colorScheme.tertiaryContainer),
], ],
), ),
divider, divider,
ColorGroup( ColorGroup(
children: [ children: [
ColorChip( ColorChip(
label: 'error', label: 'tertiary',
color: colorScheme.error, color: colorScheme.tertiary,
onColor: colorScheme.onError), onColor: colorScheme.onTertiary,
),
ColorChip( ColorChip(
label: 'onError', label: 'onTertiary',
color: colorScheme.onError, color: colorScheme.onTertiary,
onColor: colorScheme.error), onColor: colorScheme.tertiary,
),
ColorChip( ColorChip(
label: 'errorContainer', label: 'tertiaryContainer',
color: colorScheme.errorContainer, color: colorScheme.tertiaryContainer,
onColor: colorScheme.onErrorContainer), onColor: colorScheme.onTertiaryContainer,
),
ColorChip( ColorChip(
label: 'onErrorContainer', label: 'onTertiaryContainer',
color: colorScheme.onErrorContainer, color: colorScheme.onTertiaryContainer,
onColor: colorScheme.errorContainer), onColor: colorScheme.tertiaryContainer,
),
], ],
), ),
divider, divider,
ColorGroup( ColorGroup(
children: [ children: [
ColorChip( ColorChip(
label: 'background', label: 'error',
color: colorScheme.background, color: colorScheme.error,
onColor: colorScheme.onBackground), onColor: colorScheme.onError,
),
ColorChip( ColorChip(
label: 'onBackground', label: 'onError',
color: colorScheme.onBackground, color: colorScheme.onError,
onColor: colorScheme.background), onColor: colorScheme.error,
),
ColorChip(
label: 'errorContainer',
color: colorScheme.errorContainer,
onColor: colorScheme.onErrorContainer,
),
ColorChip(
label: 'onErrorContainer',
color: colorScheme.onErrorContainer,
onColor: colorScheme.errorContainer,
),
], ],
), ),
divider, divider,
ColorGroup( ColorGroup(
children: [ children: [
ColorChip( ColorChip(
label: 'surface', label: 'surface',
color: colorScheme.surface, color: colorScheme.surface,
onColor: colorScheme.onSurface), onColor: colorScheme.onSurface,
),
ColorChip( ColorChip(
label: 'onSurface', label: 'onSurface',
color: colorScheme.onSurface, color: colorScheme.onSurface,
onColor: colorScheme.surface), onColor: colorScheme.surface,
),
ColorChip( ColorChip(
label: 'surfaceVariant', label: 'surfaceVariant',
color: colorScheme.surfaceVariant, color: colorScheme.surfaceVariant,
onColor: colorScheme.onSurfaceVariant), onColor: colorScheme.onSurfaceVariant,
),
ColorChip( ColorChip(
label: 'onSurfaceVariant', label: 'onSurfaceVariant',
color: colorScheme.onSurfaceVariant, color: colorScheme.onSurfaceVariant,
onColor: colorScheme.surfaceVariant), onColor: colorScheme.surfaceVariant,
),
ColorChip(
label: 'surfaceTint',
color: colorScheme.surfaceTint,
),
], ],
), ),
divider, divider,
ColorGroup( ColorGroup(
children: [ children: [
ColorChip(label: 'outline', color: colorScheme.outline),
ColorChip(label: 'shadow', color: colorScheme.shadow),
ColorChip( ColorChip(
label: 'inverseSurface', label: 'outline',
color: colorScheme.inverseSurface, color: colorScheme.outline,
onColor: colorScheme.onInverseSurface), ),
ColorChip( ColorChip(
label: 'onInverseSurface', label: 'outlineVariant',
color: colorScheme.onInverseSurface, color: colorScheme.outlineVariant,
onColor: colorScheme.inverseSurface), ),
ColorChip(
label: 'inversePrimary',
color: colorScheme.inversePrimary,
onColor: colorScheme.primary),
], ],
), ),
divider,
ColorGroup(
children: [
ColorChip(
label: 'inverseSurface',
color: colorScheme.inverseSurface,
onColor: colorScheme.onInverseSurface,
),
ColorChip(
label: 'onInverseSurface',
color: colorScheme.onInverseSurface,
onColor: colorScheme.inverseSurface,
),
ColorChip(
label: 'inversePrimary',
color: colorScheme.inversePrimary,
onColor: colorScheme.primary,
),
],
),
divider,
ColorGroup(
children: [
ColorChip(
label: 'background',
color: colorScheme.background,
onColor: colorScheme.onBackground,
),
ColorChip(
label: 'onBackground',
color: colorScheme.onBackground,
onColor: colorScheme.background,
),
ColorChip(
label: 'scrim',
color: colorScheme.scrim,
),
ColorChip(
label: 'shadow',
color: colorScheme.shadow,
),
],
),
divider,
], ],
); );
} }

2
material_3_demo/test/color_screen_test.dart
View File

@@ -70,6 +70,6 @@ void main() {
)); ));
expect(find.text('Light ColorScheme'), findsOneWidget); expect(find.text('Light ColorScheme'), findsOneWidget);
expect(find.text('Dark ColorScheme'), findsOneWidget); expect(find.text('Dark ColorScheme'), findsOneWidget);
expect(find.byType(ColorGroup, skipOffstage: false), findsNWidgets(14)); expect(find.byType(ColorGroup, skipOffstage: false), findsNWidgets(16));
}); });
} }