Starter/samples
1
0
Fork 0
mirror of https://github.com/flutter/samples.git synced 2026-04-04 18:51:05 +00:00
Code Issues Releases Wiki Activity

Update Material 3 Demo App (#1530)

Browse Source
This commit is contained in:
Qun Cheng
2022-12-20 10:49:23 -08:00
committed by GitHub
parent 019441374e
commit 405ebafe04
8 changed files with 1885 additions and 580 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
experimental/material_3_demo/test/color_screen_test.dart
View File

@@ -16,17 +16,25 @@ void main() {
'on NavigationBar', (tester) async {
widgetSetup(tester, 449);
addTearDown(tester.binding.window.clearPhysicalSizeTestValue);
await tester.pumpWidget(const Material3Demo());
await tester.pumpWidget(const MaterialApp(home: Material3Demo()));
expect(find.text('Light Theme'), findsNothing);
expect(find.text('Dark Theme'), findsNothing);
expect(find.byType(NavigationBar), findsOneWidget);
Finder colorIconOnBar = find.byIcon(Icons.format_paint_outlined);
Finder colorIconOnBar = find.descendant(
of: find.byType(NavigationBar),
matching: find.widgetWithIcon(
NavigationDestination, Icons.format_paint_outlined));
expect(colorIconOnBar, findsOneWidget);
await tester.tap(colorIconOnBar);
await tester.pumpAndSettle(const Duration(microseconds: 500));
expect(colorIconOnBar, findsNothing);
expect(find.byIcon(Icons.format_paint), findsOneWidget);
Finder selectedColorIconOnBar = find.descendant(
of: find.byType(NavigationBar),
matching:
find.widgetWithIcon(NavigationDestination, Icons.format_paint));
expect(selectedColorIconOnBar, findsOneWidget);
expect(find.text('Light Theme'), findsOneWidget);
expect(find.text('Dark Theme'), findsOneWidget);
});
@@ -34,18 +42,25 @@ void main() {
testWidgets(
'Color palettes screen shows correctly when color icon is clicked '
'on NavigationRail', (tester) async {
widgetSetup(tester, 450); // NavigationRail shows only when width is >= 450.
widgetSetup(
tester, 1200); // NavigationRail shows only when width is > 1000.
addTearDown(tester.binding.window.clearPhysicalSizeTestValue);
await tester.pumpWidget(const Material3Demo());
await tester.pumpWidget(const MaterialApp(home: Material3Demo()));
await tester.pumpAndSettle();
expect(find.text('Light Theme'), findsNothing);
expect(find.text('Dark Theme'), findsNothing);
expect(find.byType(NavigationRail), findsOneWidget);
Finder colorIconOnRail = find.byIcon(Icons.format_paint_outlined);
Finder colorIconOnRail = find.descendant(
of: find.byType(NavigationRail),
matching: find.byIcon(Icons.format_paint_outlined));
expect(colorIconOnRail, findsOneWidget);
await tester.tap(colorIconOnRail);
await tester.pumpAndSettle(const Duration(microseconds: 500));
expect(colorIconOnRail, findsNothing);
expect(find.byIcon(Icons.format_paint), findsOneWidget);
Finder selectedColorIconOnRail = find.descendant(
of: find.byType(NavigationRail),
matching: find.byIcon(Icons.format_paint));
expect(selectedColorIconOnRail, findsOneWidget);
expect(find.text('Light Theme'), findsOneWidget);
expect(find.text('Dark Theme'), findsOneWidget);
});

168
experimental/material_3_demo/test/component_screen_test.dart
View File

@@ -10,15 +10,15 @@ import 'package:material_3_demo/main.dart';
void main() {
testWidgets('Default main page shows all M3 components', (tester) async {
widgetSetup(tester, 800, windowHeight: 3500);
await tester.pumpWidget(const Material3Demo());
widgetSetup(tester, 800, windowHeight: 7000);
await tester.pumpWidget(const MaterialApp(home: Material3Demo()));
// Elements on the app bar
expect(find.text('Material 3'), findsOneWidget);
expect(find.widgetWithIcon(IconButton, Icons.wb_sunny_outlined),
findsOneWidget);
expect(find.widgetWithIcon(IconButton, Icons.filter_3), findsOneWidget);
expect(find.widgetWithIcon(IconButton, Icons.more_vert), 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);
// Elements on the component screen
// Buttons
@@ -27,13 +27,14 @@ void main() {
expect(find.widgetWithText(FilledButton, 'Filled Tonal'), findsNWidgets(2));
expect(find.widgetWithText(OutlinedButton, 'Outlined'), findsNWidgets(2));
expect(find.widgetWithText(TextButton, 'Text'), findsNWidgets(2));
expect(find.text('Icon'), findsNWidgets(5));
expect(find.widgetWithText(Buttons, 'Icon'), findsNWidgets(5));
// IconButtons
expect(find.byType(IconToggleButton), findsNWidgets(8));
// FABs
expect(find.byType(FloatingActionButton), findsNWidgets(4));
expect(find.byType(FloatingActionButton),
findsNWidgets(6)); // 2 more shows up in the bottom app bar.
expect(find.widgetWithText(FloatingActionButton, 'Create'), findsOneWidget);
// Chips
@@ -43,9 +44,9 @@ void main() {
expect(find.byType(InputChip), findsNWidgets(4));
// Cards
expect(find.widgetWithText(Card, 'Filled'), findsOneWidget);
expect(find.widgetWithText(Card, 'Filled'), findsOneWidget);
expect(find.widgetWithText(Card, 'Outlined'), findsOneWidget);
expect(find.widgetWithText(Cards, 'Elevated'), findsOneWidget);
expect(find.widgetWithText(Cards, 'Filled'), findsOneWidget);
expect(find.widgetWithText(Cards, 'Outlined'), findsOneWidget);
// TextFields
expect(find.widgetWithText(TextField, 'Disabled'), findsNWidgets(2));
@@ -76,68 +77,57 @@ void main() {
});
testWidgets(
'NavigationRail doesn\'t show when width value is small than 450 '
'NavigationRail doesn\'t show when width value is small than 1000 '
'(in Portrait mode or narrow screen)', (tester) async {
widgetSetup(tester, 449);
await tester.pumpWidget(const Material3Demo());
widgetSetup(tester, 999, windowHeight: 7000);
await tester.pumpWidget(const MaterialApp(home: Material3Demo()));
await tester.pumpAndSettle();
// When screen width is less than 450, NavigationBar will show. At the same
// time, the NavigationRail and the NavigationBar example will NOT show.
expect(find.byType(NavigationBars), findsOneWidget);
// When screen width is less than 1000, NavigationBar will show. At the same
// time, the NavigationBar example still show up in the navigation group.
expect(find.byType(NavigationBars),
findsNWidgets(3)); // The real navBar, badges example and navBar example
expect(find.widgetWithText(NavigationBar, 'Components'), findsOneWidget);
expect(find.widgetWithText(NavigationBar, 'Color'), findsOneWidget);
expect(find.widgetWithText(NavigationBar, 'Typography'), findsOneWidget);
expect(find.widgetWithText(NavigationBar, 'Elevation'), findsOneWidget);
expect(find.byType(NavigationRailSection), findsNothing);
expect(find.widgetWithText(NavigationBar, 'Explore'), findsNothing);
expect(find.widgetWithText(NavigationBar, 'Pets'), findsNothing);
expect(find.widgetWithText(NavigationBar, 'Account'), findsNothing);
expect(find.widgetWithText(NavigationBar, 'Explore'), findsOneWidget);
expect(find.widgetWithText(NavigationBar, 'Pets'), findsOneWidget);
expect(find.widgetWithText(NavigationBar, 'Account'), findsOneWidget);
});
testWidgets(
'NavigationRail shows when width value is greater than or equal '
'to 450 (in Landscape mode or wider screen)', (tester) async {
widgetSetup(tester, 450);
await tester.pumpWidget(const Material3Demo());
'to 1000 (in Landscape mode or wider screen)', (tester) async {
widgetSetup(tester, 1001, windowHeight: 3000);
await tester.pumpWidget(const MaterialApp(home: Material3Demo()));
await tester.pumpAndSettle();
// When screen width is greater than or equal to 450, NavigationRail and
// NavigationBar example will show. At the same time, the NavigationBar
// will NOT show.
expect(find.byType(NavigationRailSection), findsOneWidget);
// When screen width is greater than or equal to 1000, NavigationRail will show.
// At the same time, the NavigationBar will NOT show.
expect(find.byType(NavigationRail), findsOneWidget);
expect(find.byType(Tooltip, skipOffstage: false), findsWidgets);
expect(find.widgetWithText(NavigationRailSection, 'Components'),
findsOneWidget);
expect(find.widgetWithText(NavigationRailSection, 'Color'), findsOneWidget);
expect(find.widgetWithText(NavigationRailSection, 'Typography'),
findsOneWidget);
expect(find.widgetWithText(NavigationRailSection, 'Elevation'),
findsOneWidget);
expect(find.widgetWithText(NavigationRail, 'Components'), findsOneWidget);
expect(find.widgetWithText(NavigationRail, 'Color'), findsOneWidget);
expect(find.widgetWithText(NavigationRail, 'Typography'), findsOneWidget);
expect(find.widgetWithText(NavigationRail, 'Elevation'), findsOneWidget);
final navbarExample = find.byType(NavigationBars);
await tester.scrollUntilVisible(
scrollable: find.byType(Scrollable).first,
navbarExample,
500.0,
);
expect(find.byType(NavigationBars), findsOneWidget);
expect(find.widgetWithText(NavigationBar, 'Explore'), findsOneWidget);
expect(find.widgetWithText(NavigationBar, 'Pets'), findsOneWidget);
expect(find.widgetWithText(NavigationBar, 'Account'), findsOneWidget);
expect(find.widgetWithText(NavigationBar, 'Components'), findsNothing);
expect(find.widgetWithText(NavigationBar, 'Colors'), findsNothing);
expect(find.widgetWithText(NavigationBar, 'Typography'), findsNothing);
expect(find.widgetWithText(NavigationBar, 'Elevation'), findsNothing);
// the Navigation bar should be out of screen.
final RenderBox box =
tester.renderObject(find.widgetWithText(NavigationBar, 'Components'));
expect(box.localToGlobal(Offset.zero), const Offset(0.0, 3080.0));
});
testWidgets(
'Material version switches between Material3 and Material2 when'
'the version icon is clicked', (tester) async {
widgetSetup(tester, 450, windowHeight: 3000);
await tester.pumpWidget(const Material3Demo());
Finder m3Icon = find.widgetWithIcon(IconButton, Icons.filter_3);
Finder m2Icon = find.widgetWithIcon(IconButton, Icons.filter_2);
widgetSetup(tester, 450, windowHeight: 7000);
await tester.pumpWidget(const MaterialApp(home: Material3Demo()));
BuildContext defaultElevatedButton =
tester.firstElement(find.byType(ElevatedButton));
BuildContext defaultIconButton =
@@ -157,8 +147,8 @@ void main() {
await tester.tap(dismiss);
await tester.pumpAndSettle(const Duration(microseconds: 500));
expect(m3Icon, findsOneWidget);
expect(m2Icon, findsNothing);
expect(find.widgetWithIcon(AppBar, Icons.filter_3), findsOneWidget);
expect(find.widgetWithIcon(AppBar, Icons.filter_2), findsNothing);
expect(find.text('Material 3'), findsOneWidget);
expect(Theme.of(defaultElevatedButton).useMaterial3, true);
expect(Theme.of(defaultIconButton).useMaterial3, true);
@@ -166,7 +156,10 @@ void main() {
expect(Theme.of(defaultCard).useMaterial3, true);
expect(Theme.of(defaultChip).useMaterial3, true);
await tester.tap(m3Icon);
Finder appbarM3Icon = find.descendant(
of: find.byType(AppBar),
matching: find.widgetWithIcon(IconButton, Icons.filter_3));
await tester.tap(appbarM3Icon);
await tester.pumpAndSettle(const Duration(microseconds: 500));
BuildContext updatedElevatedButton =
tester.firstElement(find.byType(ElevatedButton));
@@ -187,8 +180,8 @@ void main() {
await tester.tap(updatedDismiss);
await tester.pumpAndSettle(const Duration(microseconds: 500));
expect(m3Icon, findsNothing);
expect(m2Icon, findsOneWidget);
expect(find.widgetWithIcon(AppBar, Icons.filter_2), findsOneWidget);
expect(find.widgetWithIcon(AppBar, Icons.filter_3), findsNothing);
expect(find.text('Material 2'), findsOneWidget);
expect(Theme.of(updatedElevatedButton).useMaterial3, false);
expect(Theme.of(updatedIconButton).useMaterial3, false);
@@ -200,17 +193,32 @@ void main() {
testWidgets(
'Other screens become Material2 mode after changing mode from '
'main screen', (tester) async {
await tester.pumpWidget(const Material3Demo());
await tester.tap(find.widgetWithIcon(IconButton, Icons.filter_3));
await tester.tap(find.byIcon(Icons.format_paint_outlined));
await tester.pumpWidget(const MaterialApp(home: Material3Demo()));
Finder appbarM3Icon = find.descendant(
of: find.byType(AppBar),
matching: find.widgetWithIcon(IconButton, Icons.filter_3));
await tester.tap(appbarM3Icon);
Finder secondScreenIcon = find.descendant(
of: find.byType(NavigationBar),
matching: find.widgetWithIcon(
NavigationDestination, Icons.format_paint_outlined));
await tester.tap(secondScreenIcon);
await tester.pumpAndSettle(const Duration(microseconds: 500));
BuildContext lightThemeText = tester.element(find.text('Light Theme'));
expect(Theme.of(lightThemeText).useMaterial3, false);
await tester.tap(find.byIcon(Icons.text_snippet_outlined));
Finder thirdScreenIcon = find.descendant(
of: find.byType(NavigationBar),
matching: find.widgetWithIcon(
NavigationDestination, Icons.text_snippet_outlined));
await tester.tap(thirdScreenIcon);
await tester.pumpAndSettle(const Duration(microseconds: 500));
BuildContext displayLargeText = tester.element(find.text('Display Large'));
expect(Theme.of(displayLargeText).useMaterial3, false);
await tester.tap(find.byIcon(Icons.invert_colors_on_outlined));
Finder fourthScreenIcon = find.descendant(
of: find.byType(NavigationBar),
matching: find.widgetWithIcon(
NavigationDestination, Icons.invert_colors_on_outlined));
await tester.tap(fourthScreenIcon);
await tester.pumpAndSettle(const Duration(microseconds: 500));
BuildContext material = tester.firstElement(find.byType(Material));
expect(Theme.of(material).useMaterial3, false);
@@ -219,12 +227,17 @@ void main() {
testWidgets(
'Brightness mode switches between dark and light when'
'the brightness icon is clicked', (tester) async {
await tester.pumpWidget(const Material3Demo());
Finder lightIcon = find.widgetWithIcon(IconButton, Icons.wb_sunny_outlined);
Finder darkIcon = find.widgetWithIcon(IconButton, Icons.wb_sunny);
BuildContext appBar = tester.element(find.byType(AppBar));
BuildContext body = tester.element(find.byType(Scaffold));
BuildContext navigationRail = tester.element(find.byType(NavigationRail));
await tester.pumpWidget(const MaterialApp(home: Material3Demo()));
Finder lightIcon = find.descendant(
of: find.byType(AppBar),
matching: find.widgetWithIcon(IconButton, Icons.wb_sunny_outlined));
Finder darkIcon = find.descendant(
of: find.byType(AppBar),
matching: find.widgetWithIcon(IconButton, Icons.wb_sunny));
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(Theme.of(appBar).brightness, Brightness.light);
@@ -233,8 +246,8 @@ void main() {
await tester.tap(lightIcon);
await tester.pumpAndSettle(const Duration(microseconds: 500));
BuildContext appBar2 = tester.element(find.byType(AppBar));
BuildContext body2 = tester.element(find.byType(Scaffold));
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);
@@ -245,10 +258,15 @@ void main() {
testWidgets('Color theme changes when a color is selected from menu',
(tester) async {
await tester.pumpWidget(const Material3Demo());
Finder menuIcon = find.widgetWithIcon(IconButton, Icons.more_vert);
BuildContext appBar = tester.element(find.byType(AppBar));
BuildContext body = tester.element(find.byType(Scaffold));
Color m3BaseColor = const Color(0xff6750a4);
await tester.pumpWidget(Container());
await tester.pumpWidget(const MaterialApp(home: Material3Demo()));
await tester.pump();
Finder menuIcon = find.descendant(
of: find.byType(AppBar),
matching: find.widgetWithIcon(IconButton, Icons.more_vert));
BuildContext appBar = tester.element(find.byType(AppBar).first);
BuildContext body = tester.element(find.byType(Scaffold).first);
BuildContext navigationRail = tester.element(find.byType(NavigationRail));
expect(Theme.of(appBar).primaryColor, m3BaseColor);
@@ -256,11 +274,11 @@ void main() {
expect(Theme.of(navigationRail).primaryColor, m3BaseColor);
await tester.tap(menuIcon);
await tester.pumpAndSettle();
await tester.tap(find.text('Blue'));
await tester.tap(find.text('Blue').last);
await tester.pumpAndSettle();
BuildContext appBar2 = tester.element(find.byType(AppBar));
BuildContext body2 = tester.element(find.byType(Scaffold));
BuildContext appBar2 = tester.element(find.byType(AppBar).first);
BuildContext body2 = tester.element(find.byType(Scaffold).first);
BuildContext navigationRail2 = tester.element(find.byType(NavigationRail));
ThemeData expectedTheme = ThemeData(colorSchemeSeed: Colors.blue);
expect(Theme.of(appBar2).primaryColor, expectedTheme.primaryColor);

39
experimental/material_3_demo/test/elevation_screen_test.dart
View File

@@ -16,43 +16,54 @@ void main() {
'selected on NavigationBar', (tester) async {
widgetSetup(tester, 449);
addTearDown(tester.binding.window.clearPhysicalSizeTestValue);
await tester.pumpWidget(const Material3Demo());
await tester.pumpWidget(const MaterialApp(home: Material3Demo()));
expect(find.text('Surface Tint only'), findsNothing);
expect(find.text('Surface Tint Color Only'), findsNothing);
expect(find.byType(NavigationBar), findsOneWidget);
Finder tintIconOnBar = find.byIcon(Icons.invert_colors_on_outlined);
Finder tintIconOnBar = find.descendant(
of: find.byType(NavigationBar),
matching: find.widgetWithIcon(
NavigationDestination, Icons.invert_colors_on_outlined));
expect(tintIconOnBar, findsOneWidget);
await tester.tap(tintIconOnBar);
await tester.pumpAndSettle(const Duration(microseconds: 500));
expect(tintIconOnBar, findsNothing);
expect(find.byIcon(Icons.opacity), findsOneWidget);
expect(find.text('Surface Tint only'), findsOneWidget);
Finder selectedTintIconOnBar = find.descendant(
of: find.byType(NavigationBar),
matching: find.widgetWithIcon(NavigationDestination, Icons.opacity));
expect(selectedTintIconOnBar, findsOneWidget);
expect(find.text('Surface Tint Color Only'), findsOneWidget);
});
testWidgets(
'Surface Tones screen shows correctly when the corresponding icon is '
'selected on NavigationRail', (tester) async {
widgetSetup(tester, 450); // NavigationRail shows only when width is >= 450.
widgetSetup(
tester, 1200); // NavigationRail shows only when width is > 1000.
addTearDown(tester.binding.window.clearPhysicalSizeTestValue);
await tester.pumpWidget(const Material3Demo());
expect(find.text('Surface Tint only'), findsNothing);
await tester.pumpWidget(const MaterialApp(home: Material3Demo()));
expect(find.text('Surface Tint Color Only'), findsNothing);
expect(find.byType(NavigationRail), findsOneWidget);
Finder tintIconOnRail = find.byIcon(Icons.invert_colors_on_outlined);
Finder tintIconOnRail = find.descendant(
of: find.byType(NavigationRail),
matching: find.byIcon(Icons.invert_colors_on_outlined));
expect(tintIconOnRail, findsOneWidget);
await tester.tap(tintIconOnRail);
await tester.pumpAndSettle(const Duration(microseconds: 500));
expect(tintIconOnRail, findsNothing);
expect(find.byIcon(Icons.opacity), findsOneWidget);
expect(find.text('Surface Tint only'), findsOneWidget);
Finder selectedTintIconOnRail = find.descendant(
of: find.byType(NavigationRail), matching: find.byIcon(Icons.opacity));
expect(selectedTintIconOnRail, findsOneWidget);
expect(find.text('Surface Tint Color Only'), findsOneWidget);
});
testWidgets('Surface Tones screen shows correct content', (tester) async {
await tester.pumpWidget(MaterialApp(
home: Scaffold(body: Row(children: const [ElevationScreen()])),
));
expect(find.text('Surface Tint only'), findsOneWidget);
expect(find.text('Surface Tint and Shadow'), findsOneWidget);
expect(find.text('Shadow only'), findsOneWidget);
expect(find.text('Surface Tint Color Only'), findsOneWidget);
expect(find.text('Surface Tint Color and Shadow Color'), findsOneWidget);
expect(find.text('Shadow Color Only'), findsOneWidget);
expect(find.byType(ElevationGrid), findsNWidgets(3));
expect(find.byType(ElevationCard), findsNWidgets(18));
});

25
experimental/material_3_demo/test/typography_screen_test.dart
View File

@@ -16,33 +16,44 @@ void main() {
'selected on NavigationBar', (tester) async {
widgetSetup(tester, 449);
addTearDown(tester.binding.window.clearPhysicalSizeTestValue);
await tester.pumpWidget(const Material3Demo());
await tester.pumpWidget(const MaterialApp(home: Material3Demo()));
expect(find.text('Display Large'), findsNothing);
expect(find.byType(NavigationBar), findsOneWidget);
Finder textIconOnBar = find.byIcon(Icons.text_snippet_outlined);
Finder textIconOnBar = find.descendant(
of: find.byType(NavigationBar),
matching: find.byIcon(Icons.text_snippet_outlined));
expect(textIconOnBar, findsOneWidget);
await tester.tap(textIconOnBar);
await tester.pumpAndSettle(const Duration(microseconds: 500));
expect(textIconOnBar, findsNothing);
expect(find.byIcon(Icons.text_snippet), findsOneWidget);
Finder selectedTextIconOnBar = find.descendant(
of: find.byType(NavigationBar),
matching: find.byIcon(Icons.text_snippet));
expect(selectedTextIconOnBar, findsOneWidget);
expect(find.text('Display Large'), findsOneWidget);
});
testWidgets(
'Typography screen shows correctly when the corresponding icon is '
'selected on NavigationRail', (tester) async {
widgetSetup(tester, 450); // NavigationRail shows only when width is >= 450.
widgetSetup(
tester, 1200); // NavigationRail shows only when width is > 1000.
addTearDown(tester.binding.window.clearPhysicalSizeTestValue);
await tester.pumpWidget(const Material3Demo());
await tester.pumpWidget(const MaterialApp(home: Material3Demo()));
expect(find.text('Display Large'), findsNothing);
expect(find.byType(NavigationRail), findsOneWidget);
Finder textIconOnRail = find.byIcon(Icons.text_snippet_outlined);
Finder textIconOnRail = find.descendant(
of: find.byType(NavigationRail),
matching: find.byIcon(Icons.text_snippet_outlined));
expect(textIconOnRail, findsOneWidget);
await tester.tap(textIconOnRail);
await tester.pumpAndSettle(const Duration(microseconds: 500));
expect(textIconOnRail, findsNothing);
expect(find.byIcon(Icons.text_snippet), findsOneWidget);
Finder selectedTextIconOnRail = find.descendant(
of: find.byType(NavigationRail),
matching: find.byIcon(Icons.text_snippet));
expect(selectedTextIconOnRail, findsOneWidget);
expect(find.text('Display Large'), findsOneWidget);
});