[material_ui] Add the Material shapes.

packages/material_ui/example/lib/main.dart

@@ -28,6 +28,7 @@ import 'progress_indicator/linear_progress_indicator.0.dart'
 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 '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;
@@ -161,6 +162,12 @@ class ExampleApp extends StatelessWidget {
       builder: (BuildContext context) =>
           const circular_progress_indicator_0.ProgressIndicatorExampleApp(),
     ),
+    _Example(
+      filepath: 'material_shapes/material_shapes.0.dart',
+      title: 'Material shapes',
+      builder: (BuildContext context) =>
+          const material_shapes_0.MaterialShapesExampleApp(),
+    ),
     _Example(
       filepath: 'dropdown_menu/dropdown_menu.1.dart',
       title: 'Menu',

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

@@ -0,0 +1,191 @@
+// 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 'dart:async';
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/physics.dart';
+import 'package:material_ui/material_ui.dart';
+
+/// Flutter code sample for [MaterialShapes].
+
+void main() {
+  runApp(const MaterialShapesExampleApp());
+}
+
+class MaterialShapesExampleApp extends StatelessWidget {
+  const MaterialShapesExampleApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      theme: ThemeData(colorSchemeSeed: const Color(0xFF6750A4)),
+      home: const MaterialShapesExample(),
+    );
+  }
+}
+
+class MaterialShapesExample extends StatefulWidget {
+  const MaterialShapesExample({super.key});
+
+  @override
+  State<MaterialShapesExample> createState() => _MaterialShapesExampleState();
+}
+
+class _MaterialShapesExampleState extends State<MaterialShapesExample>
+    with SingleTickerProviderStateMixin {
+  /// The shapes to morph through, in the order they are listed in
+  /// [MaterialShapes.all].
+  static final List<RoundedPolygon> _shapes = MaterialShapes.all;
+
+  /// A [Morph] from each shape in [_shapes] to the next one, wrapping around
+  /// from the last shape back to the first.
+  ///
+  /// These are built up front because a [Morph] computes the mapping between
+  /// its two shapes when it is constructed.
+  late final List<Morph> _morphs;
+
+  /// The morph that is currently animating.
+  late final ValueNotifier<Morph> _morph;
+
+  /// Drives the progress of [_morph].
+  ///
+  /// The controller is unbounded so that the springs below can overshoot past a
+  /// progress of 1, which carries the morph slightly beyond its end shape.
+  late final AnimationController _controller;
+
+  int _morphIndex = 0;
+
+  Timer? _startTimer;
+
+  final _bouncySimulation = SpringSimulation(
+    SpringDescription.withDampingRatio(ratio: 0.5, stiffness: 400, mass: 1),
+    0,
+    1,
+    5,
+    snapToEnd: true,
+  );
+
+  // Overshooting past a progress of 1 extrapolates a morph beyond its end
+  // shape, which distorts the heart into sharp spikes. The heart therefore
+  // animates with a spring that starts at rest and barely overshoots.
+  final _lessBouncySimulation = SpringSimulation(
+    SpringDescription.withDampingRatio(ratio: 0.8, stiffness: 300, mass: 1),
+    0,
+    1,
+    0,
+    snapToEnd: true,
+  );
+
+  /// The shape that the currently animating morph ends on.
+  RoundedPolygon get _targetShape =>
+      _shapes[(_morphIndex + 1) % _shapes.length];
+
+  @override
+  void initState() {
+    super.initState();
+
+    _morphs = <Morph>[
+      for (var i = 0; i < _shapes.length; i++)
+        Morph(_shapes[i], _shapes[(i + 1) % _shapes.length]),
+    ];
+    _morph = ValueNotifier<Morph>(_morphs.first);
+    _controller = AnimationController.unbounded(vsync: this);
+
+    // Hold the first shape for a moment so that it can be seen before it starts
+    // morphing.
+    _startTimer = Timer(const Duration(seconds: 1), _morphThroughShapes);
+  }
+
+  @override
+  void dispose() {
+    _startTimer?.cancel();
+    _controller.dispose();
+    _morph.dispose();
+    super.dispose();
+  }
+
+  /// Animates the morphs in [_morphs] one after another, looping back to the
+  /// first one after the last, until this widget is disposed.
+  ///
+  /// Waiting for each spring to settle, rather than advancing on a fixed
+  /// interval, keeps a morph from being cut short and popping to the next
+  /// shape.
+  Future<void> _morphThroughShapes() async {
+    while (mounted) {
+      _morph.value = _morphs[_morphIndex];
+      _controller.value = 0;
+      await _controller.animateWith(
+        _targetShape == MaterialShapes.heart
+            ? _lessBouncySimulation
+            : _bouncySimulation,
+      );
+      _morphIndex = (_morphIndex + 1) % _morphs.length;
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: const Text('Material Shapes Sample')),
+      body: Center(
+        child: ConstrainedBox(
+          constraints: const BoxConstraints(maxWidth: 300, maxHeight: 300),
+          child: AspectRatio(
+            aspectRatio: 1,
+            child: RepaintBoundary(
+              child: CustomPaint(
+                painter: _MorphPainter(
+                  morph: _morph,
+                  progress: _controller,
+                  color: Theme.of(context).colorScheme.primary,
+                ),
+                willChange: true,
+                child: const SizedBox.expand(),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _MorphPainter extends CustomPainter {
+  _MorphPainter({
+    required this.morph,
+    required this.progress,
+    required this.color,
+  }) : super(repaint: Listenable.merge(<Listenable>[morph, progress]));
+
+  final ValueListenable<Morph> morph;
+
+  final Animation<double> progress;
+
+  final Color color;
+
+  late final Paint _paint = Paint()
+    ..style = .fill
+    ..color = color;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    // Every shape in MaterialShapes is normalized, so its path fits in a one by
+    // one square that has to be scaled up to the size being painted.
+    canvas
+      ..save()
+      ..scale(size.width)
+      ..drawPath(morph.value.toPath(progress.value), _paint)
+      ..restore();
+  }
+
+  @override
+  bool shouldRepaint(_MorphPainter oldDelegate) {
+    return oldDelegate.morph != morph ||
+        oldDelegate.progress != progress ||
+        oldDelegate.color != color;
+  }
+}
+// #endregion body

packages/material_ui/example/test/main_test.dart

@@ -42,6 +42,8 @@ import 'package:material_ui_examples/progress_indicator/circular_progress_indica
     as circular_progress_indicator_0;
 import 'package:material_ui_examples/dropdown_menu/dropdown_menu.1.dart'
     as dropdown_menu_1;
+import 'package:material_ui_examples/material_shapes/material_shapes.0.dart'
+    as material_shapes_0;
 import 'package:material_ui_examples/navigation_bar/navigation_bar.1.dart'
     as navigation_bar_1;
 import 'package:material_ui_examples/navigation_rail/navigation_rail.0.dart'
@@ -87,6 +89,7 @@ const Map<String, Type> _examples = <String, Type>{
       linear_progress_indicator_0.ProgressIndicatorExampleApp,
   'Circular progress indicators':
       circular_progress_indicator_0.ProgressIndicatorExampleApp,
+  'Material shapes': material_shapes_0.MaterialShapesExampleApp,
   'Menu': dropdown_menu_1.DropdownMenuApp,
   'Navigation bar': navigation_bar_1.NavigationBarApp,
   'Navigation rail': navigation_rail_0.NavigationRailExampleApp,

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

@@ -0,0 +1,99 @@
+// 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/material_shapes/material_shapes.0.dart'
+    as example;
+
+void main() {
+  /// Comfortably longer than it takes either of the example's springs to
+  /// settle.
+  const Duration morphDuration = Duration(seconds: 3);
+
+  /// Samples points on a grid over the unit square that are clearly [inside]
+  /// (or outside) of [path].
+  List<Offset> samplePoints(Path path, {required bool inside}) {
+    const step = 0.09;
+    const margin = 0.02;
+
+    final List<Offset> points = <Offset>[];
+    for (var x = step; x < 1; x += step) {
+      for (var y = step; y < 1; y += step) {
+        final bool clearlyInOrOut = <Offset>[
+          Offset(x, y),
+          Offset(x - margin, y),
+          Offset(x + margin, y),
+          Offset(x, y - margin),
+          Offset(x, y + margin),
+        ].every((Offset point) => path.contains(point) == inside);
+        if (clearlyInOrOut) {
+          points.add(Offset(x, y));
+        }
+      }
+    }
+    return points;
+  }
+
+  testWidgets('Material shapes morph through every shape and wrap around', (
+    WidgetTester tester,
+  ) async {
+    await tester.pumpWidget(const example.MaterialShapesExampleApp());
+
+    expect(find.text('Material Shapes Sample'), findsOne);
+
+    final Finder shape = find.byWidgetPredicate(
+      (Widget widget) => widget is CustomPaint && widget.willChange,
+    );
+    expect(tester.getSize(shape), const Size.square(300));
+
+    final ThemeData theme = Theme.of(
+      tester.element(find.byType(example.MaterialShapesExample)),
+    );
+
+    // The circle is painted first, scaled up to fill the paint area, and is
+    // held still before the morphing starts.
+    expect(
+      shape,
+      paints
+        ..scale(x: 300)
+        ..path(
+          color: theme.colorScheme.primary,
+          style: PaintingStyle.fill,
+          includes: const <Offset>[Offset(0.5, 0.5)],
+          excludes: const <Offset>[Offset(0.1, 0.1)],
+        ),
+    );
+    expect(tester.hasRunningAnimations, isFalse);
+
+    // The morphing starts after holding the first shape for a second.
+    await tester.pump(const Duration(seconds: 1));
+
+    // Morph through the whole list of shapes, wrapping around from the last
+    // shape back to the first one.
+    final shapeCount = MaterialShapes.all.length;
+    for (var i = 0; i < shapeCount; i++) {
+      expect(tester.hasRunningAnimations, isTrue);
+      await tester.pump(morphDuration);
+
+      final RoundedPolygon target = MaterialShapes.all[(i + 1) % shapeCount];
+      final Path targetPath = target.toPath();
+      expect(
+        shape,
+        paints..path(
+          color: theme.colorScheme.primary,
+          style: PaintingStyle.fill,
+          includes: samplePoints(targetPath, inside: true),
+          excludes: samplePoints(targetPath, inside: false),
+        ),
+        reason:
+            'Morph $i should have settled on shape ${(i + 1) % shapeCount}.',
+      );
+    }
+
+    // Disposing the example stops the animation.
+    await tester.pumpWidget(const SizedBox());
+    expect(tester.hasRunningAnimations, isFalse);
+  });
+}

packages/material_ui/lib/material_ui.dart

@@ -120,6 +120,8 @@ export 'src/magnifier.dart';
 export 'src/material.dart';
 export 'src/material_button.dart';
 export 'src/material_localizations.dart';
+export 'src/material_shape_border.dart';
+export 'src/material_shapes.dart';
 export 'src/material_state.dart';
 export 'src/material_state_mixin.dart';
 export 'src/menu_anchor.dart';
@@ -166,6 +168,7 @@ export 'src/segmented_button_theme.dart';
 export 'src/selectable_text.dart';
 export 'src/selection_area.dart';
 export 'src/shadows.dart';
+export 'src/shapes/shapes.dart';
 export 'src/slider.dart';
 export 'src/slider_parts.dart';
 export 'src/slider_theme.dart';