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
Widget build(BuildContext context) {
return Column(
children: [
ColorGroup(
small: _small,
children: [
EditableColorChip(
final primary = EditableColorChip(
small: _small,
label: 'primary',
color: _colorScheme.primary,
@ -192,8 +187,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
primary: color,
);
},
),
EditableColorChip(
);
final onPrimary = EditableColorChip(
small: _small,
label: 'onPrimary',
color: _colorScheme.onPrimary,
@ -205,8 +201,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
onPrimary: color,
);
},
),
EditableColorChip(
);
final primaryContainer = EditableColorChip(
small: _small,
label: 'primaryContainer',
color: _colorScheme.primaryContainer,
@ -218,8 +215,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
primaryContainer: color,
);
},
),
EditableColorChip(
);
final onPrimaryContainer = EditableColorChip(
small: _small,
label: 'onPrimaryContainer',
color: _colorScheme.onPrimaryContainer,
@ -231,14 +229,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
onPrimaryContainer: color,
);
},
),
],
),
divider,
ColorGroup(
small: _small,
children: [
EditableColorChip(
);
final secondary = EditableColorChip(
small: _small,
label: 'secondary',
color: _colorScheme.secondary,
@ -250,8 +243,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
secondary: color,
);
},
),
EditableColorChip(
);
final onSecondary = EditableColorChip(
small: _small,
label: 'onSecondary',
color: _colorScheme.onSecondary,
@ -263,8 +257,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
onSecondary: color,
);
},
),
EditableColorChip(
);
final secondaryContainer = EditableColorChip(
small: _small,
label: 'secondaryContainer',
color: _colorScheme.secondaryContainer,
@ -276,28 +271,23 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
secondaryContainer: color,
);
},
),
EditableColorChip(
);
final onSecondaryContainer = EditableColorChip(
small: _small,
label: 'onSecondaryContainer',
color: _colorScheme.onSecondaryContainer,
onColor: _colorScheme.secondaryContainer,
updateColorScheme: (color) {
_colorScheme =
_colorScheme.copyWith(onSecondaryContainer: color);
_colorScheme = _colorScheme.copyWith(onSecondaryContainer: color);
widget.handleColorRoleChange(
widget.brightness,
onSecondaryContainer: color,
);
},
),
],
),
divider,
ColorGroup(
small: _small,
children: [
EditableColorChip(
);
final tertiary = EditableColorChip(
small: _small,
label: 'tertiary',
color: _colorScheme.tertiary,
@ -309,8 +299,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
tertiary: color,
);
},
),
EditableColorChip(
);
final onTertiary = EditableColorChip(
small: _small,
label: 'onTertiary',
color: _colorScheme.onTertiary,
@ -322,8 +313,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
onTertiary: color,
);
},
),
EditableColorChip(
);
final tertiaryContainer = EditableColorChip(
small: _small,
label: 'tertiaryContainer',
color: _colorScheme.tertiaryContainer,
@ -335,28 +327,23 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
tertiaryContainer: color,
);
},
),
EditableColorChip(
);
final onTertiaryContainer = EditableColorChip(
small: _small,
label: 'onTertiaryContainer',
color: _colorScheme.onTertiaryContainer,
onColor: _colorScheme.tertiaryContainer,
updateColorScheme: (color) {
_colorScheme =
_colorScheme.copyWith(onTertiaryContainer: color);
_colorScheme = _colorScheme.copyWith(onTertiaryContainer: color);
widget.handleColorRoleChange(
widget.brightness,
onTertiaryContainer: color,
);
},
),
],
),
divider,
ColorGroup(
small: _small,
children: [
EditableColorChip(
);
final error = EditableColorChip(
small: _small,
label: 'error',
color: _colorScheme.error,
@ -368,8 +355,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
error: color,
);
},
),
EditableColorChip(
);
final onError = EditableColorChip(
small: _small,
label: 'onError',
color: _colorScheme.onError,
@ -381,8 +369,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
onError: color,
);
},
),
EditableColorChip(
);
final errorContainer = EditableColorChip(
small: _small,
label: 'errorContainer',
color: _colorScheme.errorContainer,
@ -394,8 +383,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
errorContainer: color,
);
},
),
EditableColorChip(
);
final onErrorContainer = EditableColorChip(
small: _small,
label: 'onErrorContainer',
color: _colorScheme.onErrorContainer,
@ -407,14 +397,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
onErrorContainer: color,
);
},
),
],
),
divider,
ColorGroup(
small: _small,
children: [
EditableColorChip(
);
final surface = EditableColorChip(
small: _small,
label: 'surface',
color: _colorScheme.surface,
@ -426,8 +411,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
surface: color,
);
},
),
EditableColorChip(
);
final onSurface = EditableColorChip(
small: _small,
label: 'onSurface',
color: _colorScheme.onSurface,
@ -439,8 +425,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
onSurface: color,
);
},
),
EditableColorChip(
);
final surfaceVariant = EditableColorChip(
small: _small,
label: 'surfaceVariant',
color: _colorScheme.surfaceVariant,
@ -452,8 +439,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
surfaceVariant: color,
);
},
),
EditableColorChip(
);
final onSurfaceVariant = EditableColorChip(
small: _small,
label: 'onSurfaceVariant',
color: _colorScheme.onSurfaceVariant,
@ -465,8 +453,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
onSurfaceVariant: color,
);
},
),
EditableColorChip(
);
final surfaceTint = EditableColorChip(
small: _small,
label: 'surfaceTint',
color: _colorScheme.surfaceTint,
@ -477,14 +466,37 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
surfaceTint: color,
);
},
),
],
),
divider,
ColorGroup(
);
final background = EditableColorChip(
small: _small,
children: [
EditableColorChip(
label: 'background',
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,
label: 'outline',
color: _colorScheme.outline,
@ -495,8 +507,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
outline: color,
);
},
),
EditableColorChip(
);
final outlineVariant = EditableColorChip(
small: _small,
label: 'outlineVariant',
color: _colorScheme.outlineVariant,
@ -507,14 +520,22 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
outlineVariant: color,
);
},
),
],
),
divider,
ColorGroup(
);
final shadow = EditableColorChip(
small: _small,
children: [
EditableColorChip(
label: 'shadow',
color: _colorScheme.shadow,
updateColorScheme: (color) {
_colorScheme = _colorScheme.copyWith(shadow: color);
widget.handleColorRoleChange(
widget.brightness,
shadow: color,
);
},
);
final inverseSurface = EditableColorChip(
small: _small,
label: 'inverseSurface',
color: _colorScheme.inverseSurface,
@ -526,8 +547,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
inverseSurface: color,
);
},
),
EditableColorChip(
);
final onInverseSurface = EditableColorChip(
small: _small,
label: 'onInverseSurface',
color: _colorScheme.onInverseSurface,
@ -539,8 +561,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
onInverseSurface: color,
);
},
),
EditableColorChip(
);
final inversePrimary = EditableColorChip(
small: _small,
label: 'inversePrimary',
color: _colorScheme.inversePrimary,
@ -552,40 +575,9 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
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,
);
},
),
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(
final scrim = EditableColorChip(
small: _small,
label: 'scrim',
color: _colorScheme.scrim,
@ -596,22 +588,192 @@ class _ColorSchemeViewState extends State<ColorSchemeView> {
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,
label: 'shadow',
color: _colorScheme.shadow,
updateColorScheme: (color) {
_colorScheme = _colorScheme.copyWith(shadow: color);
widget.handleColorRoleChange(
widget.brightness,
shadow: color,
);
},
children: [
secondary,
onSecondary,
secondaryContainer,
onSecondaryContainer,
],
),
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,
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
Widget build(BuildContext context) {
final axisCount = children.length % 4 == 0
? 4
: children.length % 3 == 0
? 3
: children.length % 2 == 0
? 2
: 1;
return RepaintBoundary(
child: Card(
elevation: 0.0,
clipBehavior: Clip.antiAlias,
clipBehavior: small ? Clip.none : Clip.antiAlias,
child: small
? GridView.count(
crossAxisCount: 2,
crossAxisCount: axisCount,
crossAxisSpacing: 1,
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(),
children: children,
)
@ -758,21 +933,27 @@ class ColorChip extends StatelessWidget {
final Color labelColor = onColor ?? contrastColor(color);
return Container(
decoration: BoxDecoration(
color: color,
child: Padding(
padding: small ? const EdgeInsets.all(8) : const EdgeInsets.all(16),
border: small
? Border.all(
color: Theme.of(context).colorScheme.onSurface,
width: 2,
)
: null,
),
child: small
? null
: Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
Expanded(
child: Text(label,
style: TextStyle(
color: labelColor, fontSize: small ? 10 : null))),
Visibility(
visible: !small,
child: Text(
child: Text(label, style: TextStyle(color: labelColor))),
Text(
color.value.toRadixString(16).substring(2),
style: GoogleFonts.spaceMono(color: labelColor),
)),
),
],
),
),

Write Preview
Loading…
Cancel
Save