[material_ui] Implement M3E typography

packages/material_ui/example/lib/main.dart

@@ -29,6 +29,7 @@ import 'progress_indicator/circular_progress_indicator.0.dart'
     as circular_progress_indicator_0;
 import 'dropdown_menu/dropdown_menu.1.dart' as dropdown_menu_1;
 import 'material_shapes/material_shapes.0.dart' as material_shapes_0;
+import 'typography/typography.0.dart' as typography_0;
 import 'navigation_bar/navigation_bar.1.dart' as navigation_bar_1;
 import 'navigation_rail/navigation_rail.0.dart' as navigation_rail_0;
 import 'navigation_drawer/navigation_drawer.0.dart' as navigation_drawer_0;
@@ -245,6 +246,12 @@ class ExampleApp extends StatelessWidget {
       title: 'Tooltip',
       builder: (BuildContext context) => const tooltip_0.TooltipExampleApp(),
     ),
+    _Example(
+      filepath: 'typography/typography.0.dart',
+      title: 'Typography',
+      builder: (BuildContext context) =>
+          const typography_0.TypographyExampleApp(),
+    ),
   ];
 
   @override

packages/material_ui/example/lib/typography/typography.0.dart

@@ -0,0 +1,152 @@
+// Copyright 2013 The Flutter Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// #region body
+import 'package:material_ui/material_ui.dart';
+
+/// Flutter code sample for [Typography.material2025].
+
+void main() {
+  runApp(const TypographyExampleApp());
+}
+
+class TypographyExampleApp extends StatelessWidget {
+  const TypographyExampleApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    // The default typography provides an emphasized variant of each text
+    // style, such as TextTheme.titleMediumEmphasized.
+    return MaterialApp(theme: ThemeData(), home: const TypographyExample());
+  }
+}
+
+enum TypeStyleVariant { baseline, emphasized }
+
+class TypographyExample extends StatefulWidget {
+  const TypographyExample({super.key});
+
+  @override
+  State<TypographyExample> createState() => _TypographyExampleState();
+}
+
+class _TypographyExampleState extends State<TypographyExample> {
+  TypeStyleVariant _variant = TypeStyleVariant.baseline;
+
+  @override
+  Widget build(BuildContext context) {
+    final TextTheme textTheme = TextTheme.of(context);
+    final ColorScheme colorScheme = ColorScheme.of(context);
+    final emphasized = _variant == TypeStyleVariant.emphasized;
+
+    final styles = <(String, TextStyle?, TextStyle?)>[
+      (
+        'Display Large',
+        textTheme.displayLarge,
+        textTheme.displayLargeEmphasized,
+      ),
+      (
+        'Display Medium',
+        textTheme.displayMedium,
+        textTheme.displayMediumEmphasized,
+      ),
+      (
+        'Display Small',
+        textTheme.displaySmall,
+        textTheme.displaySmallEmphasized,
+      ),
+      (
+        'Headline Large',
+        textTheme.headlineLarge,
+        textTheme.headlineLargeEmphasized,
+      ),
+      (
+        'Headline Medium',
+        textTheme.headlineMedium,
+        textTheme.headlineMediumEmphasized,
+      ),
+      (
+        'Headline Small',
+        textTheme.headlineSmall,
+        textTheme.headlineSmallEmphasized,
+      ),
+      ('Title Large', textTheme.titleLarge, textTheme.titleLargeEmphasized),
+      ('Title Medium', textTheme.titleMedium, textTheme.titleMediumEmphasized),
+      ('Title Small', textTheme.titleSmall, textTheme.titleSmallEmphasized),
+      ('Label Large', textTheme.labelLarge, textTheme.labelLargeEmphasized),
+      ('Label Medium', textTheme.labelMedium, textTheme.labelMediumEmphasized),
+      ('Label Small', textTheme.labelSmall, textTheme.labelSmallEmphasized),
+      ('Body Large', textTheme.bodyLarge, textTheme.bodyLargeEmphasized),
+      ('Body Medium', textTheme.bodyMedium, textTheme.bodyMediumEmphasized),
+      ('Body Small', textTheme.bodySmall, textTheme.bodySmallEmphasized),
+    ];
+
+    return Scaffold(
+      appBar: AppBar(title: const Text('Typography')),
+      body: Column(
+        children: <Widget>[
+          Padding(
+            padding: const EdgeInsets.all(16),
+            child: SegmentedButton<TypeStyleVariant>(
+              segments: const <ButtonSegment<TypeStyleVariant>>[
+                ButtonSegment<TypeStyleVariant>(
+                  value: TypeStyleVariant.baseline,
+                  label: Text('Baseline'),
+                ),
+                ButtonSegment<TypeStyleVariant>(
+                  value: TypeStyleVariant.emphasized,
+                  label: Text('Emphasized'),
+                ),
+              ],
+              selected: <TypeStyleVariant>{_variant},
+              onSelectionChanged: (Set<TypeStyleVariant> selection) {
+                setState(() {
+                  _variant = selection.single;
+                });
+              },
+            ),
+          ),
+          Expanded(
+            child: ListView(
+              padding: const EdgeInsets.symmetric(horizontal: 16),
+              children: <Widget>[
+                for (final (
+                      String name,
+                      TextStyle? baseline,
+                      TextStyle? emphasizedStyle,
+                    )
+                    in styles)
+                  Card.outlined(
+                    child: Padding(
+                      padding: const EdgeInsets.all(16),
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        spacing: 8,
+                        children: <Widget>[
+                          Text(
+                            emphasized
+                                ? 'md.sys.typescale.emphasized'
+                                : 'md.sys.typescale',
+                            style: textTheme.labelSmall?.copyWith(
+                              color: colorScheme.onSurfaceVariant,
+                            ),
+                          ),
+                          Text(
+                            name,
+                            style: emphasized ? emphasizedStyle : baseline,
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+// #endregion body

packages/material_ui/example/test/typography/typography.0_test.dart

@@ -0,0 +1,40 @@
+// Copyright 2013 The Flutter Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter_test/flutter_test.dart';
+import 'package:material_ui/material_ui.dart';
+import 'package:material_ui_examples/typography/typography.0.dart' as example;
+
+void main() {
+  testWidgets('Toggles between baseline and emphasized text styles', (
+    WidgetTester tester,
+  ) async {
+    await tester.pumpWidget(const example.TypographyExampleApp());
+
+    final TextTheme textTheme = TextTheme.of(
+      tester.element(find.byType(example.TypographyExample)),
+    );
+    TextStyle? styleOf(String text) =>
+        tester.widget<Text>(find.text(text)).style;
+
+    expect(find.text('md.sys.typescale'), findsWidgets);
+    expect(find.text('md.sys.typescale.emphasized'), findsNothing);
+    expect(styleOf('Display Large'), textTheme.displayLarge);
+
+    await tester.tap(find.text('Emphasized'));
+    await tester.pumpAndSettle();
+
+    expect(find.text('md.sys.typescale'), findsNothing);
+    expect(find.text('md.sys.typescale.emphasized'), findsWidgets);
+    expect(styleOf('Display Large'), textTheme.displayLargeEmphasized);
+
+    await tester.scrollUntilVisible(find.text('Title Medium'), 200);
+    expect(styleOf('Title Medium'), textTheme.titleMediumEmphasized);
+
+    await tester.tap(find.text('Baseline'));
+    await tester.pumpAndSettle();
+
+    expect(styleOf('Title Medium'), textTheme.titleMedium);
+  });
+}