msb-public
/
samples
mirror of https://github.com/flutter/samples.git
1
0
Code Issues Projects Releases Wiki Activity

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

Browse Source 
This reverts commit 6207e34192.
pull/1645/head
Brett Morgan 2 years ago committed by GitHub
parent 6207e34192
commit e1f3fb020e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 180 additions and 240 deletions
Show Stats Download Patch File Download Diff File

64
experimental/material_3_demo/lib/component_screen.dart
Unescape View File

@ -26,9 +26,7 @@ class FirstComponentList extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
// Fully traverse this list before moving on. return ListView(
return FocusTraversalGroup(
child: ListView(
padding: showSecondList padding: showSecondList
? const EdgeInsetsDirectional.only(end: smallSpacing) ? const EdgeInsetsDirectional.only(end: smallSpacing)
: EdgeInsets.zero, : EdgeInsets.zero,
@ -47,7 +45,6 @@ class FirstComponentList extends StatelessWidget {
const TextInputs() const TextInputs()
], ],
], ],
),
); );
} }
} }
@ -62,9 +59,7 @@ class SecondComponentList extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
// Fully traverse this list before moving on. return ListView(
return FocusTraversalGroup(
child: ListView(
padding: const EdgeInsetsDirectional.only(end: smallSpacing), padding: const EdgeInsetsDirectional.only(end: smallSpacing),
children: <Widget>[ children: <Widget>[
Navigation(scaffoldKey: scaffoldKey), Navigation(scaffoldKey: scaffoldKey),
@ -73,7 +68,6 @@ class SecondComponentList extends StatelessWidget {
colDivider, colDivider,
const TextInputs(), const TextInputs(),
], ],
),
); );
} }
} }
@ -1017,13 +1011,13 @@ class NavigationBars extends StatefulWidget {
this.onSelectItem, this.onSelectItem,
required this.selectedIndex, required this.selectedIndex,
required this.isExampleBar, required this.isExampleBar,
this.isBadgeExample = false, this.isBadgeExample,
}); });
final void Function(int)? onSelectItem; final void Function(int)? onSelectItem;
final int selectedIndex; final int selectedIndex;
final bool isExampleBar; final bool isExampleBar;
final bool isBadgeExample; final bool? isBadgeExample;
@override @override
State<NavigationBars> createState() => _NavigationBarsState(); State<NavigationBars> createState() => _NavigationBarsState();
@ -1048,10 +1042,8 @@ class _NavigationBarsState extends State<NavigationBars> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
// App NavigationBar should get first focus. bool isBadgeExample = widget.isBadgeExample ?? false;
Widget navigationBar = Focus( Widget navigationBar = NavigationBar(
autofocus: !widget.isBadgeExample,
child: NavigationBar(
selectedIndex: selectedIndex, selectedIndex: selectedIndex,
onDestinationSelected: (index) { onDestinationSelected: (index) {
setState(() { setState(() {
@ -1059,15 +1051,14 @@ class _NavigationBarsState extends State<NavigationBars> {
}); });
if (!widget.isExampleBar) widget.onSelectItem!(index); if (!widget.isExampleBar) widget.onSelectItem!(index);
}, },
destinations: widget.isExampleBar && widget.isBadgeExample destinations: widget.isExampleBar && isBadgeExample
? barWithBadgeDestinations ? barWithBadgeDestinations
: widget.isExampleBar : widget.isExampleBar
? exampleBarDestinations ? exampleBarDestinations
: appBarDestinations, : appBarDestinations,
),
); );
if (widget.isExampleBar && widget.isBadgeExample) { if (widget.isExampleBar && isBadgeExample) {
navigationBar = ComponentDecoration( navigationBar = ComponentDecoration(
label: 'Badges', label: 'Badges',
tooltipMessage: 'Use Badge or Badge.count', tooltipMessage: 'Use Badge or Badge.count',
@ -1562,6 +1553,8 @@ class _BottomSheetSectionState extends State<BottomSheetSection> {
onPressed: () { onPressed: () {
showModalBottomSheet<void>( showModalBottomSheet<void>(
context: context, context: context,
// TODO: Remove when this is in the framework https://github.com/flutter/flutter/issues/118619
constraints: const BoxConstraints(maxWidth: 640),
builder: (context) { builder: (context) {
return SizedBox( return SizedBox(
height: 150, height: 150,
@ -1601,6 +1594,8 @@ class _BottomSheetSectionState extends State<BottomSheetSection> {
_nonModalBottomSheetController = showBottomSheet<void>( _nonModalBottomSheetController = showBottomSheet<void>(
elevation: 8.0, elevation: 8.0,
context: context, context: context,
// TODO: Remove when this is in the framework https://github.com/flutter/flutter/issues/118619
constraints: const BoxConstraints(maxWidth: 640),
builder: (context) { builder: (context) {
return SizedBox( return SizedBox(
height: 150, height: 150,
@ -2193,7 +2188,7 @@ class _SlidersState extends State<Sliders> {
} }
} }
class ComponentDecoration extends StatefulWidget { class ComponentDecoration extends StatelessWidget {
const ComponentDecoration({ const ComponentDecoration({
super.key, super.key,
required this.label, required this.label,
@ -2205,13 +2200,6 @@ class ComponentDecoration extends StatefulWidget {
final Widget child; final Widget child;
final String? tooltipMessage; final String? tooltipMessage;
@override
State<ComponentDecoration> createState() => _ComponentDecorationState();
}
class _ComponentDecorationState extends State<ComponentDecoration> {
final focusNode = FocusNode();
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return RepaintBoundary( return RepaintBoundary(
@ -2222,10 +2210,9 @@ class _ComponentDecorationState extends State<ComponentDecoration> {
Row( Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Text(widget.label, Text(label, style: Theme.of(context).textTheme.titleSmall),
style: Theme.of(context).textTheme.titleSmall),
Tooltip( Tooltip(
message: widget.tooltipMessage, message: tooltipMessage,
child: const Padding( child: const Padding(
padding: EdgeInsets.symmetric(horizontal: 5.0), padding: EdgeInsets.symmetric(horizontal: 5.0),
child: Icon(Icons.info_outline, size: 16)), child: Icon(Icons.info_outline, size: 16)),
@ -2235,16 +2222,6 @@ class _ComponentDecorationState extends State<ComponentDecoration> {
ConstrainedBox( ConstrainedBox(
constraints: constraints:
const BoxConstraints.tightFor(width: widthConstraint), 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( child: Card(
elevation: 0, elevation: 0,
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
@ -2256,11 +2233,7 @@ class _ComponentDecorationState extends State<ComponentDecoration> {
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: 5.0, vertical: 20.0), horizontal: 5.0, vertical: 20.0),
child: Center( child: Center(child: child),
child: widget.child,
),
),
),
), ),
), ),
), ),
@ -2280,9 +2253,7 @@ class ComponentGroupDecoration extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
// Fully traverse this component group before moving on return Card(
return FocusTraversalGroup(
child: Card(
margin: EdgeInsets.zero, margin: EdgeInsets.zero,
elevation: 0, elevation: 0,
color: Theme.of(context).colorScheme.surfaceVariant.withOpacity(0.3), color: Theme.of(context).colorScheme.surfaceVariant.withOpacity(0.3),
@ -2298,7 +2269,6 @@ class ComponentGroupDecoration extends StatelessWidget {
), ),
), ),
), ),
),
); );
} }
} }

34
experimental/material_3_demo/lib/main.dart
Unescape View File

@ -12,17 +12,24 @@ import 'typography_screen.dart';
void main() { void main() {
runApp( runApp(
const Material3Demo(), const MaterialApp(
debugShowCheckedModeBanner: false,
home: Material3Demo(),
),
); );
} }
class Material3Demo extends StatefulWidget {
const Material3Demo({super.key});
@override
State<Material3Demo> createState() => _Material3DemoState();
}
// NavigationRail shows if the screen width is greater or equal to // 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 narrowScreenWidthThreshold = 450;
const double mediumWidthBreakpoint = 1000;
const double largeWidthBreakpoint = 5000;
const double transitionLength = 500; const double transitionLength = 500;
enum ColorSeed { enum ColorSeed {
@ -51,13 +58,6 @@ enum ScreenSelected {
final int value; final int value;
} }
class Material3Demo extends StatefulWidget {
const Material3Demo({super.key});
@override
State<Material3Demo> createState() => _Material3DemoState();
}
class _Material3DemoState extends State<Material3Demo> class _Material3DemoState extends State<Material3Demo>
with SingleTickerProviderStateMixin { with SingleTickerProviderStateMixin {
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>(); final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
@ -109,8 +109,8 @@ class _Material3DemoState extends State<Material3Demo>
final double width = MediaQuery.of(context).size.width; final double width = MediaQuery.of(context).size.width;
final AnimationStatus status = controller.status; final AnimationStatus status = controller.status;
if (width > mediumWidthBreakpoint) { if (width > 1000) {
if (width > largeWidthBreakpoint) { if (width > 1500) {
showMediumSizeLayout = false; showMediumSizeLayout = false;
showLargeSizeLayout = true; showLargeSizeLayout = true;
} else { } else {
@ -131,7 +131,7 @@ class _Material3DemoState extends State<Material3Demo>
} }
if (!controllerInitialized) { if (!controllerInitialized) {
controllerInitialized = true; 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>( widthAnimation = Tween<double>(
begin: 0, begin: 0,
end: mediumWidthBreakpoint, end: 1000,
).animate(SizeAnimation(widget.animation)); ).animate(SizeAnimation(widget.animation));
} }
@ -719,7 +719,7 @@ class _OneTwoTransitionState extends State<OneTwoTransition> {
return Row( return Row(
children: <Widget>[ children: <Widget>[
Flexible( Flexible(
flex: mediumWidthBreakpoint.toInt(), flex: 1000,
child: widget.one, child: widget.one,
), ),
if (widthAnimation.value.toInt() > 0) ...[ if (widthAnimation.value.toInt() > 0) ...[

64
material_3_demo/lib/component_screen.dart
Unescape View File

@ -26,9 +26,7 @@ class FirstComponentList extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
// Fully traverse this list before moving on. return ListView(
return FocusTraversalGroup(
child: ListView(
padding: showSecondList padding: showSecondList
? const EdgeInsetsDirectional.only(end: smallSpacing) ? const EdgeInsetsDirectional.only(end: smallSpacing)
: EdgeInsets.zero, : EdgeInsets.zero,
@ -47,7 +45,6 @@ class FirstComponentList extends StatelessWidget {
const TextInputs() const TextInputs()
], ],
], ],
),
); );
} }
} }
@ -62,9 +59,7 @@ class SecondComponentList extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
// Fully traverse this list before moving on. return ListView(
return FocusTraversalGroup(
child: ListView(
padding: const EdgeInsetsDirectional.only(end: smallSpacing), padding: const EdgeInsetsDirectional.only(end: smallSpacing),
children: <Widget>[ children: <Widget>[
Navigation(scaffoldKey: scaffoldKey), Navigation(scaffoldKey: scaffoldKey),
@ -73,7 +68,6 @@ class SecondComponentList extends StatelessWidget {
colDivider, colDivider,
const TextInputs(), const TextInputs(),
], ],
),
); );
} }
} }
@ -1017,13 +1011,13 @@ class NavigationBars extends StatefulWidget {
this.onSelectItem, this.onSelectItem,
required this.selectedIndex, required this.selectedIndex,
required this.isExampleBar, required this.isExampleBar,
this.isBadgeExample = false, this.isBadgeExample,
}); });
final void Function(int)? onSelectItem; final void Function(int)? onSelectItem;
final int selectedIndex; final int selectedIndex;
final bool isExampleBar; final bool isExampleBar;
final bool isBadgeExample; final bool? isBadgeExample;
@override @override
State<NavigationBars> createState() => _NavigationBarsState(); State<NavigationBars> createState() => _NavigationBarsState();
@ -1048,10 +1042,8 @@ class _NavigationBarsState extends State<NavigationBars> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
// App NavigationBar should get first focus. bool isBadgeExample = widget.isBadgeExample ?? false;
Widget navigationBar = Focus( Widget navigationBar = NavigationBar(
autofocus: !widget.isBadgeExample,
child: NavigationBar(
selectedIndex: selectedIndex, selectedIndex: selectedIndex,
onDestinationSelected: (index) { onDestinationSelected: (index) {
setState(() { setState(() {
@ -1059,15 +1051,14 @@ class _NavigationBarsState extends State<NavigationBars> {
}); });
if (!widget.isExampleBar) widget.onSelectItem!(index); if (!widget.isExampleBar) widget.onSelectItem!(index);
}, },
destinations: widget.isExampleBar && widget.isBadgeExample destinations: widget.isExampleBar && isBadgeExample
? barWithBadgeDestinations ? barWithBadgeDestinations
: widget.isExampleBar : widget.isExampleBar
? exampleBarDestinations ? exampleBarDestinations
: appBarDestinations, : appBarDestinations,
),
); );
if (widget.isExampleBar && widget.isBadgeExample) { if (widget.isExampleBar && isBadgeExample) {
navigationBar = ComponentDecoration( navigationBar = ComponentDecoration(
label: 'Badges', label: 'Badges',
tooltipMessage: 'Use Badge or Badge.count', tooltipMessage: 'Use Badge or Badge.count',
@ -1562,6 +1553,8 @@ class _BottomSheetSectionState extends State<BottomSheetSection> {
onPressed: () { onPressed: () {
showModalBottomSheet<void>( showModalBottomSheet<void>(
context: context, context: context,
// TODO: Remove when this is in the framework https://github.com/flutter/flutter/issues/118619
constraints: const BoxConstraints(maxWidth: 640),
builder: (context) { builder: (context) {
return SizedBox( return SizedBox(
height: 150, height: 150,
@ -1601,6 +1594,8 @@ class _BottomSheetSectionState extends State<BottomSheetSection> {
_nonModalBottomSheetController = showBottomSheet<void>( _nonModalBottomSheetController = showBottomSheet<void>(
elevation: 8.0, elevation: 8.0,
context: context, context: context,
// TODO: Remove when this is in the framework https://github.com/flutter/flutter/issues/118619
constraints: const BoxConstraints(maxWidth: 640),
builder: (context) { builder: (context) {
return SizedBox( return SizedBox(
height: 150, height: 150,
@ -2193,7 +2188,7 @@ class _SlidersState extends State<Sliders> {
} }
} }
class ComponentDecoration extends StatefulWidget { class ComponentDecoration extends StatelessWidget {
const ComponentDecoration({ const ComponentDecoration({
super.key, super.key,
required this.label, required this.label,
@ -2205,13 +2200,6 @@ class ComponentDecoration extends StatefulWidget {
final Widget child; final Widget child;
final String? tooltipMessage; final String? tooltipMessage;
@override
State<ComponentDecoration> createState() => _ComponentDecorationState();
}
class _ComponentDecorationState extends State<ComponentDecoration> {
final focusNode = FocusNode();
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return RepaintBoundary( return RepaintBoundary(
@ -2222,10 +2210,9 @@ class _ComponentDecorationState extends State<ComponentDecoration> {
Row( Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Text(widget.label, Text(label, style: Theme.of(context).textTheme.titleSmall),
style: Theme.of(context).textTheme.titleSmall),
Tooltip( Tooltip(
message: widget.tooltipMessage, message: tooltipMessage,
child: const Padding( child: const Padding(
padding: EdgeInsets.symmetric(horizontal: 5.0), padding: EdgeInsets.symmetric(horizontal: 5.0),
child: Icon(Icons.info_outline, size: 16)), child: Icon(Icons.info_outline, size: 16)),
@ -2235,16 +2222,6 @@ class _ComponentDecorationState extends State<ComponentDecoration> {
ConstrainedBox( ConstrainedBox(
constraints: constraints:
const BoxConstraints.tightFor(width: widthConstraint), 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( child: Card(
elevation: 0, elevation: 0,
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
@ -2256,11 +2233,7 @@ class _ComponentDecorationState extends State<ComponentDecoration> {
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: 5.0, vertical: 20.0), horizontal: 5.0, vertical: 20.0),
child: Center( child: Center(child: child),
child: widget.child,
),
),
),
), ),
), ),
), ),
@ -2280,9 +2253,7 @@ class ComponentGroupDecoration extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
// Fully traverse this component group before moving on return Card(
return FocusTraversalGroup(
child: Card(
margin: EdgeInsets.zero, margin: EdgeInsets.zero,
elevation: 0, elevation: 0,
color: Theme.of(context).colorScheme.surfaceVariant.withOpacity(0.3), color: Theme.of(context).colorScheme.surfaceVariant.withOpacity(0.3),
@ -2298,7 +2269,6 @@ class ComponentGroupDecoration extends StatelessWidget {
), ),
), ),
), ),
),
); );
} }
} }

34
material_3_demo/lib/main.dart
Unescape View File

@ -12,17 +12,24 @@ import 'typography_screen.dart';
void main() { void main() {
runApp( runApp(
const Material3Demo(), const MaterialApp(
debugShowCheckedModeBanner: false,
home: Material3Demo(),
),
); );
} }
class Material3Demo extends StatefulWidget {
const Material3Demo({super.key});
@override
State<Material3Demo> createState() => _Material3DemoState();
}
// NavigationRail shows if the screen width is greater or equal to // 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 narrowScreenWidthThreshold = 450;
const double mediumWidthBreakpoint = 1000;
const double largeWidthBreakpoint = 5000;
const double transitionLength = 500; const double transitionLength = 500;
enum ColorSeed { enum ColorSeed {
@ -51,13 +58,6 @@ enum ScreenSelected {
final int value; final int value;
} }
class Material3Demo extends StatefulWidget {
const Material3Demo({super.key});
@override
State<Material3Demo> createState() => _Material3DemoState();
}
class _Material3DemoState extends State<Material3Demo> class _Material3DemoState extends State<Material3Demo>
with SingleTickerProviderStateMixin { with SingleTickerProviderStateMixin {
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>(); final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
@ -109,8 +109,8 @@ class _Material3DemoState extends State<Material3Demo>
final double width = MediaQuery.of(context).size.width; final double width = MediaQuery.of(context).size.width;
final AnimationStatus status = controller.status; final AnimationStatus status = controller.status;
if (width > mediumWidthBreakpoint) { if (width > 1000) {
if (width > largeWidthBreakpoint) { if (width > 1500) {
showMediumSizeLayout = false; showMediumSizeLayout = false;
showLargeSizeLayout = true; showLargeSizeLayout = true;
} else { } else {
@ -131,7 +131,7 @@ class _Material3DemoState extends State<Material3Demo>
} }
if (!controllerInitialized) { if (!controllerInitialized) {
controllerInitialized = true; 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>( widthAnimation = Tween<double>(
begin: 0, begin: 0,
end: mediumWidthBreakpoint, end: 1000,
).animate(SizeAnimation(widget.animation)); ).animate(SizeAnimation(widget.animation));
} }
@ -719,7 +719,7 @@ class _OneTwoTransitionState extends State<OneTwoTransition> {
return Row( return Row(
children: <Widget>[ children: <Widget>[
Flexible( Flexible(
flex: mediumWidthBreakpoint.toInt(), flex: 1000,
child: widget.one, child: widget.one,
), ),
if (widthAnimation.value.toInt() > 0) ...[ if (widthAnimation.value.toInt() > 0) ...[

Write Preview
Loading…
Cancel
Save