Adding proper accommodation for textScaleFactor in chips, and StadiumBorder border. (#12533)

In order to allow chips to be properly drawn when they expand in size (without
using IntrinsicHeight), I needed a BoxDecoration shape that would be dependent
upon the rendered height of the widget. This seemed to be pretty generally
useful, so I added a new ShapeDecoration called StadiumBorder. It uses the
minimum dimension to adjust the BorderRadius of a rounded rect in the shape
decoration.

I also converted some uses of BoxShape to be case statements, updated the
chips to use the StadiumBorder decoration, and updated some of the metrics to match
the Material spec, as well as implementing lerping to and from StadiumBorder.

examples/flutter_gallery/lib/demo/material/chip_demo.dart

@@ -28,7 +28,7 @@ class _ChipDemoState extends State<ChipDemo> {
       ),
       const Chip(
         avatar: const CircleAvatar(child: const Text('B')),
-        label: const Text('Blueberry')
+        label: const Text('Blueberry'),
       ),
     ];
 

packages/flutter/lib/painting.dart

@@ -37,6 +37,7 @@ export 'src/painting/images.dart';
 export 'src/painting/matrix_utils.dart';
 export 'src/painting/rounded_rectangle_border.dart';
 export 'src/painting/shape_decoration.dart';
+export 'src/painting/stadium_border.dart';
 export 'src/painting/text_painter.dart';
 export 'src/painting/text_span.dart';
 export 'src/painting/text_style.dart';

packages/flutter/lib/src/material/chip.dart

@@ -4,6 +4,7 @@
 
 import 'package:flutter/foundation.dart';
 import 'package:flutter/widgets.dart';
+import 'package:flutter/painting.dart';
 
 import 'colors.dart';
 import 'debug.dart';
@@ -11,17 +12,6 @@ import 'feedback.dart';
 import 'icons.dart';
 import 'tooltip.dart';
 
-const double _kChipHeight = 32.0;
-const double _kAvatarDiamater = _kChipHeight;
-
-const TextStyle _kLabelStyle = const TextStyle(
-  inherit: false,
-  fontSize: 13.0,
-  fontWeight: FontWeight.w400,
-  color: Colors.black87,
-  textBaseline: TextBaseline.alphabetic,
-);
-
 /// A material design chip.
 ///
 /// Chips represent complex entities in small blocks, such as a contact.
@@ -29,7 +19,8 @@ const TextStyle _kLabelStyle = const TextStyle(
 /// Supplying a non-null [onDeleted] callback will cause the chip to include a
 /// button for deleting the chip.
 ///
-/// Requires one of its ancestors to be a [Material] widget.
+/// Requires one of its ancestors to be a [Material] widget. The [label]
+/// and [border] arguments must not be null.
 ///
 /// ## Sample code
 ///
@@ -57,11 +48,25 @@ class Chip extends StatelessWidget {
     this.avatar,
     @required this.label,
     this.onDeleted,
-    this.labelStyle,
+    TextStyle labelStyle,
     this.deleteButtonTooltipMessage,
     this.backgroundColor,
     this.deleteIconColor,
-  }) : super(key: key);
+    this.border: const StadiumBorder(),
+  }) : assert(label != null),
+       assert(border != null),
+       labelStyle = labelStyle ?? _defaultLabelStyle,
+       super(key: key);
+
+  static const TextStyle _defaultLabelStyle = const TextStyle(
+    inherit: false,
+    fontSize: 13.0,
+    fontWeight: FontWeight.w400,
+    color: Colors.black87,
+    textBaseline: TextBaseline.alphabetic,
+  );
+
+  static const double _chipHeight = 32.0;
 
   /// A widget to display prior to the chip's label.
   ///
@@ -90,6 +95,11 @@ class Chip extends StatelessWidget {
   /// widget's label.
   final Color backgroundColor;
 
+  /// The border to draw around the chip.
+  ///
+  /// Defaults to a [StadiumBorder].
+  final ShapeBorder border;
+
   /// Color for delete icon, the default being black.
   ///
   /// This has no effect when [onDelete] is null since no delete icon will be
@@ -116,8 +126,8 @@ class Chip extends StatelessWidget {
       children.add(new ExcludeSemantics(
         child: new Container(
           margin: const EdgeInsetsDirectional.only(end: 8.0),
-          width: _kAvatarDiamater,
-          height: _kAvatarDiamater,
+          width: _chipHeight,
+          height: _chipHeight,
           child: avatar,
         ),
       ));
@@ -125,7 +135,8 @@ class Chip extends StatelessWidget {
 
     children.add(new Flexible(
       child: new DefaultTextStyle(
-        style: labelStyle ?? _kLabelStyle,
+        overflow: TextOverflow.ellipsis,
+        style: labelStyle,
         child: label,
       ),
     ));
@@ -135,12 +146,14 @@ class Chip extends StatelessWidget {
       children.add(new GestureDetector(
         onTap: Feedback.wrapForTap(onDeleted, context),
         child: new Tooltip(
+          // TODO(gspencer): Internationalize this text.
+          // https://github.com/flutter/flutter/issues/12378
           message: deleteButtonTooltipMessage ?? 'Delete "$label"',
           child: new Container(
             padding: const EdgeInsets.symmetric(horizontal: 4.0),
             child: new Icon(
               Icons.cancel,
-              size: 18.0,
+              size: 24.0,
               color: deleteIconColor ?? Colors.black54,
             ),
           ),
@@ -151,17 +164,21 @@ class Chip extends StatelessWidget {
     return new Semantics(
       container: true,
       child: new Container(
-        height: _kChipHeight,
+        constraints: const BoxConstraints(minHeight: _chipHeight),
         padding: new EdgeInsetsDirectional.only(start: startPadding, end: endPadding),
-        decoration: new BoxDecoration(
+        decoration: new ShapeDecoration(
           color: backgroundColor ?? Colors.grey.shade300,
-          borderRadius: new BorderRadius.circular(16.0),
+          shape: border,
         ),
-        child: new Row(
-          children: children,
-          mainAxisSize: MainAxisSize.min,
+        child: new Center(
+          widthFactor: 1.0,
+          heightFactor: 1.0,
+          child: new Row(
+            children: children,
+            mainAxisSize: MainAxisSize.min,
+          ),
         ),
       ),
     );
   }
-}
+}
\ No newline at end of file

packages/flutter/lib/src/painting/box_border.dart

@@ -475,16 +475,19 @@ class Border extends BoxBorder {
         case BorderStyle.none:
           return;
         case BorderStyle.solid:
-          if (shape == BoxShape.circle) {
-            assert(borderRadius == null, 'A borderRadius can only be given for rectangular boxes.');
-            BoxBorder._paintUniformBorderWithCircle(canvas, rect, top);
-            return;
+          switch (shape) {
+            case BoxShape.circle:
+              assert(borderRadius == null, 'A borderRadius can only be given for rectangular boxes.');
+              BoxBorder._paintUniformBorderWithCircle(canvas, rect, top);
+              break;
+            case BoxShape.rectangle:
+              if (borderRadius != null) {
+                BoxBorder._paintUniformBorderWithRadius(canvas, rect, top, borderRadius);
+                return;
+              }
+              BoxBorder._paintUniformBorderWithRectangle(canvas, rect, top);
+              break;
           }
-          if (borderRadius != null) {
-            BoxBorder._paintUniformBorderWithRadius(canvas, rect, top, borderRadius);
-            return;
-          }
-          BoxBorder._paintUniformBorderWithRectangle(canvas, rect, top);
           return;
       }
     }
@@ -777,16 +780,19 @@ class BorderDirectional extends BoxBorder {
         case BorderStyle.none:
           return;
         case BorderStyle.solid:
-          if (shape == BoxShape.circle) {
-            assert(borderRadius == null, 'A borderRadius can only be given for rectangular boxes.');
-            BoxBorder._paintUniformBorderWithCircle(canvas, rect, top);
-            return;
-          }
-          if (borderRadius != null) {
-            BoxBorder._paintUniformBorderWithRadius(canvas, rect, top, borderRadius);
-            return;
+          switch (shape) {
+            case BoxShape.circle:
+              assert(borderRadius == null, 'A borderRadius can only be given for rectangular boxes.');
+              BoxBorder._paintUniformBorderWithCircle(canvas, rect, top);
+              break;
+            case BoxShape.rectangle:
+              if (borderRadius != null) {
+                BoxBorder._paintUniformBorderWithRadius(canvas, rect, top, borderRadius);
+                return;
+              }
+              BoxBorder._paintUniformBorderWithRectangle(canvas, rect, top);
+              break;
           }
-          BoxBorder._paintUniformBorderWithRectangle(canvas, rect, top);
           return;
       }
     }

packages/flutter/lib/src/painting/circle_border.dart

@@ -25,7 +25,7 @@ class CircleBorder extends ShapeBorder {
   /// Create a circle border.
   ///
   /// The [side] argument must not be null.
-  const CircleBorder([ this.side = BorderSide.none ]) : assert(side != null);
+  const CircleBorder({ this.side = BorderSide.none }) : assert(side != null);
 
   /// The style of this border.
   final BorderSide side;
@@ -36,19 +36,19 @@ class CircleBorder extends ShapeBorder {
   }
 
   @override
-  ShapeBorder scale(double t) => new CircleBorder(side.scale(t));
+  ShapeBorder scale(double t) => new CircleBorder(side: side.scale(t));
 
   @override
   ShapeBorder lerpFrom(ShapeBorder a, double t) {
     if (a is CircleBorder)
-      return new CircleBorder(BorderSide.lerp(a.side, side, t));
+      return new CircleBorder(side: BorderSide.lerp(a.side, side, t));
     return super.lerpFrom(a, t);
   }
 
   @override
   ShapeBorder lerpTo(ShapeBorder b, double t) {
     if (b is CircleBorder)
-      return new CircleBorder(BorderSide.lerp(side, b.side, t));
+      return new CircleBorder(side: BorderSide.lerp(side, b.side, t));
     return super.lerpTo(b, t);
   }
 

packages/flutter/lib/src/painting/shape_decoration.dart

@@ -94,7 +94,7 @@ class ShapeDecoration extends Decoration {
       case BoxShape.circle:
         if (source.border != null) {
           assert(source.border.isUniform);
-          shape = new CircleBorder(source.border.top);
+          shape = new CircleBorder(side: source.border.top);
         } else {
           shape = const CircleBorder();
         }

packages/flutter/lib/src/rendering/proxy_box.dart

@@ -361,7 +361,7 @@ class RenderLimitedBox extends RenderProxyBox {
 
 /// Attempts to size the child to a specific aspect ratio.
 ///
-/// The render object first tries the largest width permited by the layout
+/// The render object first tries the largest width permitted by the layout
 /// constraints. The height of the render object is determined by applying the
 /// given aspect ratio to the width, expressed as a ratio of width to height.
 ///
@@ -1372,12 +1372,15 @@ class RenderPhysicalModel extends _RenderCustomClip<RRect> {
   @override
   RRect get _defaultClip {
     assert(hasSize);
-    if (_shape == BoxShape.rectangle) {
-      return (borderRadius ?? BorderRadius.zero).toRRect(Offset.zero & size);
-    } else {
-      final Rect rect = Offset.zero & size;
-      return new RRect.fromRectXY(rect, rect.width / 2, rect.height / 2);
+    assert(_shape != null);
+    switch (_shape) {
+      case BoxShape.rectangle:
+        return (borderRadius ?? BorderRadius.zero).toRRect(Offset.zero & size);
+      case BoxShape.circle:
+        final Rect rect = Offset.zero & size;
+        return new RRect.fromRectXY(rect, rect.width / 2, rect.height / 2);
     }
+    return null;
   }
 
   @override

packages/flutter/lib/src/widgets/basic.dart

@@ -1885,7 +1885,7 @@ class _OffstageElement extends SingleChildRenderObjectElement {
 
 /// A widget that attempts to size the child to a specific aspect ratio.
 ///
-/// The widget first tries the largest width permited by the layout
+/// The widget first tries the largest width permitted by the layout
 /// constraints. The height of the widget is determined by applying the
 /// given aspect ratio to the width, expressed as a ratio of width to height.
 ///

packages/flutter/lib/src/widgets/implicit_animations.dart

@@ -36,12 +36,17 @@ class BoxConstraintsTween extends Tween<BoxConstraints> {
 /// This class specializes the interpolation of [Tween<BoxConstraints>] to use
 /// [Decoration.lerp].
 ///
-/// Typically this will only have useful results if the [begin] and [end]
-/// decorations have the same type; decorations of differing types generally do
-/// not have a useful animation defined, and will just jump to the [end]
-/// immediately.
+/// For [ShapeDecoration]s which know how to [ShapeDecoration.lerpTo] or
+/// [ShapeDecoration.lerpFrom] each other, this will produce a smooth
+/// interpolation between decorations.
 ///
-/// See [Tween] for a discussion on how to use interpolation objects.
+/// See also:
+///   * [Tween] for a discussion on how to use interpolation objects.
+///   * [ShapeDecoration], [RoundedRectangleBorder], [CircleBorder], and
+///     [StadiumBorder] for examples of shape borders that can be smoothly
+///     interpolated.
+///   * [BoxBorder] for a border that can only be smoothly interpolated between other
+///     [BoxBorder]s.
 class DecorationTween extends Tween<Decoration> {
   /// Creates a decoration tween.
   ///

packages/flutter/test/material/chip_test.dart

@@ -254,6 +254,159 @@ void main() {
     expect(tester.getCenter(find.text('ABC')).dx, lessThan(tester.getCenter(find.byType(Icon)).dx));
   });
 
+  testWidgets('Chip responds to textScaleFactor', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      new MaterialApp(
+        home: new Material(
+          child: new Column(
+            children: <Widget>[
+              const Chip(
+                avatar: const CircleAvatar(
+                    child: const Text('A')
+                ),
+                label: const Text('Chip A'),
+              ),
+              const Chip(
+                avatar: const CircleAvatar(
+                    child: const Text('B')
+                ),
+                label: const Text('Chip B'),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+
+    // TODO(gspencer): Update this test when the font metric bug is fixed to remove the anyOfs.
+    // https://github.com/flutter/flutter/issues/12357
+    expect(
+      tester.getSize(find.text('Chip A')),
+      anyOf(const Size(79.0, 13.0), const Size(78.0, 13.0)),
+    );
+    expect(
+      tester.getSize(find.text('Chip B')),
+      anyOf(const Size(79.0, 13.0), const Size(78.0, 13.0)),
+    );
+    expect(
+      tester.getSize(find.byType(Chip).first),
+      anyOf(const Size(131.0, 32.0), const Size(130.0, 32.0))
+    );
+    expect(
+      tester.getSize(find.byType(Chip).last),
+      anyOf(const Size(131.0, 32.0), const Size(130.0, 32.0))
+    );
+
+    await tester.pumpWidget(
+      new MaterialApp(
+        home: new MediaQuery(
+          data: const MediaQueryData(textScaleFactor: 3.0),
+          child: new Material(
+            child: new Column(
+              children: <Widget>[
+                const Chip(
+                  avatar: const CircleAvatar(
+                      child: const Text('A')
+                  ),
+                  label: const Text('Chip A'),
+                ),
+                const Chip(
+                  avatar: const CircleAvatar(
+                      child: const Text('B')
+                  ),
+                  label: const Text('Chip B'),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+
+    // TODO(gspencer): Update this test when the font metric bug is fixed to remove the anyOfs.
+    // https://github.com/flutter/flutter/issues/12357
+    expect(tester.getSize(find.text('Chip A')), anyOf(const Size(234.0, 39.0), const Size(235.0, 39.0)));
+    expect(tester.getSize(find.text('Chip B')), anyOf(const Size(234.0, 39.0), const Size(235.0, 39.0)));
+    expect(tester.getSize(find.byType(Chip).first).width, anyOf(286.0, 287.0));
+    expect(tester.getSize(find.byType(Chip).first).height, equals(39.0));
+    expect(tester.getSize(find.byType(Chip).last).width, anyOf(286.0, 287.0));
+    expect(tester.getSize(find.byType(Chip).last).height, equals(39.0));
+
+    // Check that individual text scales are taken into account.
+    await tester.pumpWidget(
+      new MaterialApp(
+        home: new Material(
+          child: new Column(
+            children: <Widget>[
+              const Chip(
+                avatar: const CircleAvatar(
+                  child: const Text('A')
+                ),
+                label: const Text('Chip A', textScaleFactor: 3.0),
+              ),
+              const Chip(
+                avatar: const CircleAvatar(
+                  child: const Text('B')
+                ),
+                label: const Text('Chip B'),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+
+    // TODO(gspencer): Update this test when the font metric bug is fixed to remove the anyOfs.
+    // https://github.com/flutter/flutter/issues/12357
+    expect(tester.getSize(find.text('Chip A')), anyOf(const Size(234.0, 39.0), const Size(235.0, 39.0)));
+    expect(tester.getSize(find.text('Chip B')), anyOf(const Size(78.0, 13.0), const Size(79.0, 13.0)));
+    expect(tester.getSize(find.byType(Chip).first).width, anyOf(286.0, 287.0));
+    expect(tester.getSize(find.byType(Chip).first).height, equals(39.0));
+    expect(tester.getSize(find.byType(Chip).last), anyOf(const Size(130.0, 32.0), const Size(131.0, 32.0)));
+  });
+
+  testWidgets('Labels can be non-text widgets', (WidgetTester tester) async {
+    final Key keyA = new GlobalKey();
+    final Key keyB = new GlobalKey();
+    await tester.pumpWidget(
+      new MaterialApp(
+        home: new Material(
+          child: new Column(
+            children: <Widget>[
+              new Chip(
+                avatar: const CircleAvatar(
+                  child: const Text('A')
+                ),
+                label: new Text('Chip A', key: keyA),
+              ),
+              new Chip(
+                avatar: const CircleAvatar(
+                  child: const Text('B')
+                ),
+                label: new Container(key: keyB, width: 10.0, height: 10.0),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+
+    // TODO(gspencer): Update this test when the font metric bug is fixed to remove the anyOfs.
+    // https://github.com/flutter/flutter/issues/12357
+    expect(
+      tester.getSize(find.byKey(keyA)),
+      anyOf(const Size(79.0, 13.0), const Size(78.0, 13.0)),
+    );
+    expect(tester.getSize(find.byKey(keyB)), const Size(10.0, 10.0));
+    expect(
+      tester.getSize(find.byType(Chip).first),
+      anyOf(const Size(131.0, 32.0), const Size(130.0, 32.0)),
+    );
+    expect(tester.getSize(find.byType(Chip).last), const Size(62.0, 32.0));
+  });
+
+
+
   testWidgets('Chip padding - LTR', (WidgetTester tester) async {
     final GlobalKey keyA = new GlobalKey();
     final GlobalKey keyB = new GlobalKey();
@@ -281,10 +434,10 @@ void main() {
     );
     expect(tester.getTopLeft(find.byKey(keyA)), const Offset(0.0, 284.0));
     expect(tester.getBottomRight(find.byKey(keyA)), const Offset(32.0, 316.0));
-    expect(tester.getTopLeft(find.byKey(keyB)), const Offset(40.0, 284.0));
-    expect(tester.getBottomRight(find.byKey(keyB)), const Offset(774.0, 316.0));
-    expect(tester.getTopLeft(find.byType(Icon)), const Offset(778.0, 291.0));
-    expect(tester.getBottomRight(find.byType(Icon)), const Offset(796.0, 309.0));
+    expect(tester.getTopLeft(find.byKey(keyB)), const Offset(40.0, 0.0));
+    expect(tester.getBottomRight(find.byKey(keyB)), const Offset(768.0, 600.0));
+    expect(tester.getTopLeft(find.byType(Icon)), const Offset(772.0, 288.0));
+    expect(tester.getBottomRight(find.byType(Icon)), const Offset(796.0, 312.0));
   });
 
   testWidgets('Chip padding - RTL', (WidgetTester tester) async {
@@ -314,9 +467,9 @@ void main() {
     );
     expect(tester.getTopRight(find.byKey(keyA)), const Offset(800.0 - 0.0, 284.0));
     expect(tester.getBottomLeft(find.byKey(keyA)), const Offset(800.0 - 32.0, 316.0));
-    expect(tester.getTopRight(find.byKey(keyB)), const Offset(800.0 - 40.0, 284.0));
-    expect(tester.getBottomLeft(find.byKey(keyB)), const Offset(800.0 - 774.0, 316.0));
-    expect(tester.getTopRight(find.byType(Icon)), const Offset(800.0 - 778.0, 291.0));
-    expect(tester.getBottomLeft(find.byType(Icon)), const Offset(800.0 - 796.0, 309.0));
+    expect(tester.getTopRight(find.byKey(keyB)), const Offset(800.0 - 40.0, 0.0));
+    expect(tester.getBottomLeft(find.byKey(keyB)), const Offset(800.0 - 768.0, 600.0));
+    expect(tester.getTopRight(find.byType(Icon)), const Offset(800.0 - 772.0, 288.0));
+    expect(tester.getBottomLeft(find.byType(Icon)), const Offset(800.0 - 796.0, 312.0));
   });
 }

packages/flutter/test/painting/circle_border_test.dart

@@ -10,9 +10,9 @@ import 'common_matchers.dart';
 
 void main() {
   test('CircleBorder', () {
-    final CircleBorder c10 = const CircleBorder(const BorderSide(width: 10.0));
-    final CircleBorder c15 = const CircleBorder(const BorderSide(width: 15.0));
-    final CircleBorder c20 = const CircleBorder(const BorderSide(width: 20.0));
+    final CircleBorder c10 = const CircleBorder(side: const BorderSide(width: 10.0));
+    final CircleBorder c15 = const CircleBorder(side: const BorderSide(width: 15.0));
+    final CircleBorder c20 = const CircleBorder(side: const BorderSide(width: 20.0));
     expect(c10.dimensions, const EdgeInsets.all(10.0));
     expect(c10.scale(2.0), c20);
     expect(c20.scale(0.5), c10);

packages/flutter/test/painting/rounded_rectangle_border_test.dart

@@ -38,7 +38,7 @@ void main() {
 
   test('RoundedRectangleBorder and CircleBorder', () {
     final RoundedRectangleBorder r = new RoundedRectangleBorder(side: BorderSide.none, borderRadius: new BorderRadius.circular(10.0));
-    final CircleBorder c = const CircleBorder(BorderSide.none);
+    final CircleBorder c = const CircleBorder(side: BorderSide.none);
     final Rect rect = new Rect.fromLTWH(0.0, 0.0, 100.0, 20.0); // center is x=40..60 y=10
     final Matcher looksLikeR = isPathThat(
       includes: const <Offset>[ const Offset(30.0, 10.0), const Offset(50.0, 10.0), ],

packages/flutter/test/painting/shape_decoration_test.dart

@@ -21,7 +21,7 @@ void main() {
     expect(() => new ShapeDecoration(color: colorR, shape: null), throwsAssertionError);
     expect(
       new ShapeDecoration.fromBoxDecoration(const BoxDecoration(shape: BoxShape.circle)),
-      const ShapeDecoration(shape: const CircleBorder(BorderSide.none)),
+      const ShapeDecoration(shape: const CircleBorder(side: BorderSide.none)),
     );
     expect(
       new ShapeDecoration.fromBoxDecoration(new BoxDecoration(shape: BoxShape.rectangle, borderRadius: new BorderRadiusDirectional.circular(100.0))),
@@ -29,7 +29,7 @@ void main() {
     );
     expect(
       new ShapeDecoration.fromBoxDecoration(new BoxDecoration(shape: BoxShape.circle, border: new Border.all(color: colorG))),
-      new ShapeDecoration(shape: new CircleBorder(new BorderSide(color: colorG))),
+      new ShapeDecoration(shape: new CircleBorder(side: new BorderSide(color: colorG))),
     );
     expect(
       new ShapeDecoration.fromBoxDecoration(new BoxDecoration(shape: BoxShape.rectangle, border: new Border.all(color: colorR))),