flutter · jonahwilliams · Jul 3, 2018 · May 25, 2018 · May 25, 2018 · May 29, 2018
diff --git a/packages/flutter/lib/src/material/button.dart b/packages/flutter/lib/src/material/button.dart
@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import 'package:flutter/foundation.dart';
+import 'package:flutter/rendering.dart';
 import 'package:flutter/widgets.dart';
 
 import 'button_theme.dart';
@@ -11,6 +12,7 @@ import 'constants.dart';
 import 'ink_well.dart';
 import 'material.dart';
 import 'theme.dart';
+import 'theme_data.dart';
 
 /// Creates a button based on [Semantics], [Material], and [InkWell]
 /// widgets.
@@ -38,13 +40,14 @@ class RawMaterialButton extends StatefulWidget {
     this.elevation = 2.0,
     this.highlightElevation = 8.0,
     this.disabledElevation = 0.0,
-    this.outerPadding,
     this.padding = EdgeInsets.zero,
     this.constraints = const BoxConstraints(minWidth: 88.0, minHeight: 36.0),
     this.shape = const RoundedRectangleBorder(),
     this.animationDuration = kThemeChangeDuration,
+    MaterialTapTargetSize materialTapTargetSize,
     this.child,
-  }) : assert(shape != null),
+  }) : this.materialTapTargetSize = materialTapTargetSize ?? MaterialTapTargetSize.padded,
+       assert(shape != null),
        assert(elevation != null),
        assert(highlightElevation != null),
        assert(disabledElevation != null),
@@ -58,10 +61,6 @@ class RawMaterialButton extends StatefulWidget {
   /// If this is set to null, the button will be disabled, see [enabled].
   final VoidCallback onPressed;
 
-  /// Padding to increase the size of the gesture detector which doesn't
-  /// increase the visible material of the button.
-  final EdgeInsets outerPadding;
-
   /// Called by the underlying [InkWell] widget's [InkWell.onHighlightChanged]
   /// callback.
   final ValueChanged<bool> onHighlightChanged;
@@ -138,6 +137,15 @@ class RawMaterialButton extends StatefulWidget {
   /// property to a non-null value.
   bool get enabled => onPressed != null;
 
+  /// Configures the minimum size of the tap target.
+  ///
+  /// Defaults to [MaterialTapTargetSize.padded].
+  ///
+  /// See also:
+  ///
+  ///   * [MaterialTapTargetSize], for a description of how this affects tap targets.
+  final MaterialTapTargetSize materialTapTargetSize;
+
   @override
   _RawMaterialButtonState createState() => new _RawMaterialButtonState();
 }
@@ -186,18 +194,23 @@ class _RawMaterialButtonState extends State<RawMaterialButton> {
         ),
       ),
     );
-
-    if (widget.outerPadding != null) {
-      result = new GestureDetector(
-        behavior: HitTestBehavior.translucent,
-        excludeFromSemantics: true,
-        onTap: widget.onPressed,
-        child: new Padding(
-          padding: widget.outerPadding,
-          child: result
-        ),
-      );
+    BoxConstraints constraints;
+    switch (widget.materialTapTargetSize) {
+      case MaterialTapTargetSize.padded:
+        constraints = const BoxConstraints(minWidth: 48.0, minHeight: 48.0);
+        break;
+      case MaterialTapTargetSize.shrinkWrap:
+        constraints = const BoxConstraints();
+        break;
     }
+    result = new _ButtonRedirectingHitDetectionWidget(
+      constraints: constraints,
+      child: new Center(
+        child: result,
+        widthFactor: 1.0,
+        heightFactor: 1.0,
+      ),
+    );
 
     return new Semantics(
       container: true,
@@ -248,6 +261,7 @@ class MaterialButton extends StatelessWidget {
     this.minWidth,
     this.height,
     this.padding,
+    this.materialTapTargetSize,
     @required this.onPressed,
     this.child
   }) : super(key: key);
@@ -353,6 +367,15 @@ class MaterialButton extends StatelessWidget {
   /// {@macro flutter.widgets.child}
   final Widget child;
 
+  /// Configures the minimum size of the tap target.
+  ///
+  /// Defaults to [ThemeData.materialTapTargetSize].
+  ///
+  /// See also:
+  ///
+  ///   * [MaterialTapTargetSize], for a description of how this affects tap targets.
+  final MaterialTapTargetSize materialTapTargetSize;
+
   /// Whether the button is enabled or disabled. Buttons are disabled by default. To
   /// enable a button, set its [onPressed] property to a non-null value.
   bool get enabled => onPressed != null;
@@ -412,6 +435,7 @@ class MaterialButton extends StatelessWidget {
       ),
       shape: buttonTheme.shape,
       child: child,
+      materialTapTargetSize: materialTapTargetSize ?? theme.materialTapTargetSize,
     );
   }
 
@@ -421,3 +445,38 @@ class MaterialButton extends StatelessWidget {
     properties.add(new FlagProperty('enabled', value: enabled, ifFalse: 'disabled'));
   }
 }
+
+/// Redirects the position passed to [RenderBox.hitTest] to the center of the widget.
+///
+/// The primary purpose of this widget is to allow padding around [Material] widgets
+/// to trigger the child ink feature without increasing the size of the material.
+class _ButtonRedirectingHitDetectionWidget extends SingleChildRenderObjectWidget {
+  const _ButtonRedirectingHitDetectionWidget({
+    Key key,
+    Widget child,
+    this.constraints
+  }) : super(key: key, child: child);
+
+  final BoxConstraints constraints;
+
+  @override
+  RenderObject createRenderObject(BuildContext context) {
+    return new _RenderButtonRedirectingHitDetection(constraints);
+  }
+
+  @override
+  void updateRenderObject(BuildContext context, covariant _RenderButtonRedirectingHitDetection renderObject) {
+    renderObject.additionalConstraints = constraints;
+  }
+}
+
+class _RenderButtonRedirectingHitDetection extends RenderConstrainedBox {
+  _RenderButtonRedirectingHitDetection (BoxConstraints additionalConstraints) : super(additionalConstraints: additionalConstraints);
+
+  @override
+  bool hitTest(HitTestResult result, {Offset position}) {
+    if (!size.contains(position))
+      return false;
+    return child.hitTest(result, position: size.center(Offset.zero));
+  }
+}
diff --git a/packages/flutter/lib/src/material/checkbox.dart b/packages/flutter/lib/src/material/checkbox.dart
@@ -10,6 +10,7 @@ import 'package:flutter/widgets.dart';
 import 'constants.dart';
 import 'debug.dart';
 import 'theme.dart';
+import 'theme_data.dart';
 import 'toggleable.dart';
 
 /// A material design checkbox.
@@ -58,6 +59,7 @@ class Checkbox extends StatefulWidget {
     this.tristate = false,
     @required this.onChanged,
     this.activeColor,
+    this.materialTapTargetSize,
   }) : assert(tristate != null),
        assert(tristate || value != null),
        super(key: key);
@@ -113,6 +115,15 @@ class Checkbox extends StatefulWidget {
   /// If tristate is false (the default), [value] must not be null.
   final bool tristate;
 
+  /// Configures the minimum size of the tap target.
+  ///
+  /// Defaults to [ThemeData.materialTapTargetSize].
+  ///
+  /// See also:
+  ///
+  ///   * [MaterialTapTargetSize], for a description of how this affects tap targets.
+  final MaterialTapTargetSize materialTapTargetSize;
+
   /// The width of a checkbox widget.
   static const double width = 18.0;
 
@@ -125,12 +136,23 @@ class _CheckboxState extends State<Checkbox> with TickerProviderStateMixin {
   Widget build(BuildContext context) {
     assert(debugCheckHasMaterial(context));
     final ThemeData themeData = Theme.of(context);
+    Size size;
+    switch (widget.materialTapTargetSize ?? themeData.materialTapTargetSize) {
+      case MaterialTapTargetSize.padded:
+        size = const Size(2 * kRadialReactionRadius + 8.0, 2 * kRadialReactionRadius + 8.0);
+        break;
+      case MaterialTapTargetSize.shrinkWrap:
+        size = const Size(2 * kRadialReactionRadius, 2 * kRadialReactionRadius);
+        break;
+    }
+    final BoxConstraints additionalConstraints = new BoxConstraints.tight(size);
     return new _CheckboxRenderObjectWidget(
       value: widget.value,
       tristate: widget.tristate,
       activeColor: widget.activeColor ?? themeData.toggleableActiveColor,
       inactiveColor: widget.onChanged != null ? themeData.unselectedWidgetColor : themeData.disabledColor,
       onChanged: widget.onChanged,
+      additionalConstraints: additionalConstraints,
       vsync: this,
     );
   }
@@ -145,6 +167,7 @@ class _CheckboxRenderObjectWidget extends LeafRenderObjectWidget {
     @required this.inactiveColor,
     @required this.onChanged,
     @required this.vsync,
+    @required this.additionalConstraints,
   }) : assert(tristate != null),
        assert(tristate || value != null),
        assert(activeColor != null),
@@ -158,6 +181,7 @@ class _CheckboxRenderObjectWidget extends LeafRenderObjectWidget {
   final Color inactiveColor;
   final ValueChanged<bool> onChanged;
   final TickerProvider vsync;
+  final BoxConstraints additionalConstraints;
 
   @override
   _RenderCheckbox createRenderObject(BuildContext context) => new _RenderCheckbox(
@@ -167,6 +191,7 @@ class _CheckboxRenderObjectWidget extends LeafRenderObjectWidget {
     inactiveColor: inactiveColor,
     onChanged: onChanged,
     vsync: vsync,
+    additionalConstraints: additionalConstraints,
   );
 
   @override
@@ -177,6 +202,7 @@ class _CheckboxRenderObjectWidget extends LeafRenderObjectWidget {
       ..activeColor = activeColor
       ..inactiveColor = inactiveColor
       ..onChanged = onChanged
+      ..additionalConstraints = additionalConstraints
       ..vsync = vsync;
   }
 }
@@ -191,6 +217,7 @@ class _RenderCheckbox extends RenderToggleable {
     bool tristate,
     Color activeColor,
     Color inactiveColor,
+    BoxConstraints additionalConstraints,
     ValueChanged<bool> onChanged,
     @required TickerProvider vsync,
   }): _oldValue = value,
@@ -200,7 +227,7 @@ class _RenderCheckbox extends RenderToggleable {
         activeColor: activeColor,
         inactiveColor: inactiveColor,
         onChanged: onChanged,
-        size: const Size(2 * kRadialReactionRadius, 2 * kRadialReactionRadius),
+        additionalConstraints: additionalConstraints,
         vsync: vsync,
       );
 

diff --git a/packages/flutter/lib/src/material/checkbox_list_tile.dart b/packages/flutter/lib/src/material/checkbox_list_tile.dart
@@ -7,6 +7,7 @@ import 'package:flutter/widgets.dart';
 import 'checkbox.dart';
 import 'list_tile.dart';
 import 'theme.dart';
+import 'theme_data.dart';
 
 /// A [ListTile] with a [Checkbox]. In other words, a checkbox with a label.
 ///
@@ -173,6 +174,7 @@ class CheckboxListTile extends StatelessWidget {
       value: value,
       onChanged: onChanged,
       activeColor: activeColor,
+      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
     );
     Widget leading, trailing;
     switch (controlAffinity) {