mirror of
https://github.com/flutter/samples.git
synced 2025-11-08 13:58:47 +00:00
Update ColorScheme to show the newly added color roles (#2299)
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>
This commit is contained in:
Qun Cheng
GitHub
@@ -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),
|
||||
],
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: Column(
|
||||
children: [
|
||||
schemeLabel('Dark ColorScheme'),
|
||||
schemeView(darkTheme),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
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),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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,30 +317,56 @@ 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: 'surfaceBright',
|
||||
color: colorScheme.surfaceBright,
|
||||
onColor: colorScheme.onSurface,
|
||||
),
|
||||
ColorChip(
|
||||
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.onSurface,
|
||||
),
|
||||
ColorChip(
|
||||
label: 'onSurface',
|
||||
color: colorScheme.onSurface,
|
||||
onColor: colorScheme.surface,
|
||||
),
|
||||
ColorChip(
|
||||
label: 'surfaceContainerHighest',
|
||||
color: colorScheme.surfaceContainerHighest,
|
||||
label: 'onSurfaceVariant',
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
onColor: colorScheme.surfaceContainerHighest,
|
||||
),
|
||||
ColorChip(
|
||||
label: 'surfaceContainerHighest',
|
||||
color: colorScheme.surfaceContainerHighest,
|
||||
onColor: colorScheme.surfaceContainerHighest,
|
||||
),
|
||||
ColorChip(
|
||||
label: 'surfaceTint',
|
||||
color: colorScheme.surfaceTint,
|
||||
),
|
||||
],
|
||||
),
|
||||
divider,
|
||||
@@ -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) {
|
||||
|
||||
@@ -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),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
@@ -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));
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user