Commit f1c2d784 authored by David Yang's avatar David Yang Committed by Adam Barth

Updating Cupertino Button MinSize to comply with iOS guidelines (#8881)

The recommended minimum tappable area is actually 44.0pt according to the [iOS Human Interface Guidline](https://developer.apple.com/ios/human-interface-guidelines/visual-design/layout/).

> Provide ample spacing for interactive elements. Try to maintain a minimum tappable area of 44pt x 44pt for all controls.

I've also added an override to allow for flexibility in situations where designers get naughty and have a desire to make everything super small.
parent 87334eb4
...@@ -46,6 +46,7 @@ class CupertinoButton extends StatefulWidget { ...@@ -46,6 +46,7 @@ class CupertinoButton extends StatefulWidget {
@required this.child, @required this.child,
this.padding, this.padding,
this.color, this.color,
this.minSize: 44.0,
@required this.onPressed, @required this.onPressed,
}); });
...@@ -69,6 +70,16 @@ class CupertinoButton extends StatefulWidget { ...@@ -69,6 +70,16 @@ class CupertinoButton extends StatefulWidget {
/// If this is set to null, the button will be disabled. /// If this is set to null, the button will be disabled.
final VoidCallback onPressed; final VoidCallback onPressed;
/// Minimum size of the button.
///
/// Defaults to 44.0 which the iOS Human Interface Guideline recommends as the
/// minimum tappable area
///
/// See also:
///
/// * <https://developer.apple.com/ios/human-interface-guidelines/visual-design/layout/>
final double minSize;
/// Whether the button is enabled or disabled. Buttons are disabled by default. To /// 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. /// enable a button, set its [onPressed] property to a non-null value.
bool get enabled => onPressed != null; bool get enabled => onPressed != null;
...@@ -129,11 +140,13 @@ class _CupertinoButtonState extends State<CupertinoButton> with SingleTickerProv ...@@ -129,11 +140,13 @@ class _CupertinoButtonState extends State<CupertinoButton> with SingleTickerProv
onPointerDown: enabled ? _handleTapDown : null, onPointerDown: enabled ? _handleTapDown : null,
onPointerUp: enabled ? _handleTapUp : null, onPointerUp: enabled ? _handleTapUp : null,
onPointerCancel: enabled ? _handleTapCancel : null, onPointerCancel: enabled ? _handleTapCancel : null,
child: new GestureDetector( child: new GestureDetector(
onTap: config.onPressed, onTap: config.onPressed,
child: new ConstrainedBox( child: new ConstrainedBox(
constraints: const BoxConstraints(minWidth: 48.0, minHeight: 48.0), constraints: new BoxConstraints(
minWidth: config.minSize,
minHeight: config.minSize,
),
child: new FadeTransition( child: new FadeTransition(
opacity: new CurvedAnimation( opacity: new CurvedAnimation(
parent: _animationController, parent: _animationController,
......
...@@ -13,7 +13,7 @@ const TextStyle testStyle = const TextStyle( ...@@ -13,7 +13,7 @@ const TextStyle testStyle = const TextStyle(
); );
void main() { void main() {
testWidgets('Layout minimum size', (WidgetTester tester) async { testWidgets('Default layout minimum size', (WidgetTester tester) async {
await tester.pumpWidget( await tester.pumpWidget(
new Center(child: new CupertinoButton( new Center(child: new CupertinoButton(
child: new Text('X', style: testStyle), child: new Text('X', style: testStyle),
...@@ -23,8 +23,25 @@ void main() { ...@@ -23,8 +23,25 @@ void main() {
final RenderBox buttonBox = tester.renderObject(find.byType(CupertinoButton)); final RenderBox buttonBox = tester.renderObject(find.byType(CupertinoButton));
expect( expect(
buttonBox.size, buttonBox.size,
// 1 10px character + 16px * 2 is smaller than the 48px minimum. // 1 10px character + 16px * 2 is smaller than the default 44px minimum.
const Size.square(48.0), const Size.square(44.0),
);
});
testWidgets('Minimum size parameter', (WidgetTester tester) async {
final double minSize = 60.0;
await tester.pumpWidget(
new Center(child: new CupertinoButton(
child: new Text('X', style: testStyle),
onPressed: null,
minSize: minSize,
))
);
final RenderBox buttonBox = tester.renderObject(find.byType(CupertinoButton));
expect(
buttonBox.size,
// 1 10px character + 16px * 2 is smaller than defined 60.0px minimum
new Size.square(minSize),
); );
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment