Improvements to M3 demo app (#1647)

* improvements

* fix focus

* add comment

* add comment

* copy changes to root material_3_demo

* fix large breakpoint

* fix large breakpoint

* Create integration_test.dart

* refactor main.dart into home.dart and constants.dart

* add integration_test to pubspec

* copy to root material_3_demo

* remove removal of constraints

* address feedback

Author: guidezpl

experimental/material_3_demo/integration_test/integration_test.dart

@@ -0,0 +1,15 @@
+// Copyright 2021 The Flutter team. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+import 'package:material_3_demo/main.dart' as app;
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  testWidgets('verify app can run', (tester) async {
+    app.main();
+  });
+}

experimental/material_3_demo/lib/component_screen.dart

@@ -26,25 +26,28 @@ class FirstComponentList extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ListView(
-      padding: showSecondList
-          ? const EdgeInsetsDirectional.only(end: smallSpacing)
-          : EdgeInsets.zero,
-      children: [
-        const Actions(),
-        colDivider,
-        const Communication(),
-        colDivider,
-        const Containment(),
-        if (!showSecondList) ...[
-          colDivider,
-          Navigation(scaffoldKey: scaffoldKey),
+    // Fully traverse this list before moving on.
+    return FocusTraversalGroup(
+      child: ListView(
+        padding: showSecondList
+            ? const EdgeInsetsDirectional.only(end: smallSpacing)
+            : EdgeInsets.zero,
+        children: [
+          const Actions(),
           colDivider,
-          const Selection(),
+          const Communication(),
           colDivider,
-          const TextInputs()
+          const Containment(),
+          if (!showSecondList) ...[
+            colDivider,
+            Navigation(scaffoldKey: scaffoldKey),
+            colDivider,
+            const Selection(),
+            colDivider,
+            const TextInputs()
+          ],
         ],
-      ],
+      ),
     );
   }
 }
@@ -59,15 +62,18 @@ class SecondComponentList extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ListView(
-      padding: const EdgeInsetsDirectional.only(end: smallSpacing),
-      children: <Widget>[
-        Navigation(scaffoldKey: scaffoldKey),
-        colDivider,
-        const Selection(),
-        colDivider,
-        const TextInputs(),
-      ],
+    // Fully traverse this list before moving on.
+    return FocusTraversalGroup(
+      child: ListView(
+        padding: const EdgeInsetsDirectional.only(end: smallSpacing),
+        children: <Widget>[
+          Navigation(scaffoldKey: scaffoldKey),
+          colDivider,
+          const Selection(),
+          colDivider,
+          const TextInputs(),
+        ],
+      ),
     );
   }
 }
@@ -1011,13 +1017,13 @@ class NavigationBars extends StatefulWidget {
     this.onSelectItem,
     required this.selectedIndex,
     required this.isExampleBar,
-    this.isBadgeExample,
+    this.isBadgeExample = false,
   });
 
   final void Function(int)? onSelectItem;
   final int selectedIndex;
   final bool isExampleBar;
-  final bool? isBadgeExample;
+  final bool isBadgeExample;
 
   @override
   State<NavigationBars> createState() => _NavigationBarsState();
@@ -1042,23 +1048,26 @@ class _NavigationBarsState extends State<NavigationBars> {
 
   @override
   Widget build(BuildContext context) {
-    bool isBadgeExample = widget.isBadgeExample ?? false;
-    Widget navigationBar = NavigationBar(
-      selectedIndex: selectedIndex,
-      onDestinationSelected: (index) {
-        setState(() {
-          selectedIndex = index;
-        });
-        if (!widget.isExampleBar) widget.onSelectItem!(index);
-      },
-      destinations: widget.isExampleBar && isBadgeExample
-          ? barWithBadgeDestinations
-          : widget.isExampleBar
-              ? exampleBarDestinations
-              : appBarDestinations,
+    // App NavigationBar should get first focus.
+    Widget navigationBar = Focus(
+      autofocus: !(widget.isExampleBar || widget.isBadgeExample),
+      child: NavigationBar(
+        selectedIndex: selectedIndex,
+        onDestinationSelected: (index) {
+          setState(() {
+            selectedIndex = index;
+          });
+          if (!widget.isExampleBar) widget.onSelectItem!(index);
+        },
+        destinations: widget.isExampleBar && widget.isBadgeExample
+            ? barWithBadgeDestinations
+            : widget.isExampleBar
+                ? exampleBarDestinations
+                : appBarDestinations,
+      ),
     );
 
-    if (widget.isExampleBar && isBadgeExample) {
+    if (widget.isExampleBar && widget.isBadgeExample) {
       navigationBar = ComponentDecoration(
           label: 'Badges',
           tooltipMessage: 'Use Badge or Badge.count',
@@ -2188,7 +2197,7 @@ class _SlidersState extends State<Sliders> {
   }
 }
 
-class ComponentDecoration extends StatelessWidget {
+class ComponentDecoration extends StatefulWidget {
   const ComponentDecoration({
     super.key,
     required this.label,
@@ -2200,6 +2209,13 @@ class ComponentDecoration extends StatelessWidget {
   final Widget child;
   final String? tooltipMessage;
 
+  @override
+  State<ComponentDecoration> createState() => _ComponentDecorationState();
+}
+
+class _ComponentDecorationState extends State<ComponentDecoration> {
+  final focusNode = FocusNode();
+
   @override
   Widget build(BuildContext context) {
     return RepaintBoundary(
@@ -2210,9 +2226,10 @@ class ComponentDecoration extends StatelessWidget {
             Row(
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
-                Text(label, style: Theme.of(context).textTheme.titleSmall),
+                Text(widget.label,
+                    style: Theme.of(context).textTheme.titleSmall),
                 Tooltip(
-                  message: tooltipMessage,
+                  message: widget.tooltipMessage,
                   child: const Padding(
                       padding: EdgeInsets.symmetric(horizontal: 5.0),
                       child: Icon(Icons.info_outline, size: 16)),
@@ -2222,18 +2239,32 @@ class ComponentDecoration extends StatelessWidget {
             ConstrainedBox(
               constraints:
                   const BoxConstraints.tightFor(width: widthConstraint),
-              child: Card(
-                elevation: 0,
-                shape: RoundedRectangleBorder(
-                  side: BorderSide(
-                    color: Theme.of(context).colorScheme.outlineVariant,
+              // Tapping within the a component card should request focus
+              // for that component's children.
+              child: Focus(
+                focusNode: focusNode,
+                canRequestFocus: true,
+                child: GestureDetector(
+                  onTapDown: (_) {
+                    focusNode.requestFocus();
+                  },
+                  behavior: HitTestBehavior.opaque,
+                  child: Card(
+                    elevation: 0,
+                    shape: RoundedRectangleBorder(
+                      side: BorderSide(
+                        color: Theme.of(context).colorScheme.outlineVariant,
+                      ),
+                      borderRadius: const BorderRadius.all(Radius.circular(12)),
+                    ),
+                    child: Padding(
+                      padding: const EdgeInsets.symmetric(
+                          horizontal: 5.0, vertical: 20.0),
+                      child: Center(
+                        child: widget.child,
+                      ),
+                    ),
                   ),
-                  borderRadius: const BorderRadius.all(Radius.circular(12)),
-                ),
-                child: Padding(
-                  padding: const EdgeInsets.symmetric(
-                      horizontal: 5.0, vertical: 20.0),
-                  child: Center(child: child),
                 ),
               ),
             ),
@@ -2253,19 +2284,22 @@ class ComponentGroupDecoration extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Card(
-      margin: EdgeInsets.zero,
-      elevation: 0,
-      color: Theme.of(context).colorScheme.surfaceVariant.withOpacity(0.3),
-      child: Padding(
-        padding: const EdgeInsets.symmetric(vertical: 20.0),
-        child: Center(
-          child: Column(
-            children: [
-              Text(label, style: Theme.of(context).textTheme.titleLarge),
-              colDivider,
-              ...children
-            ],
+    // Fully traverse this component group before moving on
+    return FocusTraversalGroup(
+      child: Card(
+        margin: EdgeInsets.zero,
+        elevation: 0,
+        color: Theme.of(context).colorScheme.surfaceVariant.withOpacity(0.3),
+        child: Padding(
+          padding: const EdgeInsets.symmetric(vertical: 20.0),
+          child: Center(
+            child: Column(
+              children: [
+                Text(label, style: Theme.of(context).textTheme.titleLarge),
+                colDivider,
+                ...children
+              ],
+            ),
           ),
         ),
       ),

experimental/material_3_demo/lib/constants.dart

@@ -0,0 +1,40 @@
+// Copyright 2021 The Flutter team. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+
+// NavigationRail shows if the screen width is greater or equal to
+// narrowScreenWidthThreshold; otherwise, NavigationBar is used for navigation.
+const double narrowScreenWidthThreshold = 450;
+
+const double mediumWidthBreakpoint = 1000;
+const double largeWidthBreakpoint = 1500;
+
+const double transitionLength = 500;
+
+enum ColorSeed {
+  baseColor('M3 Baseline', Color(0xff6750a4)),
+  indigo('Indigo', Colors.indigo),
+  blue('Blue', Colors.blue),
+  teal('Teal', Colors.teal),
+  green('Green', Colors.green),
+  yellow('Yellow', Colors.yellow),
+  orange('Orange', Colors.orange),
+  deepOrange('Deep Orange', Colors.deepOrange),
+  pink('Pink', Colors.pink);
+
+  const ColorSeed(this.label, this.color);
+  final String label;
+  final Color color;
+}
+
+enum ScreenSelected {
+  component(0),
+  color(1),
+  typography(2),
+  elevation(3);
+
+  const ScreenSelected(this.value);
+  final int value;
+}