Fix ColorScheme example and tests (#150018)

## Description This fixes the `ColorScheme` example to actually work. The test had wrapped the app in an additional `MaterialApp`, which allowed the tests to work, but the real problem was using a `context` that was outside the `MaterialApp` to open the bottom sheet, which caused an exception when you actually try to run it interactively. This fixes the example and the test. ## Tests - Fixed the test to not artificially add a second `MaterialApp`.
engine-flutter-autoroll · Jun 12, 2024 · 966d2b9 · 966d2b9
1 parent 14df7be
commit 966d2b9
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 37 deletions.
diff --git a/examples/api/lib/material/color_scheme/color_scheme.0.dart b/examples/api/lib/material/color_scheme/color_scheme.0.dart
@@ -40,26 +40,17 @@ class _ColorSchemeExampleState extends State<ColorSchemeExample> {
           seedColor: selectedColor,
           brightness: selectedBrightness,
           contrastLevel: selectedContrast,
-        )
+        ),
       ),
       home: Scaffold(
         appBar: AppBar(
           title: const Text('ColorScheme'),
           actions: <Widget>[
-            IconButton(
-              icon: const Icon(Icons.settings),
-              onPressed: () {
-                showModalBottomSheet<void>(
-                  barrierColor: Colors.transparent,
-                  context: context,
-                  builder: (BuildContext context) => Settings(
-                    selectedColor: selectedColor,
-                    selectedBrightness: selectedBrightness,
-                    selectedContrast: selectedContrast,
-                    updateTheme: updateTheme
-                  )
-                );
-              },
+            SettingsButton(
+              selectedColor: selectedColor,
+              selectedBrightness: selectedBrightness,
+              selectedContrast: selectedContrast,
+              updateTheme: updateTheme,
             ),
           ],
         ),
@@ -118,7 +109,8 @@ class _SettingsState extends State<Settings> {
   @override
   Widget build(BuildContext context) {
     return Theme(
-      data: Theme.of(context).copyWith(colorScheme: ColorScheme.fromSeed(
+      data: Theme.of(context).copyWith(
+          colorScheme: ColorScheme.fromSeed(
         seedColor: selectedColor,
         contrastLevel: selectedContrast,
         brightness: selectedBrightness,
@@ -139,31 +131,31 @@ class _SettingsState extends State<Settings> {
                       setState(() {
                         selectedBrightness = value ? Brightness.light : Brightness.dark;
                       });
-                      widget.updateTheme.call(selectedBrightness, selectedColor, selectedContrast);
+                      widget.updateTheme(selectedBrightness, selectedColor, selectedContrast);
                     },
                   )
                 ],
               ),
-              Wrap(
-                crossAxisAlignment: WrapCrossAlignment.center,
-                children: <Widget>[
-                  const Text('Seed color: '),
-                  ...List<Widget>.generate(ColorSeed.values.length, (int index) {
+              Wrap(crossAxisAlignment: WrapCrossAlignment.center, children: <Widget>[
+                const Text('Seed color: '),
+                ...List<Widget>.generate(
+                  ColorSeed.values.length,
+                  (int index) {
                     final Color itemColor = ColorSeed.values[index].color;
                     return IconButton(
                       icon: selectedColor == ColorSeed.values[index].color
-                        ? Icon(Icons.circle, color: itemColor)
-                        : Icon(Icons.circle_outlined, color: itemColor),
+                          ? Icon(Icons.circle, color: itemColor)
+                          : Icon(Icons.circle_outlined, color: itemColor),
                       onPressed: () {
                         setState(() {
                           selectedColor = itemColor;
                         });
-                        widget.updateTheme.call(selectedBrightness, selectedColor, selectedContrast);
+                        widget.updateTheme(selectedBrightness, selectedColor, selectedContrast);
                       },
                     );
-                  }),
-                ]
-              ),
+                  },
+                ),
+              ]),
               Row(
                 children: <Widget>[
                   const Text('Contrast level: '),
@@ -177,7 +169,7 @@ class _SettingsState extends State<Settings> {
                         setState(() {
                           selectedContrast = value;
                         });
-                        widget.updateTheme.call(selectedBrightness, selectedColor, selectedContrast);
+                        widget.updateTheme(selectedBrightness, selectedColor, selectedContrast);
                       },
                     ),
                   ),
@@ -230,7 +222,7 @@ class ColorSchemeVariantColumn extends StatelessWidget {
             ),
           ),
         ],
-      )
+      ),
     );
   }
 }
@@ -418,11 +410,47 @@ enum ColorSeed {
   orange('Orange', Colors.orange),
   deepOrange('Deep Orange', Colors.deepOrange),
   pink('Pink', Colors.pink),
-  brightBlue('Bright Blue',  Color(0xFF0000FF)),
-  brightGreen('Bright Green',  Color(0xFF00FF00)),
-  brightRed('Bright Red',  Color(0xFFFF0000));
+  brightBlue('Bright Blue', Color(0xFF0000FF)),
+  brightGreen('Bright Green', Color(0xFF00FF00)),
+  brightRed('Bright Red', Color(0xFFFF0000));
 
   const ColorSeed(this.label, this.color);
   final String label;
   final Color color;
 }
+
+class SettingsButton extends StatelessWidget {
+  const SettingsButton({
+    super.key,
+    required this.updateTheme,
+    required this.selectedBrightness,
+    required this.selectedContrast,
+    required this.selectedColor,
+  });
+
+  final Brightness selectedBrightness;
+  final double selectedContrast;
+  final Color selectedColor;
+
+  final void Function(Brightness, Color, double) updateTheme;
+
+  @override
+  Widget build(BuildContext context) {
+    return IconButton(
+      icon: const Icon(Icons.settings),
+      onPressed: () {
+        showModalBottomSheet<void>(
+          barrierColor: Colors.transparent,
+          context: context,
+          builder: (BuildContext context) {
+            return Settings(
+                selectedColor: selectedColor,
+                selectedBrightness: selectedBrightness,
+                selectedContrast: selectedContrast,
+                updateTheme: updateTheme);
+          },
+        );
+      },
+    );
+  }
+}
diff --git a/examples/api/test/material/color_scheme/color_scheme.0_test.dart b/examples/api/test/material/color_scheme/color_scheme.0_test.dart
@@ -9,8 +9,7 @@ import 'package:flutter_test/flutter_test.dart';
 void main() {
   testWidgets('ColorScheme Smoke Test', (WidgetTester tester) async {
     await tester.pumpWidget(
-      const MaterialApp(home: example.ColorSchemeExample()
-    ),
+      const example.ColorSchemeExample(),
     );
     expect(find.text('tonalSpot (Default)'), findsOneWidget);
 
@@ -19,7 +18,7 @@ void main() {
 
   testWidgets('Change color seed', (WidgetTester tester) async {
     await tester.pumpWidget(
-      const MaterialApp(home: example.ColorSchemeExample()),
+      const example.ColorSchemeExample(),
     );
 
     ColoredBox coloredBox() {
@@ -31,8 +30,9 @@ void main() {
       );
     }
     expect(coloredBox().color, const Color(0xff65558f));
-    await tester.tap(find.byIcon(Icons.settings));
+    await tester.tap(find.byType(example.SettingsButton));
     await tester.pumpAndSettle();
+    expect(find.text('Settings'), findsOneWidget);
     await tester.tap(find.byType(IconButton).at(6));
     await tester.pumpAndSettle();