firka/flutter
firka/flutter
4
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
David Yang 2017-03-19 05:19:40 -07:00 committed by Adam Barth
parent 87334eb424
commit f1c2d78455
2 changed files with 35 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/flutter/lib/src/cupertino/button.dart
View File

@ -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 {
/// 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
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,

23
packages/flutter/test/cupertino/button_test.dart
View File

@ -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() {
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),
); );
}); });