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

This reverts commit 6207e34192.
2025-11-08 13:58:47 +00:00 · 2023-02-08 22:39:28 +10:00
parent 6207e34192
commit e1f3fb020e
4 changed files with 182 additions and 242 deletions
--- a/experimental/material_3_demo/lib/component_screen.dart
+++ b/experimental/material_3_demo/lib/component_screen.dart
@@ -26,9 +26,7 @@ class FirstComponentList extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    // Fully traverse this list before moving on.
-    return FocusTraversalGroup(
-      child: ListView(
+    return ListView(
      padding: showSecondList
          ? const EdgeInsetsDirectional.only(end: smallSpacing)
          : EdgeInsets.zero,
@@ -47,7 +45,6 @@ class FirstComponentList extends StatelessWidget {
          const TextInputs()
        ],
      ],
-      ),
    );
  }
 }
@@ -62,9 +59,7 @@ class SecondComponentList extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    // Fully traverse this list before moving on.
-    return FocusTraversalGroup(
-      child: ListView(
+    return ListView(
      padding: const EdgeInsetsDirectional.only(end: smallSpacing),
      children: <Widget>[
        Navigation(scaffoldKey: scaffoldKey),
@@ -73,7 +68,6 @@ class SecondComponentList extends StatelessWidget {
        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,10 +1042,8 @@ class _NavigationBarsState extends State<NavigationBars> {

  @override
  Widget build(BuildContext context) {
-    // App NavigationBar should get first focus.
-    Widget navigationBar = Focus(
-      autofocus: !widget.isBadgeExample,
-      child: NavigationBar(
+    bool isBadgeExample = widget.isBadgeExample ?? false;
+    Widget navigationBar = NavigationBar(
      selectedIndex: selectedIndex,
      onDestinationSelected: (index) {
        setState(() {
@@ -1059,15 +1051,14 @@ class _NavigationBarsState extends State<NavigationBars> {
        });
        if (!widget.isExampleBar) widget.onSelectItem!(index);
      },
-        destinations: widget.isExampleBar && widget.isBadgeExample
+      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,16 +2222,6 @@ 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(
@@ -2256,11 +2233,7 @@ class _ComponentDecorationState extends State<ComponentDecoration> {
                child: Padding(
                  padding: const EdgeInsets.symmetric(
                      horizontal: 5.0, vertical: 20.0),
-                      child: Center(
-                        child: widget.child,
-                      ),
-                    ),
-                  ),
+                  child: Center(child: child),
                ),
              ),
            ),
@@ -2280,9 +2253,7 @@ class ComponentGroupDecoration extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    // Fully traverse this component group before moving on
-    return FocusTraversalGroup(
-      child: Card(
+    return Card(
      margin: EdgeInsets.zero,
      elevation: 0,
      color: Theme.of(context).colorScheme.surfaceVariant.withOpacity(0.3),
@@ -2298,7 +2269,6 @@ class ComponentGroupDecoration extends StatelessWidget {
          ),
        ),
      ),
-      ),
    );
  }
 }
--- a/experimental/material_3_demo/lib/main.dart
+++ b/experimental/material_3_demo/lib/main.dart
@@ -12,16 +12,23 @@ import 'typography_screen.dart';

 void main() {
  runApp(
-    const Material3Demo(),
+    const MaterialApp(
+      debugShowCheckedModeBanner: false,
+      home: Material3Demo(),
+    ),
  );
 }

-// NavigationRail shows if the screen width is greater or equal to
-// narrowScreenWidthThreshold; otherwise, NavigationBar is used for navigation.
-const double narrowScreenWidthThreshold = 450;
+class Material3Demo extends StatefulWidget {
+  const Material3Demo({super.key});

-const double mediumWidthBreakpoint = 1000;
-const double largeWidthBreakpoint = 5000;
+  @override
+  State<Material3Demo> createState() => _Material3DemoState();
+}
+
+// NavigationRail shows if the screen width is greater or equal to
+// screenWidthThreshold; otherwise, NavigationBar is used for navigation.
+const double narrowScreenWidthThreshold = 450;

 const double transitionLength = 500;

@@ -51,13 +58,6 @@ enum ScreenSelected {
  final int value;
 }

-class Material3Demo extends StatefulWidget {
-  const Material3Demo({super.key});
-
-  @override
-  State<Material3Demo> createState() => _Material3DemoState();
-}
-
 class _Material3DemoState extends State<Material3Demo>
    with SingleTickerProviderStateMixin {
  final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
@@ -109,8 +109,8 @@ class _Material3DemoState extends State<Material3Demo>

    final double width = MediaQuery.of(context).size.width;
    final AnimationStatus status = controller.status;
-    if (width > mediumWidthBreakpoint) {
-      if (width > largeWidthBreakpoint) {
+    if (width > 1000) {
+      if (width > 1500) {
        showMediumSizeLayout = false;
        showLargeSizeLayout = true;
      } else {
@@ -131,7 +131,7 @@ class _Material3DemoState extends State<Material3Demo>
    }
    if (!controllerInitialized) {
      controllerInitialized = true;
-      controller.value = width > mediumWidthBreakpoint ? 1 : 0;
+      controller.value = width > 1000 ? 1 : 0;
    }
  }

@@ -710,7 +710,7 @@ class _OneTwoTransitionState extends State<OneTwoTransition> {

    widthAnimation = Tween<double>(
      begin: 0,
-      end: mediumWidthBreakpoint,
+      end: 1000,
    ).animate(SizeAnimation(widget.animation));
  }

@@ -719,7 +719,7 @@ class _OneTwoTransitionState extends State<OneTwoTransition> {
    return Row(
      children: <Widget>[
        Flexible(
-          flex: mediumWidthBreakpoint.toInt(),
+          flex: 1000,
          child: widget.one,
        ),
        if (widthAnimation.value.toInt() > 0) ...[
--- a/material_3_demo/lib/component_screen.dart
+++ b/material_3_demo/lib/component_screen.dart
@@ -26,9 +26,7 @@ class FirstComponentList extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    // Fully traverse this list before moving on.
-    return FocusTraversalGroup(
-      child: ListView(
+    return ListView(
      padding: showSecondList
          ? const EdgeInsetsDirectional.only(end: smallSpacing)
          : EdgeInsets.zero,
@@ -47,7 +45,6 @@ class FirstComponentList extends StatelessWidget {
          const TextInputs()
        ],
      ],
-      ),
    );
  }
 }
@@ -62,9 +59,7 @@ class SecondComponentList extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    // Fully traverse this list before moving on.
-    return FocusTraversalGroup(
-      child: ListView(
+    return ListView(
      padding: const EdgeInsetsDirectional.only(end: smallSpacing),
      children: <Widget>[
        Navigation(scaffoldKey: scaffoldKey),
@@ -73,7 +68,6 @@ class SecondComponentList extends StatelessWidget {
        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,10 +1042,8 @@ class _NavigationBarsState extends State<NavigationBars> {

  @override
  Widget build(BuildContext context) {
-    // App NavigationBar should get first focus.
-    Widget navigationBar = Focus(
-      autofocus: !widget.isBadgeExample,
-      child: NavigationBar(
+    bool isBadgeExample = widget.isBadgeExample ?? false;
+    Widget navigationBar = NavigationBar(
      selectedIndex: selectedIndex,
      onDestinationSelected: (index) {
        setState(() {
@@ -1059,15 +1051,14 @@ class _NavigationBarsState extends State<NavigationBars> {
        });
        if (!widget.isExampleBar) widget.onSelectItem!(index);
      },
-        destinations: widget.isExampleBar && widget.isBadgeExample
+      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,16 +2222,6 @@ 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(
@@ -2256,11 +2233,7 @@ class _ComponentDecorationState extends State<ComponentDecoration> {
                child: Padding(
                  padding: const EdgeInsets.symmetric(
                      horizontal: 5.0, vertical: 20.0),
-                      child: Center(
-                        child: widget.child,
-                      ),
-                    ),
-                  ),
+                  child: Center(child: child),
                ),
              ),
            ),
@@ -2280,9 +2253,7 @@ class ComponentGroupDecoration extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    // Fully traverse this component group before moving on
-    return FocusTraversalGroup(
-      child: Card(
+    return Card(
      margin: EdgeInsets.zero,
      elevation: 0,
      color: Theme.of(context).colorScheme.surfaceVariant.withOpacity(0.3),
@@ -2298,7 +2269,6 @@ class ComponentGroupDecoration extends StatelessWidget {
          ),
        ),
      ),
-      ),
    );
  }
 }
--- a/material_3_demo/lib/main.dart
+++ b/material_3_demo/lib/main.dart
@@ -12,16 +12,23 @@ import 'typography_screen.dart';

 void main() {
  runApp(
-    const Material3Demo(),
+    const MaterialApp(
+      debugShowCheckedModeBanner: false,
+      home: Material3Demo(),
+    ),
  );
 }

-// NavigationRail shows if the screen width is greater or equal to
-// narrowScreenWidthThreshold; otherwise, NavigationBar is used for navigation.
-const double narrowScreenWidthThreshold = 450;
+class Material3Demo extends StatefulWidget {
+  const Material3Demo({super.key});

-const double mediumWidthBreakpoint = 1000;
-const double largeWidthBreakpoint = 5000;
+  @override
+  State<Material3Demo> createState() => _Material3DemoState();
+}
+
+// NavigationRail shows if the screen width is greater or equal to
+// screenWidthThreshold; otherwise, NavigationBar is used for navigation.
+const double narrowScreenWidthThreshold = 450;

 const double transitionLength = 500;

@@ -51,13 +58,6 @@ enum ScreenSelected {
  final int value;
 }

-class Material3Demo extends StatefulWidget {
-  const Material3Demo({super.key});
-
-  @override
-  State<Material3Demo> createState() => _Material3DemoState();
-}
-
 class _Material3DemoState extends State<Material3Demo>
    with SingleTickerProviderStateMixin {
  final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
@@ -109,8 +109,8 @@ class _Material3DemoState extends State<Material3Demo>

    final double width = MediaQuery.of(context).size.width;
    final AnimationStatus status = controller.status;
-    if (width > mediumWidthBreakpoint) {
-      if (width > largeWidthBreakpoint) {
+    if (width > 1000) {
+      if (width > 1500) {
        showMediumSizeLayout = false;
        showLargeSizeLayout = true;
      } else {
@@ -131,7 +131,7 @@ class _Material3DemoState extends State<Material3Demo>
    }
    if (!controllerInitialized) {
      controllerInitialized = true;
-      controller.value = width > mediumWidthBreakpoint ? 1 : 0;
+      controller.value = width > 1000 ? 1 : 0;
    }
  }

@@ -710,7 +710,7 @@ class _OneTwoTransitionState extends State<OneTwoTransition> {

    widthAnimation = Tween<double>(
      begin: 0,
-      end: mediumWidthBreakpoint,
+      end: 1000,
    ).animate(SizeAnimation(widget.animation));
  }

@@ -719,7 +719,7 @@ class _OneTwoTransitionState extends State<OneTwoTransition> {
    return Row(
      children: <Widget>[
        Flexible(
-          flex: mediumWidthBreakpoint.toInt(),
+          flex: 1000,
          child: widget.one,
        ),
        if (widthAnimation.value.toInt() > 0) ...[