msb-public
/
samples
mirror of https://github.com/flutter/samples.git
1
0
Code Issues Projects Releases Wiki Activity

Finishing PoC

Browse Source
leigha_m3_demo
Leigha Jarett 1 year ago
parent 14cb7f24e1
commit 115c2d62eb
1 changed files with 635 additions and 454 deletions
Show Stats Download Patch File Download Diff File

479
experimental/material_3_demo/lib/color_palettes_screen.dart
Unescape View File

@ -175,12 +175,7 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Column( final primary = EditableColorChip(
children: [
ColorGroup(
small: _small,
children: [
EditableColorChip(
small: _small, small: _small,
label: 'primary', label: 'primary',
color: _colorScheme.primary, color: _colorScheme.primary,
@ -192,8 +187,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
primary: color, primary: color,
); );
}, },
), );
EditableColorChip(
final onPrimary = EditableColorChip(
small: _small, small: _small,
label: 'onPrimary', label: 'onPrimary',
color: _colorScheme.onPrimary, color: _colorScheme.onPrimary,
@ -205,8 +201,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
onPrimary: color, onPrimary: color,
); );
}, },
), );
EditableColorChip(
final primaryContainer = EditableColorChip(
small: _small, small: _small,
label: 'primaryContainer', label: 'primaryContainer',
color: _colorScheme.primaryContainer, color: _colorScheme.primaryContainer,
@ -218,8 +215,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
primaryContainer: color, primaryContainer: color,
); );
}, },
), );
EditableColorChip(
final onPrimaryContainer = EditableColorChip(
small: _small, small: _small,
label: 'onPrimaryContainer', label: 'onPrimaryContainer',
color: _colorScheme.onPrimaryContainer, color: _colorScheme.onPrimaryContainer,
@ -231,14 +229,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
onPrimaryContainer: color, onPrimaryContainer: color,
); );
}, },
), );
],
), final secondary = EditableColorChip(
divider,
ColorGroup(
small: _small,
children: [
EditableColorChip(
small: _small, small: _small,
label: 'secondary', label: 'secondary',
color: _colorScheme.secondary, color: _colorScheme.secondary,
@ -250,8 +243,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
secondary: color, secondary: color,
); );
}, },
), );
EditableColorChip(
final onSecondary = EditableColorChip(
small: _small, small: _small,
label: 'onSecondary', label: 'onSecondary',
color: _colorScheme.onSecondary, color: _colorScheme.onSecondary,
@ -263,8 +257,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
onSecondary: color, onSecondary: color,
); );
}, },
), );
EditableColorChip(
final secondaryContainer = EditableColorChip(
small: _small, small: _small,
label: 'secondaryContainer', label: 'secondaryContainer',
color: _colorScheme.secondaryContainer, color: _colorScheme.secondaryContainer,
@ -276,28 +271,23 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
secondaryContainer: color, secondaryContainer: color,
); );
}, },
), );
EditableColorChip(
final onSecondaryContainer = EditableColorChip(
small: _small, small: _small,
label: 'onSecondaryContainer', label: 'onSecondaryContainer',
color: _colorScheme.onSecondaryContainer, color: _colorScheme.onSecondaryContainer,
onColor: _colorScheme.secondaryContainer, onColor: _colorScheme.secondaryContainer,
updateColorScheme: (color) { updateColorScheme: (color) {
_colorScheme = _colorScheme = _colorScheme.copyWith(onSecondaryContainer: color);
_colorScheme.copyWith(onSecondaryContainer: color);
widget.handleColorRoleChange( widget.handleColorRoleChange(
widget.brightness, widget.brightness,
onSecondaryContainer: color, onSecondaryContainer: color,
); );
}, },
), );
],
), final tertiary = EditableColorChip(
divider,
ColorGroup(
small: _small,
children: [
EditableColorChip(
small: _small, small: _small,
label: 'tertiary', label: 'tertiary',
color: _colorScheme.tertiary, color: _colorScheme.tertiary,
@ -309,8 +299,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
tertiary: color, tertiary: color,
); );
}, },
), );
EditableColorChip(
final onTertiary = EditableColorChip(
small: _small, small: _small,
label: 'onTertiary', label: 'onTertiary',
color: _colorScheme.onTertiary, color: _colorScheme.onTertiary,
@ -322,8 +313,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
onTertiary: color, onTertiary: color,
); );
}, },
), );
EditableColorChip(
final tertiaryContainer = EditableColorChip(
small: _small, small: _small,
label: 'tertiaryContainer', label: 'tertiaryContainer',
color: _colorScheme.tertiaryContainer, color: _colorScheme.tertiaryContainer,
@ -335,28 +327,23 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
tertiaryContainer: color, tertiaryContainer: color,
); );
}, },
), );
EditableColorChip(
final onTertiaryContainer = EditableColorChip(
small: _small, small: _small,
label: 'onTertiaryContainer', label: 'onTertiaryContainer',
color: _colorScheme.onTertiaryContainer, color: _colorScheme.onTertiaryContainer,
onColor: _colorScheme.tertiaryContainer, onColor: _colorScheme.tertiaryContainer,
updateColorScheme: (color) { updateColorScheme: (color) {
_colorScheme = _colorScheme = _colorScheme.copyWith(onTertiaryContainer: color);
_colorScheme.copyWith(onTertiaryContainer: color);
widget.handleColorRoleChange( widget.handleColorRoleChange(
widget.brightness, widget.brightness,
onTertiaryContainer: color, onTertiaryContainer: color,
); );
}, },
), );
],
), final error = EditableColorChip(
divider,
ColorGroup(
small: _small,
children: [
EditableColorChip(
small: _small, small: _small,
label: 'error', label: 'error',
color: _colorScheme.error, color: _colorScheme.error,
@ -368,8 +355,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
error: color, error: color,
); );
}, },
), );
EditableColorChip(
final onError = EditableColorChip(
small: _small, small: _small,
label: 'onError', label: 'onError',
color: _colorScheme.onError, color: _colorScheme.onError,
@ -381,8 +369,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
onError: color, onError: color,
); );
}, },
), );
EditableColorChip(
final errorContainer = EditableColorChip(
small: _small, small: _small,
label: 'errorContainer', label: 'errorContainer',
color: _colorScheme.errorContainer, color: _colorScheme.errorContainer,
@ -394,8 +383,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
errorContainer: color, errorContainer: color,
); );
}, },
), );
EditableColorChip(
final onErrorContainer = EditableColorChip(
small: _small, small: _small,
label: 'onErrorContainer', label: 'onErrorContainer',
color: _colorScheme.onErrorContainer, color: _colorScheme.onErrorContainer,
@ -407,14 +397,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
onErrorContainer: color, onErrorContainer: color,
); );
}, },
), );
],
), final surface = EditableColorChip(
divider,
ColorGroup(
small: _small,
children: [
EditableColorChip(
small: _small, small: _small,
label: 'surface', label: 'surface',
color: _colorScheme.surface, color: _colorScheme.surface,
@ -426,8 +411,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
surface: color, surface: color,
); );
}, },
), );
EditableColorChip(
final onSurface = EditableColorChip(
small: _small, small: _small,
label: 'onSurface', label: 'onSurface',
color: _colorScheme.onSurface, color: _colorScheme.onSurface,
@ -439,8 +425,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
onSurface: color, onSurface: color,
); );
}, },
), );
EditableColorChip(
final surfaceVariant = EditableColorChip(
small: _small, small: _small,
label: 'surfaceVariant', label: 'surfaceVariant',
color: _colorScheme.surfaceVariant, color: _colorScheme.surfaceVariant,
@ -452,8 +439,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
surfaceVariant: color, surfaceVariant: color,
); );
}, },
), );
EditableColorChip(
final onSurfaceVariant = EditableColorChip(
small: _small, small: _small,
label: 'onSurfaceVariant', label: 'onSurfaceVariant',
color: _colorScheme.onSurfaceVariant, color: _colorScheme.onSurfaceVariant,
@ -465,8 +453,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
onSurfaceVariant: color, onSurfaceVariant: color,
); );
}, },
), );
EditableColorChip(
final surfaceTint = EditableColorChip(
small: _small, small: _small,
label: 'surfaceTint', label: 'surfaceTint',
color: _colorScheme.surfaceTint, color: _colorScheme.surfaceTint,
@ -477,14 +466,37 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
surfaceTint: color, surfaceTint: color,
); );
}, },
), );
],
), final background = EditableColorChip(
divider,
ColorGroup(
small: _small, small: _small,
children: [ label: 'background',
EditableColorChip( color: _colorScheme.background,
onColor: _colorScheme.onBackground,
updateColorScheme: (color) {
_colorScheme = _colorScheme.copyWith(background: color);
widget.handleColorRoleChange(
widget.brightness,
background: color,
);
},
);
final onBackground = EditableColorChip(
small: _small,
label: 'onBackground',
color: _colorScheme.onBackground,
onColor: _colorScheme.background,
updateColorScheme: (color) {
_colorScheme = _colorScheme.copyWith(onBackground: color);
widget.handleColorRoleChange(
widget.brightness,
onBackground: color,
);
},
);
final outline = EditableColorChip(
small: _small, small: _small,
label: 'outline', label: 'outline',
color: _colorScheme.outline, color: _colorScheme.outline,
@ -495,8 +507,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
outline: color, outline: color,
); );
}, },
), );
EditableColorChip(
final outlineVariant = EditableColorChip(
small: _small, small: _small,
label: 'outlineVariant', label: 'outlineVariant',
color: _colorScheme.outlineVariant, color: _colorScheme.outlineVariant,
@ -507,14 +520,22 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
outlineVariant: color, outlineVariant: color,
); );
}, },
), );
],
), final shadow = EditableColorChip(
divider,
ColorGroup(
small: _small, small: _small,
children: [ label: 'shadow',
EditableColorChip( color: _colorScheme.shadow,
updateColorScheme: (color) {
_colorScheme = _colorScheme.copyWith(shadow: color);
widget.handleColorRoleChange(
widget.brightness,
shadow: color,
);
},
);
final inverseSurface = EditableColorChip(
small: _small, small: _small,
label: 'inverseSurface', label: 'inverseSurface',
color: _colorScheme.inverseSurface, color: _colorScheme.inverseSurface,
@ -526,8 +547,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
inverseSurface: color, inverseSurface: color,
); );
}, },
), );
EditableColorChip(
final onInverseSurface = EditableColorChip(
small: _small, small: _small,
label: 'onInverseSurface', label: 'onInverseSurface',
color: _colorScheme.onInverseSurface, color: _colorScheme.onInverseSurface,
@ -539,8 +561,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
onInverseSurface: color, onInverseSurface: color,
); );
}, },
), );
EditableColorChip(
final inversePrimary = EditableColorChip(
small: _small, small: _small,
label: 'inversePrimary', label: 'inversePrimary',
color: _colorScheme.inversePrimary, color: _colorScheme.inversePrimary,
@ -552,40 +575,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
inversePrimary: color, inversePrimary: color,
); );
}, },
),
],
),
divider,
ColorGroup(
small: _small,
children: [
EditableColorChip(
small: _small,
label: 'background',
color: _colorScheme.background,
onColor: _colorScheme.onBackground,
updateColorScheme: (color) {
_colorScheme = _colorScheme.copyWith(background: color);
widget.handleColorRoleChange(
widget.brightness,
background: color,
); );
},
), final scrim = EditableColorChip(
EditableColorChip(
small: _small,
label: 'onBackground',
color: _colorScheme.onBackground,
onColor: _colorScheme.background,
updateColorScheme: (color) {
_colorScheme = _colorScheme.copyWith(onBackground: color);
widget.handleColorRoleChange(
widget.brightness,
onBackground: color,
);
},
),
EditableColorChip(
small: _small, small: _small,
label: 'scrim', label: 'scrim',
color: _colorScheme.scrim, color: _colorScheme.scrim,
@ -596,22 +588,192 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
scrim: color, scrim: color,
); );
}, },
);
return _small
? Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 20),
ColorGroupNavRail(
message:
"Accents (primary, secondary, tertiary) are usually your brand colors and are used to emphasize elements. Error is for error states.",
colorName: "Accents & Error",
children: [primary, secondary, tertiary, error]),
ColorGroupNavRail(
message:
"Indicates a color for text or icons on top of its paired parent color.",
colorName: "On Accents & Error",
children: [onPrimary, onSecondary, onTertiary, onError]),
ColorGroupNavRail(
message:
"Used as a fill color for foreground elements like buttons.",
colorName: "Containers",
children: [
primaryContainer,
secondaryContainer,
tertiaryContainer,
errorContainer
]),
ColorGroupNavRail(
message:
"Indicates a color for text or icons on top of the paired container color.",
colorName: "On Containers",
children: [
onPrimaryContainer,
onSecondaryContainer,
onTertiaryContainer,
onErrorContainer
]),
ColorGroupNavRail(
message:
"Applied to actionable components on surfaces that are the reverse of those in the surrounding UI, creating a contrasting effect.",
colorName: "Inverse Primary",
children: [inversePrimary]),
SizedBox(height: 20),
ColorGroupNavRail(
message:
"Background is typically used behind scrollable content, while surface and surfaceVariant are used for background of widgets. Inverse surface is used as the reverse of surface for a contrasting effect.",
colorName: "Background & Surfaces",
children: [
background,
surface,
surfaceVariant,
inverseSurface
]),
ColorGroupNavRail(
message:
"The color used for text and icons on top of the background or surface colors.",
colorName: "On Background & Surfaces",
children: [
onBackground,
onSurface,
onSurfaceVariant,
onInverseSurface
]),
ColorGroupNavRail(
// TO DO: figure out what to put here, since this is deprecated
message: "",
colorName: "Surface Tint",
children: [surfaceTint]),
ColorGroupNavRail(
message:
"Scrim is used for a semi-transparent overaly that darks areas to focus attention. Shadow and outline are used for shadows and outlines on some widgets.",
colorName: "Scrim, Shadow, Outline",
children: [scrim, shadow, outline, outlineVariant]),
],
)
: Column(
children: [
ColorGroup(
small: _small,
children: [
primary,
onPrimary,
primaryContainer,
onPrimaryContainer,
],
), ),
EditableColorChip( divider,
ColorGroup(
small: _small, small: _small,
label: 'shadow', children: [
color: _colorScheme.shadow, secondary,
updateColorScheme: (color) { onSecondary,
_colorScheme = _colorScheme.copyWith(shadow: color); secondaryContainer,
widget.handleColorRoleChange( onSecondaryContainer,
widget.brightness, ],
shadow: color, ),
); divider,
}, ColorGroup(
small: _small,
children: [
tertiary,
onTertiary,
tertiaryContainer,
onTertiaryContainer,
],
),
divider,
ColorGroup(
small: _small,
children: [
error,
onError,
errorContainer,
onErrorContainer,
],
), ),
divider,
ColorGroup(
small: _small,
children: [
surface,
onSurface,
surfaceVariant,
onSurfaceVariant,
surfaceTint,
], ],
), ),
divider, divider,
ColorGroup(
small: _small,
children: [
outline,
outlineVariant,
],
),
divider,
ColorGroup(
small: _small,
children: [
inverseSurface,
onInverseSurface,
inversePrimary,
],
),
divider,
ColorGroup(
small: _small,
children: [background, onBackground, scrim, shadow],
),
divider,
],
);
}
}
class ColorGroupNavRail extends StatelessWidget {
const ColorGroupNavRail({
super.key,
required this.message,
required this.colorName,
required this.children,
});
final String message;
final String colorName;
final List<Widget> children;
@override
Widget build(BuildContext context) {
return Column(
children: [
Tooltip(
message: message,
child: Row(
children: [
Text(colorName,
style: Theme.of(context)
.textTheme
.labelSmall!
.copyWith(fontWeight: FontWeight.bold)),
const SizedBox(width: 5),
const Icon(Icons.info_outline_rounded, size: 16),
],
),
),
ColorGroup(small: true, children: children)
], ],
); );
} }
@ -709,15 +871,28 @@ class ColorGroup extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final axisCount = children.length % 4 == 0
? 4
: children.length % 3 == 0
? 3
: children.length % 2 == 0
? 2
: 1;
return RepaintBoundary( return RepaintBoundary(
child: Card( child: Card(
elevation: 0.0, elevation: 0.0,
clipBehavior: Clip.antiAlias, clipBehavior: small ? Clip.none : Clip.antiAlias,
child: small child: small
? GridView.count( ? GridView.count(
crossAxisCount: 2, crossAxisCount: axisCount,
crossAxisSpacing: 1,
shrinkWrap: true, shrinkWrap: true,
childAspectRatio: 1 / 0.3, // childAspectRatio: children.length / 1,
// childAspectRatio: (4 / axisCount) * axisCount
// when 4 then 4, when 1 then 16
childAspectRatio: 16 / axisCount,
physics: const NeverScrollableScrollPhysics(), physics: const NeverScrollableScrollPhysics(),
children: children, children: children,
) )
@ -758,21 +933,27 @@ class ColorChip extends StatelessWidget {
final Color labelColor = onColor ?? contrastColor(color); final Color labelColor = onColor ?? contrastColor(color);
return Container( return Container(
decoration: BoxDecoration(
color: color, color: color,
child: Padding( border: small
padding: small ? const EdgeInsets.all(8) : const EdgeInsets.all(16), ? Border.all(
color: Theme.of(context).colorScheme.onSurface,
width: 2,
)
: null,
),
child: small
? null
: Padding(
padding: const EdgeInsets.all(16),
child: Row( child: Row(
children: [ children: [
Expanded( Expanded(
child: Text(label, child: Text(label, style: TextStyle(color: labelColor))),
style: TextStyle( Text(
color: labelColor, fontSize: small ? 10 : null))),
Visibility(
visible: !small,
child: Text(
color.value.toRadixString(16).substring(2), color.value.toRadixString(16).substring(2),
style: GoogleFonts.spaceMono(color: labelColor), style: GoogleFonts.spaceMono(color: labelColor),
)), ),
], ],
), ),
), ),

Write Preview
Loading…
Cancel
Save