Add border radius to Ink widgets (#8693)

* adds border radius to ink widgets. sets default ink border radius for material buttons with no background colors

* tidying up code

* add ink test stub

* remove unused import

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

@@ -289,12 +289,14 @@ class _MaterialButtonState extends State<MaterialButton> {
     final ButtonTheme buttonTheme = ButtonTheme.of(context);
     final double height = config.height ?? buttonTheme.height;
     final int elevation = (_highlight ? config.highlightElevation : config.elevation) ?? 0;
+    final bool hasColorOrElevation = (config.color != null || elevation > 0);
     Widget contents = new IconTheme.merge(
       context: context,
       data: new IconThemeData(
         color: textColor
       ),
       child: new InkWell(
+        borderRadius: hasColorOrElevation ? null : kMaterialEdges[MaterialType.button],
         highlightColor: config.highlightColor ?? theme.highlightColor,
         splashColor: config.splashColor ?? theme.splashColor,
         onTap: config.onPressed,
@@ -308,7 +310,7 @@ class _MaterialButtonState extends State<MaterialButton> {
         )
       )
     );
-    if (elevation > 0 || config.color != null) {
+    if (hasColorOrElevation) {
       contents = new Material(
         type: MaterialType.button,
         color: config.color,

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

@@ -40,10 +40,12 @@ class InkHighlight extends InkFeature {
     @required RenderBox referenceBox,
     @required Color color,
     BoxShape shape: BoxShape.rectangle,
+    BorderRadius borderRadius,
     RectCallback rectCallback,
     VoidCallback onRemoved,
   }) : _color = color,
        _shape = shape,
+       _borderRadius = borderRadius ?? BorderRadius.zero,
        _rectCallback = rectCallback,
        super(controller: controller, referenceBox: referenceBox, onRemoved: onRemoved) {
     assert(color != null);
@@ -61,6 +63,7 @@ class InkHighlight extends InkFeature {
   }
 
   final BoxShape _shape;
+  final BorderRadius _borderRadius;
   final RectCallback _rectCallback;
 
   Animation<int> _alpha;
@@ -110,7 +113,16 @@ class InkHighlight extends InkFeature {
         canvas.drawCircle(rect.center, Material.defaultSplashRadius, paint);
         break;
       case BoxShape.rectangle:
-        canvas.drawRect(rect, paint);
+        if (_borderRadius != BorderRadius.zero) {
+          final RRect clipRRect = new RRect.fromRectAndCorners(
+            rect,
+            topLeft: _borderRadius.topLeft, topRight: _borderRadius.topRight,
+            bottomLeft: _borderRadius.bottomLeft, bottomRight: _borderRadius.bottomRight,
+          );
+          canvas.drawRRect(clipRRect, paint);
+        } else {
+          canvas.drawRect(rect, paint);
+        }
         break;
     }
   }

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

@@ -80,14 +80,17 @@ class InkSplash extends InkFeature {
     Color color,
     bool containedInkWell: false,
     RectCallback rectCallback,
+    BorderRadius borderRadius = BorderRadius.zero,
     double radius,
     VoidCallback onRemoved,
   }) : _position = position,
        _color = color,
+       _borderRadius = borderRadius,
        _targetRadius = radius ?? _getTargetRadius(referenceBox, containedInkWell, rectCallback, position),
        _clipCallback = _getClipCallback(referenceBox, containedInkWell, rectCallback),
        _repositionToReferenceBox = !containedInkWell,
        super(controller: controller, referenceBox: referenceBox, onRemoved: onRemoved) {
+    assert(_borderRadius != null);
     _radiusController = new AnimationController(duration: _kUnconfirmedSplashDuration, vsync: controller.vsync)
       ..addListener(controller.markNeedsPaint)
       ..forward();
@@ -107,6 +110,7 @@ class InkSplash extends InkFeature {
   }
 
   final Point _position;
+  final BorderRadius _borderRadius;
   final double _targetRadius;
   final RectCallback _clipCallback;
   final bool _repositionToReferenceBox;
@@ -158,6 +162,26 @@ class InkSplash extends InkFeature {
     super.dispose();
   }
 
+  RRect _clipRRectFromRect(Rect rect) {
+    return new RRect.fromRectAndCorners(
+      rect,
+      topLeft: _borderRadius.topLeft, topRight: _borderRadius.topRight,
+      bottomLeft: _borderRadius.bottomLeft, bottomRight: _borderRadius.bottomRight,
+    );
+  }
+
+  void _clipCanvasWithRect(Canvas canvas, Rect rect, {Offset offset}) {
+    Rect clipRect = rect;
+    if (offset != null) {
+      clipRect = clipRect.shift(offset);
+    }
+    if (_borderRadius != BorderRadius.zero) {
+      canvas.clipRRect(_clipRRectFromRect(clipRect));
+    } else {
+      canvas.clipRect(clipRect);
+    }
+  }
+
   @override
   void paintFeature(Canvas canvas, Matrix4 transform) {
     final Paint paint = new Paint()..color = _color.withAlpha(_alpha.value);
@@ -168,14 +192,15 @@ class InkSplash extends InkFeature {
     if (originOffset == null) {
       canvas.save();
       canvas.transform(transform.storage);
-      if (_clipCallback != null)
-        canvas.clipRect(_clipCallback());
+      if (_clipCallback != null) {
+        _clipCanvasWithRect(canvas, _clipCallback());
+      }
       canvas.drawCircle(center, _radius.value, paint);
       canvas.restore();
     } else {
       if (_clipCallback != null) {
         canvas.save();
-        canvas.clipRect(_clipCallback().shift(originOffset));
+        _clipCanvasWithRect(canvas, _clipCallback(), offset: originOffset);
       }
       canvas.drawCircle(center + originOffset, _radius.value, paint);
       if (_clipCallback != null)

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

@@ -41,6 +41,7 @@ class InkResponse extends StatefulWidget {
     this.containedInkWell: false,
     this.highlightShape: BoxShape.circle,
     this.radius,
+    this.borderRadius: BorderRadius.zero,
     this.highlightColor,
     this.splashColor,
   }) : super(key: key);
@@ -73,6 +74,9 @@ class InkResponse extends StatefulWidget {
   /// The radius of the ink splash.
   final double radius;
 
+  /// The clipping radius of the containing rect.
+  final BorderRadius borderRadius;
+
   /// The highlight color of the ink response. If this property is null then the
   /// highlight color of the theme will be used.
   final Color highlightColor;
@@ -128,6 +132,7 @@ class _InkResponseState<T extends InkResponse> extends State<T> {
           referenceBox: referenceBox,
           color: config.highlightColor ?? Theme.of(context).highlightColor,
           shape: config.highlightShape,
+          borderRadius: config.borderRadius,
           rectCallback: config.getRectCallback(referenceBox),
           onRemoved: () {
             assert(_lastHighlight != null);
@@ -157,6 +162,7 @@ class _InkResponseState<T extends InkResponse> extends State<T> {
       containedInkWell: config.containedInkWell,
       rectCallback: config.containedInkWell ? rectCallback : null,
       radius: config.radius,
+      borderRadius: config.borderRadius ?? BorderRadius.zero,
       onRemoved: () {
         if (_splashes != null) {
           assert(_splashes.contains(splash));
@@ -256,6 +262,7 @@ class InkWell extends InkResponse {
     ValueChanged<bool> onHighlightChanged,
     Color highlightColor,
     Color splashColor,
+    BorderRadius borderRadius,
   }) : super(
     key: key,
     child: child,
@@ -267,5 +274,6 @@ class InkWell extends InkResponse {
     highlightShape: BoxShape.rectangle,
     highlightColor: highlightColor,
     splashColor: splashColor,
+    borderRadius: borderRadius,
   );
 }

packages/flutter/test/widgets/ink_test.dart

+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:flutter_test/src/widget_tester.dart';
+
+void main() {
+  testWidgets('Does the ink widget render a border radius', (WidgetTester tester) async {
+    final Color highlightColor = new Color(0xAAFF0000);
+    final Color splashColor = new Color(0xAA0000FF);
+
+    final Key materialKey = new UniqueKey();
+    final Key inkKey = new UniqueKey();
+    final BorderRadius borderRadius = new BorderRadius.circular(6.0);
+
+    await tester.pumpWidget(
+      new Material(
+        key: materialKey,
+        child: new Center(
+          child: new Container(
+            width: 200.0,
+            height: 60.0,
+            child: new InkWell(
+              key: inkKey,
+              borderRadius: borderRadius,
+              highlightColor: highlightColor,
+              splashColor: splashColor,
+              onTap: () {},
+            ),
+          ),
+        ),
+      ),
+    );
+
+    final Point center = tester.getCenter(find.byKey(materialKey));
+    final TestGesture gesture = await tester.startGesture(center);
+    await tester.pump(new Duration(milliseconds: 200));
+
+    // TODO(ianh) - stub. needs to be completed.
+
+    await gesture.up();
+  });
+}
\ No newline at end of file