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

Update `ColorScheme` to show the newly added color roles (#2299)

Browse Source 
This PR is to fix #2289 and add newly added `ColorScheme` roles since
https://github.com/flutter/flutter/pull/144273

---------

Co-authored-by: Parker Lougheed <parlough@gmail.com>
pull/2302/head
Qun Cheng 7 months ago committed by GitHub
parent 10776a097c
commit 649e0e4db9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 170 additions and 98 deletions
Show Stats Download Patch File Download Diff File

253
material_3_demo/lib/color_palettes_screen.dart
Unescape View File

@ -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),
@ -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),
],
),
),
),
],
),
],
],
),
],
),
),
),
);
}
}),
);
}
},
),
);
}
}
@ -136,7 +139,7 @@ class ColorSchemeView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
children: <Widget>[
ColorGroup(
children: [
ColorChip(
@ -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(
@ -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(
@ -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(
@ -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,
),
],
),
@ -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,
@ -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,
],
);
}
@ -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) {

12
material_3_demo/lib/home.dart
Unescape View File

@ -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)),
@ -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,
@ -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),
),
),
),

3
material_3_demo/test/color_screen_test.dart
Unescape View File

@ -2,7 +2,6 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// ignore_for_file: avoid_types_on_closure_parameters
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:material_3_demo/color_palettes_screen.dart';
@ -70,6 +69,6 @@ void main() {
));
expect(find.text('Light ColorScheme'), findsOneWidget);
expect(find.text('Dark ColorScheme'), findsOneWidget);
expect(find.byType(ColorGroup, skipOffstage: false), findsNWidgets(16));
expect(find.byType(ColorGroup, skipOffstage: false), findsNWidgets(18));
});
}

Write Preview
Loading…
Cancel
Save