diff --git a/material_3_demo/lib/color_palettes_screen.dart b/material_3_demo/lib/color_palettes_screen.dart index f6b495f6f77..a3462c454c0 100644 --- a/material_3_demo/lib/color_palettes_screen.dart +++ b/material_3_demo/lib/color_palettes_screen.dart @@ -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: [ 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 children; + final List children; @override Widget build(BuildContext context) { diff --git a/material_3_demo/lib/home.dart b/material_3_demo/lib/home.dart index 0158a361d51..debc9d552b8 100644 --- a/material_3_demo/lib/home.dart +++ b/material_3_demo/lib/home.dart @@ -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), ), ), ), diff --git a/material_3_demo/test/color_screen_test.dart b/material_3_demo/test/color_screen_test.dart index f9f6453facb..6282bf7987f 100644 --- a/material_3_demo/test/color_screen_test.dart +++ b/material_3_demo/test/color_screen_test.dart @@ -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)); }); }