Revert "Improvements to M3 demo app (#1630)" (#1643)

This reverts commit 6207e34192.

material_3_demo/lib/component_screen.dart

@@ -26,28 +26,25 @@ class FirstComponentList extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    // Fully traverse this list before moving on.
-    return FocusTraversalGroup(
-      child: ListView(
-        padding: showSecondList
-            ? const EdgeInsetsDirectional.only(end: smallSpacing)
-            : EdgeInsets.zero,
-        children: [
-          const Actions(),
+    return ListView(
+      padding: showSecondList
+          ? const EdgeInsetsDirectional.only(end: smallSpacing)
+          : EdgeInsets.zero,
+      children: [
+        const Actions(),
+        colDivider,
+        const Communication(),
+        colDivider,
+        const Containment(),
+        if (!showSecondList) ...[
           colDivider,
-          const Communication(),
+          Navigation(scaffoldKey: scaffoldKey),
           colDivider,
-          const Containment(),
-          if (!showSecondList) ...[
-            colDivider,
-            Navigation(scaffoldKey: scaffoldKey),
-            colDivider,
-            const Selection(),
-            colDivider,
-            const TextInputs()
-          ],
+          const Selection(),
+          colDivider,
+          const TextInputs()
         ],
-      ),
+      ],
     );
   }
 }
@@ -62,18 +59,15 @@ class SecondComponentList extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    // 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(),
-        ],
-      ),
+    return ListView(
+      padding: const EdgeInsetsDirectional.only(end: smallSpacing),
+      children: <Widget>[
+        Navigation(scaffoldKey: scaffoldKey),
+        colDivider,
+        const Selection(),
+        colDivider,
+        const TextInputs(),
+      ],
     );
   }
 }
@@ -1017,13 +1011,13 @@ class NavigationBars extends StatefulWidget {
     this.onSelectItem,
     required this.selectedIndex,
     required this.isExampleBar,
-    this.isBadgeExample = false,
+    this.isBadgeExample,
   });
 
   final void Function(int)? onSelectItem;
   final int selectedIndex;
   final bool isExampleBar;
-  final bool isBadgeExample;
+  final bool? isBadgeExample;
 
   @override
   State<NavigationBars> createState() => _NavigationBarsState();
@@ -1048,26 +1042,23 @@ class _NavigationBarsState extends State<NavigationBars> {
 
   @override
   Widget build(BuildContext context) {
-    // App NavigationBar should get first focus.
-    Widget navigationBar = Focus(
-      autofocus: !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,
-      ),
+    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,
     );
 
-    if (widget.isExampleBar && widget.isBadgeExample) {
+    if (widget.isExampleBar && isBadgeExample) {
       navigationBar = ComponentDecoration(
           label: 'Badges',
           tooltipMessage: 'Use Badge or Badge.count',
@@ -1562,6 +1553,8 @@ class _BottomSheetSectionState extends State<BottomSheetSection> {
             onPressed: () {
               showModalBottomSheet<void>(
                 context: context,
+                // TODO: Remove when this is in the framework https://github.com/flutter/flutter/issues/118619
+                constraints: const BoxConstraints(maxWidth: 640),
                 builder: (context) {
                   return SizedBox(
                     height: 150,
@@ -1601,6 +1594,8 @@ class _BottomSheetSectionState extends State<BottomSheetSection> {
               _nonModalBottomSheetController = showBottomSheet<void>(
                 elevation: 8.0,
                 context: context,
+                // TODO: Remove when this is in the framework https://github.com/flutter/flutter/issues/118619
+                constraints: const BoxConstraints(maxWidth: 640),
                 builder: (context) {
                   return SizedBox(
                     height: 150,
@@ -2193,7 +2188,7 @@ class _SlidersState extends State<Sliders> {
   }
 }
 
-class ComponentDecoration extends StatefulWidget {
+class ComponentDecoration extends StatelessWidget {
   const ComponentDecoration({
     super.key,
     required this.label,
@@ -2205,13 +2200,6 @@ class ComponentDecoration extends StatefulWidget {
   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(
@@ -2222,10 +2210,9 @@ class _ComponentDecorationState extends State<ComponentDecoration> {
             Row(
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
-                Text(widget.label,
-                    style: Theme.of(context).textTheme.titleSmall),
+                Text(label, style: Theme.of(context).textTheme.titleSmall),
                 Tooltip(
-                  message: widget.tooltipMessage,
+                  message: tooltipMessage,
                   child: const Padding(
                       padding: EdgeInsets.symmetric(horizontal: 5.0),
                       child: Icon(Icons.info_outline, size: 16)),
@@ -2235,32 +2222,18 @@ class _ComponentDecorationState extends State<ComponentDecoration> {
             ConstrainedBox(
               constraints:
                   const BoxConstraints.tightFor(width: widthConstraint),
-              // 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,
-                      ),
-                    ),
+              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: child),
                 ),
               ),
             ),
@@ -2280,22 +2253,19 @@ class ComponentGroupDecoration extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    // 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
-              ],
-            ),
+    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
+            ],
           ),
         ),
       ),