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
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
],
),
),
),

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

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

176
material_3_demo/lib/component_screen.dart
Unescape View File

@ -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
],
),
),
),

34
material_3_demo/lib/main.dart
Unescape View File

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

Write Preview
Loading…
Cancel
Save