From e1f3fb020e2647fb50545f84fc6b717086eca73e Mon Sep 17 00:00:00 2001 From: Brett Morgan Date: Wed, 8 Feb 2023 22:39:28 +1000 Subject: [PATCH] Revert "Improvements to M3 demo app (#1630)" (#1643) This reverts commit 6207e341926ee24f1f2233383c9c219fdce56872. --- .../material_3_demo/lib/component_screen.dart | 176 ++++++++---------- experimental/material_3_demo/lib/main.dart | 34 ++-- material_3_demo/lib/component_screen.dart | 176 ++++++++---------- material_3_demo/lib/main.dart | 34 ++-- 4 files changed, 180 insertions(+), 240 deletions(-) diff --git a/experimental/material_3_demo/lib/component_screen.dart b/experimental/material_3_demo/lib/component_screen.dart index f37cc6c55..ff3c8bd01 100644 --- a/experimental/material_3_demo/lib/component_screen.dart +++ b/experimental/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: [ - Navigation(scaffoldKey: scaffoldKey), - colDivider, - const Selection(), - colDivider, - const TextInputs(), - ], - ), + return ListView( + padding: const EdgeInsetsDirectional.only(end: smallSpacing), + children: [ + 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 createState() => _NavigationBarsState(); @@ -1048,26 +1042,23 @@ class _NavigationBarsState extends State { @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 { onPressed: () { showModalBottomSheet( 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 { _nonModalBottomSheetController = showBottomSheet( 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 { } } -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 createState() => _ComponentDecorationState(); -} - -class _ComponentDecorationState extends State { - final focusNode = FocusNode(); - @override Widget build(BuildContext context) { return RepaintBoundary( @@ -2222,10 +2210,9 @@ class _ComponentDecorationState extends State { 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 { 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 + ], ), ), ), diff --git a/experimental/material_3_demo/lib/main.dart b/experimental/material_3_demo/lib/main.dart index 3484b17ff..b36fd8f10 100644 --- a/experimental/material_3_demo/lib/main.dart +++ b/experimental/material_3_demo/lib/main.dart @@ -12,17 +12,24 @@ import 'typography_screen.dart'; void main() { runApp( - const Material3Demo(), + const MaterialApp( + debugShowCheckedModeBanner: false, + home: Material3Demo(), + ), ); } +class Material3Demo extends StatefulWidget { + const Material3Demo({super.key}); + + @override + State createState() => _Material3DemoState(); +} + // NavigationRail shows if the screen width is greater or equal to -// narrowScreenWidthThreshold; otherwise, NavigationBar is used for navigation. +// screenWidthThreshold; otherwise, NavigationBar is used for navigation. const double narrowScreenWidthThreshold = 450; -const double mediumWidthBreakpoint = 1000; -const double largeWidthBreakpoint = 5000; - const double transitionLength = 500; enum ColorSeed { @@ -51,13 +58,6 @@ enum ScreenSelected { final int value; } -class Material3Demo extends StatefulWidget { - const Material3Demo({super.key}); - - @override - State createState() => _Material3DemoState(); -} - class _Material3DemoState extends State with SingleTickerProviderStateMixin { final GlobalKey scaffoldKey = GlobalKey(); @@ -109,8 +109,8 @@ class _Material3DemoState extends State 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 } if (!controllerInitialized) { controllerInitialized = true; - controller.value = width > mediumWidthBreakpoint ? 1 : 0; + controller.value = width > 1000 ? 1 : 0; } } @@ -710,7 +710,7 @@ class _OneTwoTransitionState extends State { widthAnimation = Tween( begin: 0, - end: mediumWidthBreakpoint, + end: 1000, ).animate(SizeAnimation(widget.animation)); } @@ -719,7 +719,7 @@ class _OneTwoTransitionState extends State { return Row( children: [ Flexible( - flex: mediumWidthBreakpoint.toInt(), + flex: 1000, child: widget.one, ), if (widthAnimation.value.toInt() > 0) ...[ diff --git a/material_3_demo/lib/component_screen.dart b/material_3_demo/lib/component_screen.dart index f37cc6c55..ff3c8bd01 100644 --- a/material_3_demo/lib/component_screen.dart +++ b/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: [ - Navigation(scaffoldKey: scaffoldKey), - colDivider, - const Selection(), - colDivider, - const TextInputs(), - ], - ), + return ListView( + padding: const EdgeInsetsDirectional.only(end: smallSpacing), + children: [ + 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 createState() => _NavigationBarsState(); @@ -1048,26 +1042,23 @@ class _NavigationBarsState extends State { @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 { onPressed: () { showModalBottomSheet( 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 { _nonModalBottomSheetController = showBottomSheet( 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 { } } -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 createState() => _ComponentDecorationState(); -} - -class _ComponentDecorationState extends State { - final focusNode = FocusNode(); - @override Widget build(BuildContext context) { return RepaintBoundary( @@ -2222,10 +2210,9 @@ class _ComponentDecorationState extends State { 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 { 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 + ], ), ), ), diff --git a/material_3_demo/lib/main.dart b/material_3_demo/lib/main.dart index 3484b17ff..b36fd8f10 100644 --- a/material_3_demo/lib/main.dart +++ b/material_3_demo/lib/main.dart @@ -12,17 +12,24 @@ import 'typography_screen.dart'; void main() { runApp( - const Material3Demo(), + const MaterialApp( + debugShowCheckedModeBanner: false, + home: Material3Demo(), + ), ); } +class Material3Demo extends StatefulWidget { + const Material3Demo({super.key}); + + @override + State createState() => _Material3DemoState(); +} + // NavigationRail shows if the screen width is greater or equal to -// narrowScreenWidthThreshold; otherwise, NavigationBar is used for navigation. +// screenWidthThreshold; otherwise, NavigationBar is used for navigation. const double narrowScreenWidthThreshold = 450; -const double mediumWidthBreakpoint = 1000; -const double largeWidthBreakpoint = 5000; - const double transitionLength = 500; enum ColorSeed { @@ -51,13 +58,6 @@ enum ScreenSelected { final int value; } -class Material3Demo extends StatefulWidget { - const Material3Demo({super.key}); - - @override - State createState() => _Material3DemoState(); -} - class _Material3DemoState extends State with SingleTickerProviderStateMixin { final GlobalKey scaffoldKey = GlobalKey(); @@ -109,8 +109,8 @@ class _Material3DemoState extends State 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 } if (!controllerInitialized) { controllerInitialized = true; - controller.value = width > mediumWidthBreakpoint ? 1 : 0; + controller.value = width > 1000 ? 1 : 0; } } @@ -710,7 +710,7 @@ class _OneTwoTransitionState extends State { widthAnimation = Tween( begin: 0, - end: mediumWidthBreakpoint, + end: 1000, ).animate(SizeAnimation(widget.animation)); } @@ -719,7 +719,7 @@ class _OneTwoTransitionState extends State { return Row( children: [ Flexible( - flex: mediumWidthBreakpoint.toInt(), + flex: 1000, child: widget.one, ), if (widthAnimation.value.toInt() > 0) ...[