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

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

@ -26,28 +26,25 @@ 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( padding: showSecondList
child: ListView( ? const EdgeInsetsDirectional.only(end: smallSpacing)
padding: showSecondList : EdgeInsets.zero,
? const EdgeInsetsDirectional.only(end: smallSpacing) children: [
: EdgeInsets.zero, const Actions(),
children: [ colDivider,
const Actions(), const Communication(),
colDivider,
const Containment(),
if (!showSecondList) ...[
colDivider, colDivider,
const Communication(), Navigation(scaffoldKey: scaffoldKey),
colDivider, colDivider,
const Containment(), const Selection(),
if (!showSecondList) ...[ colDivider,
colDivider, const TextInputs()
Navigation(scaffoldKey: scaffoldKey),
colDivider,
const Selection(),
colDivider,
const TextInputs()
],
], ],
), ],
); );
} }
} }
@ -62,18 +59,15 @@ 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( padding: const EdgeInsetsDirectional.only(end: smallSpacing),
child: ListView( children: <Widget>[
padding: const EdgeInsetsDirectional.only(end: smallSpacing), Navigation(scaffoldKey: scaffoldKey),
children: <Widget>[ colDivider,
Navigation(scaffoldKey: scaffoldKey), const Selection(),
colDivider, colDivider,
const Selection(), const TextInputs(),
colDivider, ],
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,26 +1042,23 @@ 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, selectedIndex: selectedIndex,
child: NavigationBar( onDestinationSelected: (index) {
selectedIndex: selectedIndex, setState(() {
onDestinationSelected: (index) { selectedIndex = index;
setState(() { });
selectedIndex = index; if (!widget.isExampleBar) widget.onSelectItem!(index);
}); },
if (!widget.isExampleBar) widget.onSelectItem!(index); destinations: widget.isExampleBar && isBadgeExample
}, ? barWithBadgeDestinations
destinations: widget.isExampleBar && widget.isBadgeExample : widget.isExampleBar
? barWithBadgeDestinations ? exampleBarDestinations
: widget.isExampleBar : appBarDestinations,
? exampleBarDestinations
: 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,32 +2222,18 @@ 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 child: Card(
// for that component's children. elevation: 0,
child: Focus( shape: RoundedRectangleBorder(
focusNode: focusNode, side: BorderSide(
canRequestFocus: true, color: Theme.of(context).colorScheme.outlineVariant,
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),
), ),
), ),
), ),
@ -2280,22 +2253,19 @@ 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( margin: EdgeInsets.zero,
child: Card( elevation: 0,
margin: EdgeInsets.zero, color: Theme.of(context).colorScheme.surfaceVariant.withOpacity(0.3),
elevation: 0, child: Padding(
color: Theme.of(context).colorScheme.surfaceVariant.withOpacity(0.3), padding: const EdgeInsets.symmetric(vertical: 20.0),
child: Padding( child: Center(
padding: const EdgeInsets.symmetric(vertical: 20.0), child: Column(
child: Center( children: [
child: Column( Text(label, style: Theme.of(context).textTheme.titleLarge),
children: [ colDivider,
Text(label, style: Theme.of(context).textTheme.titleLarge), ...children
colDivider, ],
...children
],
),
), ),
), ),
), ),

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) ...[

176
material_3_demo/lib/component_screen.dart
Unescape View File

@ -26,28 +26,25 @@ 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( padding: showSecondList
child: ListView( ? const EdgeInsetsDirectional.only(end: smallSpacing)
padding: showSecondList : EdgeInsets.zero,
? const EdgeInsetsDirectional.only(end: smallSpacing) children: [
: EdgeInsets.zero, const Actions(),
children: [ colDivider,
const Actions(), const Communication(),
colDivider,
const Containment(),
if (!showSecondList) ...[
colDivider, colDivider,
const Communication(), Navigation(scaffoldKey: scaffoldKey),
colDivider, colDivider,
const Containment(), const Selection(),
if (!showSecondList) ...[ colDivider,
colDivider, const TextInputs()
Navigation(scaffoldKey: scaffoldKey),
colDivider,
const Selection(),
colDivider,
const TextInputs()
],
], ],
), ],
); );
} }
} }
@ -62,18 +59,15 @@ 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( padding: const EdgeInsetsDirectional.only(end: smallSpacing),
child: ListView( children: <Widget>[
padding: const EdgeInsetsDirectional.only(end: smallSpacing), Navigation(scaffoldKey: scaffoldKey),
children: <Widget>[ colDivider,
Navigation(scaffoldKey: scaffoldKey), const Selection(),
colDivider, colDivider,
const Selection(), const TextInputs(),
colDivider, ],
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,26 +1042,23 @@ 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, selectedIndex: selectedIndex,
child: NavigationBar( onDestinationSelected: (index) {
selectedIndex: selectedIndex, setState(() {
onDestinationSelected: (index) { selectedIndex = index;
setState(() { });
selectedIndex = index; if (!widget.isExampleBar) widget.onSelectItem!(index);
}); },
if (!widget.isExampleBar) widget.onSelectItem!(index); destinations: widget.isExampleBar && isBadgeExample
}, ? barWithBadgeDestinations
destinations: widget.isExampleBar && widget.isBadgeExample : widget.isExampleBar
? barWithBadgeDestinations ? exampleBarDestinations
: widget.isExampleBar : appBarDestinations,
? exampleBarDestinations
: 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,32 +2222,18 @@ 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 child: Card(
// for that component's children. elevation: 0,
child: Focus( shape: RoundedRectangleBorder(
focusNode: focusNode, side: BorderSide(
canRequestFocus: true, color: Theme.of(context).colorScheme.outlineVariant,
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),
), ),
), ),
), ),
@ -2280,22 +2253,19 @@ 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( margin: EdgeInsets.zero,
child: Card( elevation: 0,
margin: EdgeInsets.zero, color: Theme.of(context).colorScheme.surfaceVariant.withOpacity(0.3),
elevation: 0, child: Padding(
color: Theme.of(context).colorScheme.surfaceVariant.withOpacity(0.3), padding: const EdgeInsets.symmetric(vertical: 20.0),
child: Padding( child: Center(
padding: const EdgeInsets.symmetric(vertical: 20.0), child: Column(
child: Center( children: [
child: Column( Text(label, style: Theme.of(context).textTheme.titleLarge),
children: [ colDivider,
Text(label, style: Theme.of(context).textTheme.titleLarge), ...children
colDivider, ],
...children
],
),
), ),
), ),
), ),

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