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>

material_3_demo/lib/color_palettes_screen.dart

@@ -55,7 +55,8 @@ class ColorPalettesScreen extends StatelessWidget {
               const TextSpan(
                 text: 'To create color schemes based on a '
                     'platform\'s implementation of dynamic color, '
-                      'use the '),
+                    'use the ',
+              ),
               TextSpan(
                 text: 'dynamic_color',
                 style: const TextStyle(decoration: TextDecoration.underline),
@@ -75,7 +76,8 @@ class ColorPalettesScreen extends StatelessWidget {
         );
 
     return Expanded(
-      child: LayoutBuilder(builder: (context, constraints) {
+      child: LayoutBuilder(
+        builder: (context, constraints) {
           if (constraints.maxWidth < narrowScreenWidthThreshold) {
             return SingleChildScrollView(
               child: Column(
@@ -123,7 +125,8 @@ class ColorPalettesScreen extends StatelessWidget {
               ),
             );
           }
-      }),
+        },
+      ),
     );
   }
 }
@@ -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) {

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

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));
   });
 }