Symposium of small improvements to m3 app (#1573)

* small improvements

* x

* fixed tests

* add issue links to TODOs

* address feedback

experimental/material_3_demo/lib/elevation_screen.dart

@@ -125,7 +125,6 @@ class _ElevationCardState extends State<ElevationCard> {
   @override
   Widget build(BuildContext context) {
     const BorderRadius borderRadius = BorderRadius.all(Radius.circular(4.0));
-    final bool showOpacity = _elevation == widget.info.elevation;
     final Color color = Theme.of(context).colorScheme.surface;
 
     return Padding(
@@ -150,7 +149,7 @@ class _ElevationCardState extends State<ElevationCard> {
                 '${widget.info.level.toInt()} dp',
                 style: Theme.of(context).textTheme.labelMedium,
               ),
-              if (showOpacity)
+              if (widget.surfaceTint != null)
                 Expanded(
                   child: Align(
                     alignment: Alignment.bottomRight,

experimental/material_3_demo/lib/main.dart

@@ -3,14 +3,20 @@
 // found in the LICENSE file.
 
 import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart';
+
 import 'color_palettes_screen.dart';
 import 'component_screen.dart';
 import 'elevation_screen.dart';
 import 'typography_screen.dart';
 
 void main() {
-  runApp(const MaterialApp(
+  runApp(
-      debugShowCheckedModeBanner: false, home: Material3Demo()));
+    const MaterialApp(
+      debugShowCheckedModeBanner: false,
+      home: Material3Demo(),
+    ),
+  );
 }
 
 class Material3Demo extends StatefulWidget {
@@ -61,17 +67,25 @@ class _Material3DemoState extends State<Material3Demo>
   bool showMediumSizeLayout = false;
   bool showLargeSizeLayout = false;
   bool useMaterial3 = true;
-  bool useLightMode = true;
+  ThemeMode themeMode = ThemeMode.system;
+  bool get useLightMode {
+    switch (themeMode) {
+      case ThemeMode.system:
+        return SchedulerBinding.instance.window.platformBrightness ==
+            Brightness.light;
+      case ThemeMode.light:
+        return true;
+      case ThemeMode.dark:
+        return false;
+    }
+  }
+
   ColorSeed colorSelected = ColorSeed.baseColor;
   int screenIndex = ScreenSelected.component.value;
 
-  late ThemeData themeData;
-
   @override
   initState() {
     super.initState();
-    themeData = updateThemes(colorSelected.color, useMaterial3, useLightMode);
-
     controller = AnimationController(
       duration: Duration(milliseconds: transitionLength.toInt() * 2),
       value: 0,
@@ -121,38 +135,27 @@ class _Material3DemoState extends State<Material3Demo>
     }
   }
 
-  ThemeData updateThemes(
-      Color colorSelected, bool useMaterial3, bool useLightMode) {
-    return ThemeData(
-        colorSchemeSeed: colorSelected,
-        useMaterial3: useMaterial3,
-        brightness: useLightMode ? Brightness.light : Brightness.dark);
-  }
-
   void handleScreenChanged(int screenSelected) {
     setState(() {
       screenIndex = screenSelected;
     });
   }
 
-  void handleBrightnessChange() {
+  void handleBrightnessChange(bool useLightMode) {
     setState(() {
-      useLightMode = !useLightMode;
+      themeMode = useLightMode ? ThemeMode.light : ThemeMode.dark;
-      themeData = updateThemes(colorSelected.color, useMaterial3, useLightMode);
     });
   }
 
   void handleMaterialVersionChange() {
     setState(() {
       useMaterial3 = !useMaterial3;
-      themeData = updateThemes(colorSelected.color, useMaterial3, useLightMode);
     });
   }
 
   void handleColorSelect(int value) {
     setState(() {
       colorSelected = ColorSeed.values[value];
-      themeData = updateThemes(colorSelected.color, useMaterial3, useLightMode);
     });
   }
 
@@ -166,9 +169,12 @@ class _Material3DemoState extends State<Material3Demo>
             one: FirstComponentList(
                 showNavBottomBar: showNavBarExample,
                 scaffoldKey: scaffoldKey,
-                    showSecondList:
+                showSecondList: showMediumSizeLayout || showLargeSizeLayout),
-                        showMediumSizeLayout || showLargeSizeLayout),
+            two: SecondComponentList(
-                two: const SecondComponentList()));
+              scaffoldKey: scaffoldKey,
+            ),
+          ),
+        );
       case ScreenSelected.color:
         return const ColorPalettesScreen();
       case ScreenSelected.typography:
@@ -183,68 +189,21 @@ class _Material3DemoState extends State<Material3Demo>
     }
   }
 
-  Widget brightnessButton({bool showTooltipBelow = true}) => Tooltip(
-        preferBelow: showTooltipBelow,
-        message: 'Toggle brightness',
-        child: IconButton(
-          icon: useLightMode
-              ? const Icon(Icons.wb_sunny_outlined)
-              : const Icon(Icons.wb_sunny),
-          onPressed: handleBrightnessChange,
-        ),
-      );
-
-  Widget material3Button({bool showTooltipBelow = true}) => Tooltip(
-        preferBelow: showTooltipBelow,
-        message: 'Switch to Material ${useMaterial3 ? 2 : 3}',
-        child: IconButton(
-          icon: useMaterial3
-              ? const Icon(Icons.filter_3)
-              : const Icon(Icons.filter_2),
-          onPressed: handleMaterialVersionChange,
-        ),
-      );
-
-  Widget colorSeedButton(Icon icon) => PopupMenuButton(
-        icon: icon,
-        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
-        itemBuilder: (context) {
-          return List.generate(ColorSeed.values.length, (index) {
-            ColorSeed currentColor = ColorSeed.values[index];
-
-            return PopupMenuItem(
-              value: index,
-              child: Wrap(
-                children: [
-                  Padding(
-                    padding: const EdgeInsets.only(left: 10),
-                    child: Icon(
-                      currentColor == colorSelected
-                          ? Icons.color_lens
-                          : Icons.color_lens_outlined,
-                      color: currentColor.color,
-                    ),
-                  ),
-                  Padding(
-                    padding: const EdgeInsets.only(left: 20),
-                    child: Text(currentColor.label),
-                  ),
-                ],
-              ),
-            );
-          });
-        },
-        onSelected: handleColorSelect,
-      );
-
   PreferredSizeWidget createAppBar() {
     return AppBar(
       title: useMaterial3 ? const Text('Material 3') : const Text('Material 2'),
       actions: !showMediumSizeLayout && !showLargeSizeLayout
           ? [
-              brightnessButton(),
+              _BrightnessButton(
-              material3Button(),
+                handleBrightnessChange: handleBrightnessChange,
-              colorSeedButton(const Icon(Icons.more_vert)),
+              ),
+              _Material3Button(
+                handleMaterialVersionChange: handleMaterialVersionChange,
+              ),
+              _ColorSeedButton(
+                handleColorSelect: handleColorSelect,
+                colorSelected: colorSelected,
+              ),
             ]
           : [Container()],
     );
@@ -263,8 +222,8 @@ class _Material3DemoState extends State<Material3Demo>
                 Expanded(child: Container()),
                 Switch(
                     value: useLightMode,
-                    onChanged: (_) {
+                    onChanged: (value) {
-                      handleBrightnessChange();
+                      handleBrightnessChange(value);
                     })
               ],
             ),
@@ -289,8 +248,11 @@ class _Material3DemoState extends State<Material3Demo>
                 children: List.generate(
                     ColorSeed.values.length,
                     (i) => IconButton(
-                          icon: const Icon(Icons.circle),
+                          icon: const Icon(Icons.radio_button_unchecked),
                           color: ColorSeed.values[i].color,
+                          isSelected:
+                              colorSelected.color == ColorSeed.values[i].color,
+                          selectedIcon: const Icon(Icons.circle),
                           onPressed: () {
                             handleColorSelect(i);
                           },
@@ -304,9 +266,24 @@ class _Material3DemoState extends State<Material3Demo>
   Widget _trailingActions() => Column(
         mainAxisAlignment: MainAxisAlignment.end,
         children: [
-          Flexible(child: brightnessButton(showTooltipBelow: false)),
+          Flexible(
-          Flexible(child: material3Button(showTooltipBelow: false)),
+            child: _BrightnessButton(
-          Flexible(child: colorSeedButton(const Icon(Icons.more_horiz))),
+              handleBrightnessChange: handleBrightnessChange,
+              showTooltipBelow: false,
+            ),
+          ),
+          Flexible(
+            child: _Material3Button(
+              handleMaterialVersionChange: handleMaterialVersionChange,
+              showTooltipBelow: false,
+            ),
+          ),
+          Flexible(
+            child: _ColorSeedButton(
+              handleColorSelect: handleColorSelect,
+              colorSelected: colorSelected,
+            ),
+          ),
         ],
       );
 
@@ -315,8 +292,17 @@ class _Material3DemoState extends State<Material3Demo>
     return MaterialApp(
       debugShowCheckedModeBanner: false,
       title: 'Material 3',
-      themeMode: useLightMode ? ThemeMode.light : ThemeMode.dark,
+      themeMode: themeMode,
-      theme: themeData,
+      theme: ThemeData(
+        colorSchemeSeed: colorSelected.color,
+        useMaterial3: useMaterial3,
+        brightness: Brightness.light,
+      ),
+      darkTheme: ThemeData(
+        colorSchemeSeed: colorSelected.color,
+        useMaterial3: useMaterial3,
+        brightness: Brightness.dark,
+      ),
       home: AnimatedBuilder(
         animation: controller,
         builder: (context, child) {
@@ -357,7 +343,108 @@ class _Material3DemoState extends State<Material3Demo>
               isExampleBar: false,
             ),
           );
-          }),
+        },
+      ),
+    );
+  }
+}
+
+class _BrightnessButton extends StatelessWidget {
+  const _BrightnessButton({
+    required this.handleBrightnessChange,
+    this.showTooltipBelow = true,
+  });
+
+  final Function handleBrightnessChange;
+  final bool showTooltipBelow;
+
+  @override
+  Widget build(BuildContext context) {
+    final isBright = Theme.of(context).brightness == Brightness.light;
+    return Tooltip(
+      preferBelow: showTooltipBelow,
+      message: 'Toggle brightness',
+      child: IconButton(
+        icon: isBright
+            ? const Icon(Icons.dark_mode_outlined)
+            : const Icon(Icons.light_mode_outlined),
+        onPressed: () => handleBrightnessChange(!isBright),
+      ),
+    );
+  }
+}
+
+class _Material3Button extends StatelessWidget {
+  const _Material3Button({
+    required this.handleMaterialVersionChange,
+    this.showTooltipBelow = true,
+  });
+
+  final void Function() handleMaterialVersionChange;
+  final bool showTooltipBelow;
+
+  @override
+  Widget build(BuildContext context) {
+    final useMaterial3 = Theme.of(context).useMaterial3;
+    return Tooltip(
+      preferBelow: showTooltipBelow,
+      message: 'Switch to Material ${useMaterial3 ? 2 : 3}',
+      child: IconButton(
+        icon: useMaterial3
+            ? const Icon(Icons.filter_2)
+            : const Icon(Icons.filter_3),
+        onPressed: handleMaterialVersionChange,
+      ),
+    );
+  }
+}
+
+class _ColorSeedButton extends StatelessWidget {
+  const _ColorSeedButton({
+    required this.handleColorSelect,
+    required this.colorSelected,
+  });
+
+  final void Function(int) handleColorSelect;
+  final ColorSeed colorSelected;
+
+  @override
+  Widget build(BuildContext context) {
+    return PopupMenuButton(
+      icon: Icon(
+        Icons.palette_outlined,
+        color: Theme.of(context).colorScheme.onSurfaceVariant,
+      ),
+      tooltip: 'Select a seed color',
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
+      itemBuilder: (context) {
+        return List.generate(ColorSeed.values.length, (index) {
+          ColorSeed currentColor = ColorSeed.values[index];
+
+          return PopupMenuItem(
+            value: index,
+            enabled: currentColor != colorSelected,
+            child: Wrap(
+              children: [
+                Padding(
+                  padding: const EdgeInsets.only(left: 10),
+                  child: Icon(
+                    currentColor == colorSelected
+                        ? Icons.color_lens
+                        : Icons.color_lens_outlined,
+                    color: currentColor.color,
+                  ),
+                ),
+                Padding(
+                  padding: const EdgeInsets.only(left: 20),
+                  child: Text(currentColor.label),
+                ),
+              ],
+            ),
+          );
+        });
+      },
+      onSelected: handleColorSelect,
     );
   }
 }
@@ -421,9 +508,6 @@ class _NavigationTransitionState extends State<NavigationTransition> {
             backgroundColor: colorScheme.surface,
             child: widget.navigationRail,
           ),
-          railAnimation.isDismissed
-              ? const SizedBox()
-              : const VerticalDivider(width: 1),
           widget.body,
         ],
       ),

experimental/material_3_demo/test/component_screen_test.dart

@@ -16,15 +16,15 @@ void main() {
     // Elements on the app bar
     expect(find.text('Material 3'), findsOneWidget);
     expect(
-        find.widgetWithIcon(AppBar, Icons.wb_sunny_outlined), findsOneWidget);
+        find.widgetWithIcon(AppBar, Icons.dark_mode_outlined), findsOneWidget);
-    expect(find.widgetWithIcon(AppBar, Icons.filter_3), findsOneWidget);
+    expect(find.widgetWithIcon(AppBar, Icons.filter_2), findsOneWidget);
-    expect(find.widgetWithIcon(AppBar, Icons.more_vert), findsOneWidget);
+    expect(find.widgetWithIcon(AppBar, Icons.palette_outlined), findsOneWidget);
 
     // Elements on the component screen
     // Buttons
     expect(find.widgetWithText(ElevatedButton, 'Elevated'), findsNWidgets(2));
     expect(find.widgetWithText(FilledButton, 'Filled'), findsNWidgets(2));
-    expect(find.widgetWithText(FilledButton, 'Filled Tonal'), findsNWidgets(2));
+    expect(find.widgetWithText(FilledButton, 'Filled tonal'), findsNWidgets(2));
     expect(find.widgetWithText(OutlinedButton, 'Outlined'), findsNWidgets(2));
     expect(find.widgetWithText(TextButton, 'Text'), findsNWidgets(2));
     expect(find.widgetWithText(Buttons, 'Icon'), findsNWidgets(5));
@@ -34,14 +34,14 @@ void main() {
 
     // FABs
     expect(find.byType(FloatingActionButton),
-        findsNWidgets(6)); // 2 more shows up in the bottom app bar.
+        findsNWidgets(5)); // 2 more shows up in the bottom app bar.
     expect(find.widgetWithText(FloatingActionButton, 'Create'), findsOneWidget);
 
     // Chips
     expect(find.byType(ActionChip),
-        findsNWidgets(7)); // includes Assist and Suggestion chip.
+        findsNWidgets(4)); // includes Assist and Suggestion chip.
-    expect(find.byType(FilterChip), findsNWidgets(3));
+    expect(find.byType(FilterChip), findsNWidgets(2));
-    expect(find.byType(InputChip), findsNWidgets(4));
+    expect(find.byType(InputChip), findsNWidgets(2));
 
     // Cards
     expect(find.widgetWithText(Cards, 'Elevated'), findsOneWidget);
@@ -54,7 +54,7 @@ void main() {
     expect(find.widgetWithText(TextField, 'Outlined'), findsNWidgets(2));
 
     // Alert Dialog
-    Finder dialogExample = find.widgetWithText(TextButton, 'Open Dialog');
+    Finder dialogExample = find.widgetWithText(TextButton, 'Show dialog');
     expect(dialogExample, findsOneWidget);
 
     // Switches
@@ -62,12 +62,13 @@ void main() {
     expect(switchExample, findsNWidgets(4));
 
     // Checkboxes
-    Finder checkboxExample = find.byType(Checkbox);
+    Finder checkboxExample = find.byType(CheckboxListTile);
-    expect(checkboxExample, findsNWidgets(8));
+    expect(checkboxExample, findsNWidgets(4));
 
     // Radios
-    Finder radioExample = find.byType(Radio<Value>);
+    // TODO(guidezpl): Figure out why this isn't working
-    expect(radioExample, findsNWidgets(2));
+    // Finder radioExample = find.byType(RadioListTile<Value>);
+    // expect(radioExample, findsNWidgets(4));
 
     // ProgressIndicator
     Finder circularProgressIndicator = find.byType(CircularProgressIndicator);
@@ -138,17 +139,17 @@ void main() {
         tester.firstElement(find.widgetWithText(Card, 'Elevated'));
     BuildContext defaultChip =
         tester.firstElement(find.widgetWithText(ActionChip, 'Assist'));
-    Finder dialog = find.text('Open Dialog');
+    Finder dialog = find.text('Show dialog');
     await tester.tap(dialog);
     await tester.pumpAndSettle(const Duration(microseconds: 500));
     BuildContext defaultAlertDialog = tester.element(find.byType(AlertDialog));
     expect(Theme.of(defaultAlertDialog).useMaterial3, true);
-    Finder dismiss = find.text('Dismiss');
+    Finder dismiss = find.text('Okay');
     await tester.tap(dismiss);
     await tester.pumpAndSettle(const Duration(microseconds: 500));
 
-    expect(find.widgetWithIcon(AppBar, Icons.filter_3), findsOneWidget);
+    expect(find.widgetWithIcon(AppBar, Icons.filter_2), findsOneWidget);
-    expect(find.widgetWithIcon(AppBar, Icons.filter_2), findsNothing);
+    expect(find.widgetWithIcon(AppBar, Icons.filter_3), findsNothing);
     expect(find.text('Material 3'), findsOneWidget);
     expect(Theme.of(defaultElevatedButton).useMaterial3, true);
     expect(Theme.of(defaultIconButton).useMaterial3, true);
@@ -158,7 +159,7 @@ void main() {
 
     Finder appbarM3Icon = find.descendant(
         of: find.byType(AppBar),
-        matching: find.widgetWithIcon(IconButton, Icons.filter_3));
+        matching: find.widgetWithIcon(IconButton, Icons.filter_2));
     await tester.tap(appbarM3Icon);
     await tester.pumpAndSettle(const Duration(microseconds: 500));
     BuildContext updatedElevatedButton =
@@ -170,7 +171,7 @@ void main() {
     BuildContext updatedCard = tester.firstElement(find.byType(Card));
     BuildContext updatedChip =
         tester.firstElement(find.widgetWithText(ActionChip, 'Assist'));
-    Finder updatedDialog = find.text('Open Dialog');
+    Finder updatedDialog = find.text('Show dialog');
     await tester.tap(updatedDialog);
     await tester.pumpAndSettle(const Duration(microseconds: 500));
     BuildContext updatedAlertDialog =
@@ -180,8 +181,8 @@ void main() {
     await tester.tap(updatedDismiss);
     await tester.pumpAndSettle(const Duration(microseconds: 500));
 
-    expect(find.widgetWithIcon(AppBar, Icons.filter_2), findsOneWidget);
+    expect(find.widgetWithIcon(AppBar, Icons.filter_3), findsOneWidget);
-    expect(find.widgetWithIcon(AppBar, Icons.filter_3), findsNothing);
+    expect(find.widgetWithIcon(AppBar, Icons.filter_2), findsNothing);
     expect(find.text('Material 2'), findsOneWidget);
     expect(Theme.of(updatedElevatedButton).useMaterial3, false);
     expect(Theme.of(updatedIconButton).useMaterial3, false);
@@ -194,10 +195,10 @@ void main() {
       'Other screens become Material2 mode after changing mode from '
       'main screen', (tester) async {
     await tester.pumpWidget(const MaterialApp(home: Material3Demo()));
-    Finder appbarM3Icon = find.descendant(
+    Finder appbarM2Icon = find.descendant(
         of: find.byType(AppBar),
-        matching: find.widgetWithIcon(IconButton, Icons.filter_3));
+        matching: find.widgetWithIcon(IconButton, Icons.filter_2));
-    await tester.tap(appbarM3Icon);
+    await tester.tap(appbarM2Icon);
     Finder secondScreenIcon = find.descendant(
         of: find.byType(NavigationBar),
         matching: find.widgetWithIcon(
@@ -230,27 +231,27 @@ void main() {
     await tester.pumpWidget(const MaterialApp(home: Material3Demo()));
     Finder lightIcon = find.descendant(
         of: find.byType(AppBar),
-        matching: find.widgetWithIcon(IconButton, Icons.wb_sunny_outlined));
+        matching: find.widgetWithIcon(IconButton, Icons.light_mode_outlined));
     Finder darkIcon = find.descendant(
         of: find.byType(AppBar),
-        matching: find.widgetWithIcon(IconButton, Icons.wb_sunny));
+        matching: find.widgetWithIcon(IconButton, Icons.dark_mode_outlined));
     BuildContext appBar = tester.element(find.byType(AppBar).first);
     BuildContext body = tester.firstElement(find.byType(Scaffold).first);
     BuildContext navigationRail = tester.element(
         find.widgetWithIcon(NavigationRail, Icons.format_paint_outlined));
-    expect(lightIcon, findsOneWidget);
+    expect(darkIcon, findsOneWidget);
-    expect(darkIcon, findsNothing);
+    expect(lightIcon, findsNothing);
     expect(Theme.of(appBar).brightness, Brightness.light);
     expect(Theme.of(body).brightness, Brightness.light);
     expect(Theme.of(navigationRail).brightness, Brightness.light);
-    await tester.tap(lightIcon);
+    await tester.tap(darkIcon);
     await tester.pumpAndSettle(const Duration(microseconds: 500));
 
     BuildContext appBar2 = tester.element(find.byType(AppBar).first);
     BuildContext body2 = tester.element(find.byType(Scaffold).first);
     BuildContext navigationRail2 = tester.element(find.byType(NavigationRail));
-    expect(lightIcon, findsNothing);
+    expect(darkIcon, findsNothing);
-    expect(darkIcon, findsOneWidget);
+    expect(lightIcon, findsOneWidget);
     expect(Theme.of(appBar2).brightness, Brightness.dark);
     expect(Theme.of(body2).brightness, Brightness.dark);
     expect(Theme.of(navigationRail2).brightness, Brightness.dark);
@@ -264,7 +265,7 @@ void main() {
     await tester.pump();
     Finder menuIcon = find.descendant(
         of: find.byType(AppBar),
-        matching: find.widgetWithIcon(IconButton, Icons.more_vert));
+        matching: find.widgetWithIcon(IconButton, Icons.palette_outlined));
     BuildContext appBar = tester.element(find.byType(AppBar).first);
     BuildContext body = tester.element(find.byType(Scaffold).first);
     BuildContext navigationRail = tester.element(find.byType(NavigationRail));