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/lib/typography_screen.dart

@@ -0,0 +1,63 @@
+// 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.
+
+import 'package:flutter/material.dart';
+
+class TypographyScreen extends StatelessWidget {
+  const TypographyScreen({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final textTheme = Theme.of(context)
+        .textTheme
+        .apply(displayColor: Theme.of(context).colorScheme.onSurface);
+    return Expanded(
+      child: ListView(
+        children: <Widget>[
+          const SizedBox(height: 7),
+          TextStyleExample(
+              name: 'Display Large', style: textTheme.displayLarge!),
+          TextStyleExample(
+              name: 'Display Medium', style: textTheme.displayMedium!),
+          TextStyleExample(
+              name: 'Display Small', style: textTheme.displaySmall!),
+          TextStyleExample(
+              name: 'Headline Large', style: textTheme.headlineLarge!),
+          TextStyleExample(
+              name: 'Headline Medium', style: textTheme.headlineMedium!),
+          TextStyleExample(
+              name: 'Headline Small', style: textTheme.headlineSmall!),
+          TextStyleExample(name: 'Title Large', style: textTheme.titleLarge!),
+          TextStyleExample(name: 'Title Medium', style: textTheme.titleMedium!),
+          TextStyleExample(name: 'Title Small', style: textTheme.titleSmall!),
+          TextStyleExample(name: 'Label Large', style: textTheme.labelLarge!),
+          TextStyleExample(name: 'Label Medium', style: textTheme.labelMedium!),
+          TextStyleExample(name: 'Label Small', style: textTheme.labelSmall!),
+          TextStyleExample(name: 'Body Large', style: textTheme.bodyLarge!),
+          TextStyleExample(name: 'Body Medium', style: textTheme.bodyMedium!),
+          TextStyleExample(name: 'Body Small', style: textTheme.bodySmall!),
+        ],
+      ),
+    );
+  }
+}
+
+class TextStyleExample extends StatelessWidget {
+  const TextStyleExample({
+    super.key,
+    required this.name,
+    required this.style,
+  });
+
+  final String name;
+  final TextStyle style;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(8.0),
+      child: Text(name, style: style),
+    );
+  }
+}