New M3 Demo App for Master Channel (#1378)

* Added components

* Added test

* Added README

* Run flutter format

* Added all the updated components and tests

* Added README file

* Update README.md

* Add textfields to M3 demo app

* move textfield to exprerimental/

* Update component_screen_test.dart

* Fixed comment: changed sdk version

* Changed all double quotes to single

* Added trailing comma, changed all private fields to public except private state classes

* Added enum for screen selection

* Removed comment for material_3_demo

* Added experimental m3 demo app to master CI pipeline

* fixed failing tests

* Modified the analysis_options.yaml

* Fixed warning

* Ran flutter format command

Co-authored-by: Qun Cheng <quncheng@google.com>
Co-authored-by: hangyu <108393416+hangyujin@users.noreply.github.com>

experimental/material_3_demo/test/color_screen_test.dart

@@ -0,0 +1,61 @@
+// Copyright 2021 The Flutter team. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// ignore_for_file: avoid_types_on_closure_parameters
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:material_3_demo/color_palettes_screen.dart';
+import 'package:material_3_demo/main.dart';
+
+import 'component_screen_test.dart';
+
+void main() {
+  testWidgets(
+      'Color palettes screen shows correctly when color icon is clicked '
+      'on NavigationBar', (tester) async {
+    widgetSetup(tester, 449);
+    addTearDown(tester.binding.window.clearPhysicalSizeTestValue);
+    await tester.pumpWidget(const 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);
+    expect(colorIconOnBar, findsOneWidget);
+    await tester.tap(colorIconOnBar);
+    await tester.pumpAndSettle(const Duration(microseconds: 500));
+    expect(colorIconOnBar, findsNothing);
+    expect(find.byIcon(Icons.format_paint), findsOneWidget);
+    expect(find.text('Light Theme'), findsOneWidget);
+    expect(find.text('Dark Theme'), findsOneWidget);
+  });
+
+  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.
+    addTearDown(tester.binding.window.clearPhysicalSizeTestValue);
+    await tester.pumpWidget(const Material3Demo());
+    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);
+    expect(colorIconOnRail, findsOneWidget);
+    await tester.tap(colorIconOnRail);
+    await tester.pumpAndSettle(const Duration(microseconds: 500));
+    expect(colorIconOnRail, findsNothing);
+    expect(find.byIcon(Icons.format_paint), findsOneWidget);
+    expect(find.text('Light Theme'), findsOneWidget);
+    expect(find.text('Dark Theme'), findsOneWidget);
+  });
+
+  testWidgets('Color screen shows correct content', (tester) async {
+    await tester.pumpWidget(MaterialApp(
+      home: Scaffold(body: Row(children: const [ColorPalettesScreen()])),
+    ));
+    expect(find.text('Light Theme'), findsOneWidget);
+    expect(find.text('Dark Theme'), findsOneWidget);
+    expect(find.byType(ColorGroup, skipOffstage: false), findsNWidgets(14));
+  });
+}

experimental/material_3_demo/test/component_screen_test.dart

@@ -0,0 +1,262 @@
+// Copyright 2021 The Flutter team. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// ignore_for_file: avoid_types_on_closure_parameters
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:material_3_demo/component_screen.dart';
+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());
+
+    // 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);
+
+    // Elements on the component screen
+    // Buttons
+    expect(find.widgetWithText(ElevatedButton, 'Elevated'), findsNWidgets(2));
+    expect(find.widgetWithText(ElevatedButton, 'Filled'), findsNWidgets(2));
+    expect(
+        find.widgetWithText(ElevatedButton, 'Filled Tonal'), findsNWidgets(2));
+    expect(find.widgetWithText(OutlinedButton, 'Outlined'), findsNWidgets(2));
+    expect(find.widgetWithText(TextButton, 'Text'), findsNWidgets(2));
+    expect(find.text('Icon'), findsNWidgets(5));
+
+    // IconButtons
+    expect(find.byType(IconToggleButton), findsNWidgets(8));
+
+    // FABs
+    expect(find.byType(FloatingActionButton), findsNWidgets(4));
+    expect(find.widgetWithText(FloatingActionButton, 'Create'), findsOneWidget);
+
+    // Chips
+    expect(find.byType(ActionChip),
+        findsNWidgets(7)); // includes Assist and Suggestion chip.
+    expect(find.byType(FilterChip), findsNWidgets(4));
+    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);
+
+    // TextFields
+    expect(find.widgetWithText(TextField, 'Disabled'), findsNWidgets(2));
+    expect(find.widgetWithText(TextField, 'Filled'), findsNWidgets(2));
+    expect(find.widgetWithText(TextField, 'Outlined'), findsNWidgets(2));
+
+    // Alert Dialog
+    Finder dialogExample = find.widgetWithText(TextButton, 'Open Dialog');
+    expect(dialogExample, findsOneWidget);
+  });
+
+  testWidgets(
+      'NavigationRail doesn\'t show when width value is small than 450 '
+      '(in Portrait mode or narrow screen)', (tester) async {
+    widgetSetup(tester, 449);
+    await tester.pumpWidget(const Material3Demo());
+
+    // 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);
+    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);
+  });
+
+  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());
+
+    // 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);
+    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);
+
+    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);
+  });
+
+  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);
+    BuildContext defaultElevatedButton =
+        tester.firstElement(find.byType(ElevatedButton));
+    BuildContext defaultIconButton =
+        tester.firstElement(find.byType(IconButton));
+    BuildContext defaultFAB =
+        tester.firstElement(find.byType(FloatingActionButton));
+    BuildContext defaultCard =
+        tester.firstElement(find.widgetWithText(Card, 'Elevated'));
+    BuildContext defaultChip =
+        tester.firstElement(find.widgetWithText(ActionChip, 'Assist'));
+    Finder dialog = find.text('Open 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');
+    await tester.tap(dismiss);
+    await tester.pumpAndSettle(const Duration(microseconds: 500));
+
+    expect(m3Icon, findsOneWidget);
+    expect(m2Icon, findsNothing);
+    expect(find.text('Material 3'), findsOneWidget);
+    expect(Theme.of(defaultElevatedButton).useMaterial3, true);
+    expect(Theme.of(defaultIconButton).useMaterial3, true);
+    expect(Theme.of(defaultFAB).useMaterial3, true);
+    expect(Theme.of(defaultCard).useMaterial3, true);
+    expect(Theme.of(defaultChip).useMaterial3, true);
+
+    await tester.tap(m3Icon);
+    await tester.pumpAndSettle(const Duration(microseconds: 500));
+    BuildContext updatedElevatedButton =
+        tester.firstElement(find.byType(ElevatedButton));
+    BuildContext updatedIconButton =
+        tester.firstElement(find.byType(IconButton));
+    BuildContext updatedFAB =
+        tester.firstElement(find.byType(FloatingActionButton));
+    BuildContext updatedCard = tester.firstElement(find.byType(Card));
+    BuildContext updatedChip =
+        tester.firstElement(find.widgetWithText(ActionChip, 'Assist'));
+    Finder updatedDialog = find.text('Open Dialog');
+    await tester.tap(updatedDialog);
+    await tester.pumpAndSettle(const Duration(microseconds: 500));
+    BuildContext updatedAlertDialog =
+        tester.firstElement(find.byType(AlertDialog));
+    expect(Theme.of(updatedAlertDialog).useMaterial3, false);
+    Finder updatedDismiss = find.text('Dismiss');
+    await tester.tap(updatedDismiss);
+    await tester.pumpAndSettle(const Duration(microseconds: 500));
+
+    expect(m3Icon, findsNothing);
+    expect(m2Icon, findsOneWidget);
+    expect(find.text('Material 2'), findsOneWidget);
+    expect(Theme.of(updatedElevatedButton).useMaterial3, false);
+    expect(Theme.of(updatedIconButton).useMaterial3, false);
+    expect(Theme.of(updatedFAB).useMaterial3, false);
+    expect(Theme.of(updatedCard).useMaterial3, false);
+    expect(Theme.of(updatedChip).useMaterial3, false);
+  });
+
+  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.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));
+    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));
+    await tester.pumpAndSettle(const Duration(microseconds: 500));
+    BuildContext material = tester.firstElement(find.byType(Material));
+    expect(Theme.of(material).useMaterial3, false);
+  });
+
+  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));
+    expect(lightIcon, findsOneWidget);
+    expect(darkIcon, 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.pumpAndSettle(const Duration(microseconds: 500));
+
+    BuildContext appBar2 = tester.element(find.byType(AppBar));
+    BuildContext body2 = tester.element(find.byType(Scaffold));
+    BuildContext navigationRail2 = tester.element(find.byType(NavigationRail));
+    expect(lightIcon, findsNothing);
+    expect(darkIcon, findsOneWidget);
+    expect(Theme.of(appBar2).brightness, Brightness.dark);
+    expect(Theme.of(body2).brightness, Brightness.dark);
+    expect(Theme.of(navigationRail2).brightness, Brightness.dark);
+  });
+
+  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));
+    BuildContext navigationRail = tester.element(find.byType(NavigationRail));
+
+    expect(Theme.of(appBar).primaryColor, m3BaseColor);
+    expect(Theme.of(body).primaryColor, m3BaseColor);
+    expect(Theme.of(navigationRail).primaryColor, m3BaseColor);
+    await tester.tap(menuIcon);
+    await tester.pumpAndSettle();
+    await tester.tap(find.text('Blue'));
+    await tester.pumpAndSettle();
+
+    BuildContext appBar2 = tester.element(find.byType(AppBar));
+    BuildContext body2 = tester.element(find.byType(Scaffold));
+    BuildContext navigationRail2 = tester.element(find.byType(NavigationRail));
+    ThemeData expectedTheme = ThemeData(colorSchemeSeed: Colors.blue);
+    expect(Theme.of(appBar2).primaryColor, expectedTheme.primaryColor);
+    expect(Theme.of(body2).primaryColor, expectedTheme.primaryColor);
+    expect(Theme.of(navigationRail2).primaryColor, expectedTheme.primaryColor);
+  });
+}
+
+void widgetSetup(WidgetTester tester, double windowWidth,
+    {double? windowHeight}) {
+  final height = windowHeight ?? 846;
+  tester.binding.window.devicePixelRatioTestValue = (2);
+  final dpi = tester.binding.window.devicePixelRatio;
+  tester.binding.window.physicalSizeTestValue =
+      Size(windowWidth * dpi, height * dpi);
+}

experimental/material_3_demo/test/elevation_screen_test.dart

@@ -0,0 +1,59 @@
+// Copyright 2021 The Flutter team. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// ignore_for_file: avoid_types_on_closure_parameters
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:material_3_demo/elevation_screen.dart';
+import 'package:material_3_demo/main.dart';
+
+import 'component_screen_test.dart';
+
+void main() {
+  testWidgets(
+      'Surface Tones screen shows correctly when the corresponding icon is '
+      'selected on NavigationBar', (tester) async {
+    widgetSetup(tester, 449);
+    addTearDown(tester.binding.window.clearPhysicalSizeTestValue);
+    await tester.pumpWidget(const Material3Demo());
+
+    expect(find.text('Surface Tint only'), findsNothing);
+    expect(find.byType(NavigationBar), findsOneWidget);
+    Finder tintIconOnBar = find.byIcon(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);
+  });
+
+  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.
+    addTearDown(tester.binding.window.clearPhysicalSizeTestValue);
+    await tester.pumpWidget(const Material3Demo());
+    expect(find.text('Surface Tint only'), findsNothing);
+    expect(find.byType(NavigationRail), findsOneWidget);
+    Finder tintIconOnRail = 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);
+  });
+
+  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.byType(ElevationGrid), findsNWidgets(3));
+    expect(find.byType(ElevationCard), findsNWidgets(18));
+  });
+}

experimental/material_3_demo/test/typography_screen_test.dart

@@ -0,0 +1,75 @@
+// Copyright 2021 The Flutter team. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// ignore_for_file: avoid_types_on_closure_parameters
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:material_3_demo/main.dart';
+import 'package:material_3_demo/typography_screen.dart';
+
+import 'component_screen_test.dart';
+
+void main() {
+  testWidgets(
+      'Typography screen shows correctly when the corresponding icon is '
+      'selected on NavigationBar', (tester) async {
+    widgetSetup(tester, 449);
+    addTearDown(tester.binding.window.clearPhysicalSizeTestValue);
+    await tester.pumpWidget(const Material3Demo());
+
+    expect(find.text('Display Large'), findsNothing);
+    expect(find.byType(NavigationBar), findsOneWidget);
+    Finder textIconOnBar = 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);
+    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.
+    addTearDown(tester.binding.window.clearPhysicalSizeTestValue);
+    await tester.pumpWidget(const Material3Demo());
+    expect(find.text('Display Large'), findsNothing);
+    expect(find.byType(NavigationRail), findsOneWidget);
+    Finder textIconOnRail = 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);
+    expect(find.text('Display Large'), findsOneWidget);
+  });
+
+  testWidgets('Typography screen shows correct content', (tester) async {
+    await tester.pumpWidget(MaterialApp(
+      home: Scaffold(body: Row(children: const [TypographyScreen()])),
+    ));
+    expect(find.text('Display Large'), findsOneWidget);
+    expect(find.text('Display Medium'), findsOneWidget);
+    expect(find.text('Display Small'), findsOneWidget);
+    expect(find.text('Headline Large'), findsOneWidget);
+    expect(find.text('Headline Medium'), findsOneWidget);
+    expect(find.text('Headline Small'), findsOneWidget);
+    expect(find.text('Title Large'), findsOneWidget);
+    expect(find.text('Title Medium'), findsOneWidget);
+    expect(find.text('Title Small'), findsOneWidget);
+    await tester.scrollUntilVisible(
+      find.text('Body Small'),
+      500.0,
+    );
+    expect(find.text('Label Large'), findsOneWidget);
+    expect(find.text('Label Medium'), findsOneWidget);
+    expect(find.text('Label Small'), findsOneWidget);
+    expect(find.text('Body Large'), findsOneWidget);
+    expect(find.text('Body Medium'), findsOneWidget);
+    expect(find.text('Body Small'), findsOneWidget);
+
+    expect(find.byType(TextStyleExample), findsNWidgets(15));
+  });
+}