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

Symposium of small improvements to m3 app (#1573)

Browse Source 
* small improvements

* x

* fixed tests

* add issue links to TODOs

* address feedback
pull/1580/head
Pierre-Louis 2 years ago committed by GitHub
parent 66a8d9e211
commit af1b13501c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 641 additions and 656 deletions
Show Stats Download Patch File Download Diff File

877
experimental/material_3_demo/lib/component_screen.dart
View File

File diff suppressed because it is too large Load Diff

3
experimental/material_3_demo/lib/elevation_screen.dart
Unescape View File

@ -125,7 +125,6 @@ class _ElevationCardState extends State<ElevationCard> {
@override
Widget build(BuildContext context) {
const BorderRadius borderRadius = BorderRadius.all(Radius.circular(4.0));
final bool showOpacity = _elevation == widget.info.elevation;
final Color color = Theme.of(context).colorScheme.surface;
return Padding(
@ -150,7 +149,7 @@ class _ElevationCardState extends State<ElevationCard> {
'${widget.info.level.toInt()} dp',
style: Theme.of(context).textTheme.labelMedium,
),
if (showOpacity)
if (widget.surfaceTint != null)
Expanded(
child: Align(
alignment: Alignment.bottomRight,

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

@ -3,14 +3,20 @@
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'color_palettes_screen.dart';
import 'component_screen.dart';
import 'elevation_screen.dart';
import 'typography_screen.dart';
void main() {
runApp(const MaterialApp(
debugShowCheckedModeBanner: false, home: Material3Demo()));
runApp(
const MaterialApp(
debugShowCheckedModeBanner: false,
home: Material3Demo(),
),
);
}
class Material3Demo extends StatefulWidget {
@ -61,17 +67,25 @@ class _Material3DemoState extends State<Material3Demo>
bool showMediumSizeLayout = false;
bool showLargeSizeLayout = false;
bool useMaterial3 = true;
bool useLightMode = true;
ThemeMode themeMode = ThemeMode.system;
bool get useLightMode {
switch (themeMode) {
case ThemeMode.system:
return SchedulerBinding.instance.window.platformBrightness ==
Brightness.light;
case ThemeMode.light:
return true;
case ThemeMode.dark:
return false;
}
}
ColorSeed colorSelected = ColorSeed.baseColor;
int screenIndex = ScreenSelected.component.value;
late ThemeData themeData;
@override
initState() {
super.initState();
themeData = updateThemes(colorSelected.color, useMaterial3, useLightMode);
controller = AnimationController(
duration: Duration(milliseconds: transitionLength.toInt() * 2),
value: 0,
@ -121,38 +135,27 @@ class _Material3DemoState extends State<Material3Demo>
}
}
ThemeData updateThemes(
Color colorSelected, bool useMaterial3, bool useLightMode) {
return ThemeData(
colorSchemeSeed: colorSelected,
useMaterial3: useMaterial3,
brightness: useLightMode ? Brightness.light : Brightness.dark);
}
void handleScreenChanged(int screenSelected) {
setState(() {
screenIndex = screenSelected;
});
}
void handleBrightnessChange() {
void handleBrightnessChange(bool useLightMode) {
setState(() {
useLightMode = !useLightMode;
themeData = updateThemes(colorSelected.color, useMaterial3, useLightMode);
themeMode = useLightMode ? ThemeMode.light : ThemeMode.dark;
});
}
void handleMaterialVersionChange() {
setState(() {
useMaterial3 = !useMaterial3;
themeData = updateThemes(colorSelected.color, useMaterial3, useLightMode);
});
}
void handleColorSelect(int value) {
setState(() {
colorSelected = ColorSeed.values[value];
themeData = updateThemes(colorSelected.color, useMaterial3, useLightMode);
});
}
@ -161,14 +164,17 @@ class _Material3DemoState extends State<Material3Demo>
switch (screenSelected) {
case ScreenSelected.component:
return Expanded(
child: OneTwoTransition(
animation: railAnimation,
one: FirstComponentList(
showNavBottomBar: showNavBarExample,
scaffoldKey: scaffoldKey,
showSecondList:
showMediumSizeLayout || showLargeSizeLayout),
two: const SecondComponentList()));
child: OneTwoTransition(
animation: railAnimation,
one: FirstComponentList(
showNavBottomBar: showNavBarExample,
scaffoldKey: scaffoldKey,
showSecondList: showMediumSizeLayout || showLargeSizeLayout),
two: SecondComponentList(
scaffoldKey: scaffoldKey,
),
),
);
case ScreenSelected.color:
return const ColorPalettesScreen();
case ScreenSelected.typography:
@ -183,68 +189,21 @@ class _Material3DemoState extends State<Material3Demo>
}
}
Widget brightnessButton({bool showTooltipBelow = true}) => Tooltip(
preferBelow: showTooltipBelow,
message: 'Toggle brightness',
child: IconButton(
icon: useLightMode
? const Icon(Icons.wb_sunny_outlined)
: const Icon(Icons.wb_sunny),
onPressed: handleBrightnessChange,
),
);
Widget material3Button({bool showTooltipBelow = true}) => Tooltip(
preferBelow: showTooltipBelow,
message: 'Switch to Material ${useMaterial3 ? 2 : 3}',
child: IconButton(
icon: useMaterial3
? const Icon(Icons.filter_3)
: const Icon(Icons.filter_2),
onPressed: handleMaterialVersionChange,
),
);
Widget colorSeedButton(Icon icon) => PopupMenuButton(
icon: icon,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
itemBuilder: (context) {
return List.generate(ColorSeed.values.length, (index) {
ColorSeed currentColor = ColorSeed.values[index];
return PopupMenuItem(
value: index,
child: Wrap(
children: [
Padding(
padding: const EdgeInsets.only(left: 10),
child: Icon(
currentColor == colorSelected
? Icons.color_lens
: Icons.color_lens_outlined,
color: currentColor.color,
),
),
Padding(
padding: const EdgeInsets.only(left: 20),
child: Text(currentColor.label),
),
],
),
);
});
},
onSelected: handleColorSelect,
);
PreferredSizeWidget createAppBar() {
return AppBar(
title: useMaterial3 ? const Text('Material 3') : const Text('Material 2'),
actions: !showMediumSizeLayout && !showLargeSizeLayout
? [
brightnessButton(),
material3Button(),
colorSeedButton(const Icon(Icons.more_vert)),
_BrightnessButton(
handleBrightnessChange: handleBrightnessChange,
),
_Material3Button(
handleMaterialVersionChange: handleMaterialVersionChange,
),
_ColorSeedButton(
handleColorSelect: handleColorSelect,
colorSelected: colorSelected,
),
]
: [Container()],
);
@ -263,8 +222,8 @@ class _Material3DemoState extends State<Material3Demo>
Expanded(child: Container()),
Switch(
value: useLightMode,
onChanged: (_) {
handleBrightnessChange();
onChanged: (value) {
handleBrightnessChange(value);
})
],
),
@ -289,8 +248,11 @@ class _Material3DemoState extends State<Material3Demo>
children: List.generate(
ColorSeed.values.length,
(i) => IconButton(
icon: const Icon(Icons.circle),
icon: const Icon(Icons.radio_button_unchecked),
color: ColorSeed.values[i].color,
isSelected:
colorSelected.color == ColorSeed.values[i].color,
selectedIcon: const Icon(Icons.circle),
onPressed: () {
handleColorSelect(i);
},
@ -304,9 +266,24 @@ class _Material3DemoState extends State<Material3Demo>
Widget _trailingActions() => Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Flexible(child: brightnessButton(showTooltipBelow: false)),
Flexible(child: material3Button(showTooltipBelow: false)),
Flexible(child: colorSeedButton(const Icon(Icons.more_horiz))),
Flexible(
child: _BrightnessButton(
handleBrightnessChange: handleBrightnessChange,
showTooltipBelow: false,
),
),
Flexible(
child: _Material3Button(
handleMaterialVersionChange: handleMaterialVersionChange,
showTooltipBelow: false,
),
),
Flexible(
child: _ColorSeedButton(
handleColorSelect: handleColorSelect,
colorSelected: colorSelected,
),
),
],
);
@ -315,49 +292,159 @@ class _Material3DemoState extends State<Material3Demo>
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Material 3',
themeMode: useLightMode ? ThemeMode.light : ThemeMode.dark,
theme: themeData,
themeMode: themeMode,
theme: ThemeData(
colorSchemeSeed: colorSelected.color,
useMaterial3: useMaterial3,
brightness: Brightness.light,
),
darkTheme: ThemeData(
colorSchemeSeed: colorSelected.color,
useMaterial3: useMaterial3,
brightness: Brightness.dark,
),
home: AnimatedBuilder(
animation: controller,
builder: (context, child) {
return NavigationTransition(
scaffoldKey: scaffoldKey,
animationController: controller,
railAnimation: railAnimation,
appBar: createAppBar(),
body: createScreenFor(
ScreenSelected.values[screenIndex], controller.value == 1),
navigationRail: NavigationRail(
extended: showLargeSizeLayout,
destinations: navRailDestinations,
selectedIndex: screenIndex,
onDestinationSelected: (index) {
setState(() {
screenIndex = index;
handleScreenChanged(screenIndex);
});
},
trailing: Expanded(
child: Padding(
padding: const EdgeInsets.only(bottom: 20),
child: showLargeSizeLayout
? _expandedTrailingActions()
: _trailingActions(),
),
animation: controller,
builder: (context, child) {
return NavigationTransition(
scaffoldKey: scaffoldKey,
animationController: controller,
railAnimation: railAnimation,
appBar: createAppBar(),
body: createScreenFor(
ScreenSelected.values[screenIndex], controller.value == 1),
navigationRail: NavigationRail(
extended: showLargeSizeLayout,
destinations: navRailDestinations,
selectedIndex: screenIndex,
onDestinationSelected: (index) {
setState(() {
screenIndex = index;
handleScreenChanged(screenIndex);
});
},
trailing: Expanded(
child: Padding(
padding: const EdgeInsets.only(bottom: 20),
child: showLargeSizeLayout
? _expandedTrailingActions()
: _trailingActions(),
),
),
navigationBar: NavigationBars(
onSelectItem: (index) {
setState(() {
screenIndex = index;
handleScreenChanged(screenIndex);
});
},
selectedIndex: screenIndex,
isExampleBar: false,
),
);
}),
),
navigationBar: NavigationBars(
onSelectItem: (index) {
setState(() {
screenIndex = index;
handleScreenChanged(screenIndex);
});
},
selectedIndex: screenIndex,
isExampleBar: false,
),
);
},
),
);
}
}
class _BrightnessButton extends StatelessWidget {
const _BrightnessButton({
required this.handleBrightnessChange,
this.showTooltipBelow = true,
});
final Function handleBrightnessChange;
final bool showTooltipBelow;
@override
Widget build(BuildContext context) {
final isBright = Theme.of(context).brightness == Brightness.light;
return Tooltip(
preferBelow: showTooltipBelow,
message: 'Toggle brightness',
child: IconButton(
icon: isBright
? const Icon(Icons.dark_mode_outlined)
: const Icon(Icons.light_mode_outlined),
onPressed: () => handleBrightnessChange(!isBright),
),
);
}
}
class _Material3Button extends StatelessWidget {
const _Material3Button({
required this.handleMaterialVersionChange,
this.showTooltipBelow = true,
});
final void Function() handleMaterialVersionChange;
final bool showTooltipBelow;
@override
Widget build(BuildContext context) {
final useMaterial3 = Theme.of(context).useMaterial3;
return Tooltip(
preferBelow: showTooltipBelow,
message: 'Switch to Material ${useMaterial3 ? 2 : 3}',
child: IconButton(
icon: useMaterial3
? const Icon(Icons.filter_2)
: const Icon(Icons.filter_3),
onPressed: handleMaterialVersionChange,
),
);
}
}
class _ColorSeedButton extends StatelessWidget {
const _ColorSeedButton({
required this.handleColorSelect,
required this.colorSelected,
});
final void Function(int) handleColorSelect;
final ColorSeed colorSelected;
@override
Widget build(BuildContext context) {
return PopupMenuButton(
icon: Icon(
Icons.palette_outlined,
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
tooltip: 'Select a seed color',
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
itemBuilder: (context) {
return List.generate(ColorSeed.values.length, (index) {
ColorSeed currentColor = ColorSeed.values[index];
return PopupMenuItem(
value: index,
enabled: currentColor != colorSelected,
child: Wrap(
children: [
Padding(
padding: const EdgeInsets.only(left: 10),
child: Icon(
currentColor == colorSelected
? Icons.color_lens
: Icons.color_lens_outlined,
color: currentColor.color,
),
),
Padding(
padding: const EdgeInsets.only(left: 20),
child: Text(currentColor.label),
),
],
),
);
});
},
onSelected: handleColorSelect,
);
}
}
@ -421,9 +508,6 @@ class _NavigationTransitionState extends State<NavigationTransition> {
backgroundColor: colorScheme.surface,
child: widget.navigationRail,
),
railAnimation.isDismissed
? const SizedBox()
: const VerticalDivider(width: 1),
widget.body,
],
),

65
experimental/material_3_demo/test/component_screen_test.dart
Unescape View File

@ -16,15 +16,15 @@ void main() {
// Elements on the app bar
expect(find.text('Material 3'), findsOneWidget);
expect(
find.widgetWithIcon(AppBar, Icons.wb_sunny_outlined), findsOneWidget);
expect(find.widgetWithIcon(AppBar, Icons.filter_3), findsOneWidget);
expect(find.widgetWithIcon(AppBar, Icons.more_vert), findsOneWidget);
find.widgetWithIcon(AppBar, Icons.dark_mode_outlined), findsOneWidget);
expect(find.widgetWithIcon(AppBar, Icons.filter_2), findsOneWidget);
expect(find.widgetWithIcon(AppBar, Icons.palette_outlined), findsOneWidget);
// Elements on the component screen
// Buttons
expect(find.widgetWithText(ElevatedButton, 'Elevated'), findsNWidgets(2));
expect(find.widgetWithText(FilledButton, 'Filled'), findsNWidgets(2));
expect(find.widgetWithText(FilledButton, 'Filled Tonal'), findsNWidgets(2));
expect(find.widgetWithText(FilledButton, 'Filled tonal'), findsNWidgets(2));
expect(find.widgetWithText(OutlinedButton, 'Outlined'), findsNWidgets(2));
expect(find.widgetWithText(TextButton, 'Text'), findsNWidgets(2));
expect(find.widgetWithText(Buttons, 'Icon'), findsNWidgets(5));
@ -34,14 +34,14 @@ void main() {
// FABs
expect(find.byType(FloatingActionButton),
findsNWidgets(6)); // 2 more shows up in the bottom app bar.
findsNWidgets(5)); // 2 more shows up in the bottom app bar.
expect(find.widgetWithText(FloatingActionButton, 'Create'), findsOneWidget);
// Chips
expect(find.byType(ActionChip),
findsNWidgets(7)); // includes Assist and Suggestion chip.
expect(find.byType(FilterChip), findsNWidgets(3));
expect(find.byType(InputChip), findsNWidgets(4));
findsNWidgets(4)); // includes Assist and Suggestion chip.
expect(find.byType(FilterChip), findsNWidgets(2));
expect(find.byType(InputChip), findsNWidgets(2));
// Cards
expect(find.widgetWithText(Cards, 'Elevated'), findsOneWidget);
@ -54,7 +54,7 @@ void main() {
expect(find.widgetWithText(TextField, 'Outlined'), findsNWidgets(2));
// Alert Dialog
Finder dialogExample = find.widgetWithText(TextButton, 'Open Dialog');
Finder dialogExample = find.widgetWithText(TextButton, 'Show dialog');
expect(dialogExample, findsOneWidget);
// Switches
@ -62,12 +62,13 @@ void main() {
expect(switchExample, findsNWidgets(4));
// Checkboxes
Finder checkboxExample = find.byType(Checkbox);
expect(checkboxExample, findsNWidgets(8));
Finder checkboxExample = find.byType(CheckboxListTile);
expect(checkboxExample, findsNWidgets(4));
// Radios
Finder radioExample = find.byType(Radio<Value>);
expect(radioExample, findsNWidgets(2));
// TODO(guidezpl): Figure out why this isn't working
// Finder radioExample = find.byType(RadioListTile<Value>);
// expect(radioExample, findsNWidgets(4));
// ProgressIndicator
Finder circularProgressIndicator = find.byType(CircularProgressIndicator);
@ -138,17 +139,17 @@ void main() {
tester.firstElement(find.widgetWithText(Card, 'Elevated'));
BuildContext defaultChip =
tester.firstElement(find.widgetWithText(ActionChip, 'Assist'));
Finder dialog = find.text('Open Dialog');
Finder dialog = find.text('Show dialog');
await tester.tap(dialog);
await tester.pumpAndSettle(const Duration(microseconds: 500));
BuildContext defaultAlertDialog = tester.element(find.byType(AlertDialog));
expect(Theme.of(defaultAlertDialog).useMaterial3, true);
Finder dismiss = find.text('Dismiss');
Finder dismiss = find.text('Okay');
await tester.tap(dismiss);
await tester.pumpAndSettle(const Duration(microseconds: 500));
expect(find.widgetWithIcon(AppBar, Icons.filter_3), findsOneWidget);
expect(find.widgetWithIcon(AppBar, Icons.filter_2), findsNothing);
expect(find.widgetWithIcon(AppBar, Icons.filter_2), findsOneWidget);
expect(find.widgetWithIcon(AppBar, Icons.filter_3), findsNothing);
expect(find.text('Material 3'), findsOneWidget);
expect(Theme.of(defaultElevatedButton).useMaterial3, true);
expect(Theme.of(defaultIconButton).useMaterial3, true);
@ -158,7 +159,7 @@ void main() {
Finder appbarM3Icon = find.descendant(
of: find.byType(AppBar),
matching: find.widgetWithIcon(IconButton, Icons.filter_3));
matching: find.widgetWithIcon(IconButton, Icons.filter_2));
await tester.tap(appbarM3Icon);
await tester.pumpAndSettle(const Duration(microseconds: 500));
BuildContext updatedElevatedButton =
@ -170,7 +171,7 @@ void main() {
BuildContext updatedCard = tester.firstElement(find.byType(Card));
BuildContext updatedChip =
tester.firstElement(find.widgetWithText(ActionChip, 'Assist'));
Finder updatedDialog = find.text('Open Dialog');
Finder updatedDialog = find.text('Show dialog');
await tester.tap(updatedDialog);
await tester.pumpAndSettle(const Duration(microseconds: 500));
BuildContext updatedAlertDialog =
@ -180,8 +181,8 @@ void main() {
await tester.tap(updatedDismiss);
await tester.pumpAndSettle(const Duration(microseconds: 500));
expect(find.widgetWithIcon(AppBar, Icons.filter_2), findsOneWidget);
expect(find.widgetWithIcon(AppBar, Icons.filter_3), findsNothing);
expect(find.widgetWithIcon(AppBar, Icons.filter_3), findsOneWidget);
expect(find.widgetWithIcon(AppBar, Icons.filter_2), findsNothing);
expect(find.text('Material 2'), findsOneWidget);
expect(Theme.of(updatedElevatedButton).useMaterial3, false);
expect(Theme.of(updatedIconButton).useMaterial3, false);
@ -194,10 +195,10 @@ void main() {
'Other screens become Material2 mode after changing mode from '
'main screen', (tester) async {
await tester.pumpWidget(const MaterialApp(home: Material3Demo()));
Finder appbarM3Icon = find.descendant(
Finder appbarM2Icon = find.descendant(
of: find.byType(AppBar),
matching: find.widgetWithIcon(IconButton, Icons.filter_3));
await tester.tap(appbarM3Icon);
matching: find.widgetWithIcon(IconButton, Icons.filter_2));
await tester.tap(appbarM2Icon);
Finder secondScreenIcon = find.descendant(
of: find.byType(NavigationBar),
matching: find.widgetWithIcon(
@ -230,27 +231,27 @@ void main() {
await tester.pumpWidget(const MaterialApp(home: Material3Demo()));
Finder lightIcon = find.descendant(
of: find.byType(AppBar),
matching: find.widgetWithIcon(IconButton, Icons.wb_sunny_outlined));
matching: find.widgetWithIcon(IconButton, Icons.light_mode_outlined));
Finder darkIcon = find.descendant(
of: find.byType(AppBar),
matching: find.widgetWithIcon(IconButton, Icons.wb_sunny));
matching: find.widgetWithIcon(IconButton, Icons.dark_mode_outlined));
BuildContext appBar = tester.element(find.byType(AppBar).first);
BuildContext body = tester.firstElement(find.byType(Scaffold).first);
BuildContext navigationRail = tester.element(
find.widgetWithIcon(NavigationRail, Icons.format_paint_outlined));
expect(lightIcon, findsOneWidget);
expect(darkIcon, findsNothing);
expect(darkIcon, findsOneWidget);
expect(lightIcon, findsNothing);
expect(Theme.of(appBar).brightness, Brightness.light);
expect(Theme.of(body).brightness, Brightness.light);
expect(Theme.of(navigationRail).brightness, Brightness.light);
await tester.tap(lightIcon);
await tester.tap(darkIcon);
await tester.pumpAndSettle(const Duration(microseconds: 500));
BuildContext appBar2 = tester.element(find.byType(AppBar).first);
BuildContext body2 = tester.element(find.byType(Scaffold).first);
BuildContext navigationRail2 = tester.element(find.byType(NavigationRail));
expect(lightIcon, findsNothing);
expect(darkIcon, findsOneWidget);
expect(darkIcon, findsNothing);
expect(lightIcon, findsOneWidget);
expect(Theme.of(appBar2).brightness, Brightness.dark);
expect(Theme.of(body2).brightness, Brightness.dark);
expect(Theme.of(navigationRail2).brightness, Brightness.dark);
@ -264,7 +265,7 @@ void main() {
await tester.pump();
Finder menuIcon = find.descendant(
of: find.byType(AppBar),
matching: find.widgetWithIcon(IconButton, Icons.more_vert));
matching: find.widgetWithIcon(IconButton, Icons.palette_outlined));
BuildContext appBar = tester.element(find.byType(AppBar).first);
BuildContext body = tester.element(find.byType(Scaffold).first);
BuildContext navigationRail = tester.element(find.byType(NavigationRail));

Write Preview
Loading…
Cancel
Save