button.dart 8.64 KB
Newer Older
Ian Hickson's avatar
Ian Hickson committed
1
// Copyright 2014 The Flutter Authors. All rights reserved.
2 3 4
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

5 6
// @dart = 2.8

7 8 9
import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart';

10
import 'colors.dart';
11
import 'constants.dart';
xster's avatar
xster committed
12
import 'theme.dart';
xster's avatar
xster committed
13

xster's avatar
xster committed
14
// Measured against iOS 12 in Xcode.
15 16
const EdgeInsets _kButtonPadding = EdgeInsets.all(16.0);
const EdgeInsets _kBackgroundButtonPadding = EdgeInsets.symmetric(
17
  vertical: 14.0,
18 19
  horizontal: 64.0,
);
20

Adam Barth's avatar
Adam Barth committed
21
/// An iOS-style button.
22 23 24 25
///
/// Takes in a text or an icon that fades out and in on touch. May optionally have a
/// background.
///
26 27 28 29 30
/// The [padding] defaults to 16.0 pixels. When using a [CupertinoButton] within
/// a fixed height parent, like a [CupertinoNavigationBar], a smaller, or even
/// [EdgeInsets.zero], should be used to prevent clipping larger [child]
/// widgets.
///
31 32
/// See also:
///
33
///  * <https://developer.apple.com/ios/human-interface-guidelines/controls/buttons/>
34
class CupertinoButton extends StatefulWidget {
Adam Barth's avatar
Adam Barth committed
35
  /// Creates an iOS-style button.
36
  const CupertinoButton({
37
    Key key,
38 39 40
    @required this.child,
    this.padding,
    this.color,
41
    this.disabledColor = CupertinoColors.quaternarySystemFill,
42
    this.minSize = kMinInteractiveDimensionCupertino,
43
    this.pressedOpacity = 0.4,
44
    this.borderRadius = const BorderRadius.all(Radius.circular(8.0)),
45
    @required this.onPressed,
xster's avatar
xster committed
46
  }) : assert(pressedOpacity == null || (pressedOpacity >= 0.0 && pressedOpacity <= 1.0)),
47
       assert(disabledColor != null),
48 49
       _filled = false,
       super(key: key);
xster's avatar
xster committed
50 51 52 53 54 55 56 57

  /// Creates an iOS-style button with a filled background.
  ///
  /// The background color is derived from the [CupertinoTheme]'s `primaryColor`.
  ///
  /// To specify a custom background color, use the [color] argument of the
  /// default constructor.
  const CupertinoButton.filled({
58
    Key key,
xster's avatar
xster committed
59 60
    @required this.child,
    this.padding,
61
    this.disabledColor = CupertinoColors.quaternarySystemFill,
62
    this.minSize = kMinInteractiveDimensionCupertino,
63
    this.pressedOpacity = 0.4,
xster's avatar
xster committed
64 65 66
    this.borderRadius = const BorderRadius.all(Radius.circular(8.0)),
    @required this.onPressed,
  }) : assert(pressedOpacity == null || (pressedOpacity >= 0.0 && pressedOpacity <= 1.0)),
67
       assert(disabledColor != null),
xster's avatar
xster committed
68
       color = null,
69 70
       _filled = true,
       super(key: key);
71 72 73 74 75 76 77 78 79

  /// The widget below this widget in the tree.
  ///
  /// Typically a [Text] widget.
  final Widget child;

  /// The amount of space to surround the child inside the bounds of the button.
  ///
  /// Defaults to 16.0 pixels.
80
  final EdgeInsetsGeometry padding;
81 82 83 84

  /// The color of the button's background.
  ///
  /// Defaults to null which produces a button with no background or border.
xster's avatar
xster committed
85 86 87
  ///
  /// Defaults to the [CupertinoTheme]'s `primaryColor` when the
  /// [CupertinoButton.filled] constructor is used.
88 89
  final Color color;

90 91 92 93
  /// The color of the button's background when the button is disabled.
  ///
  /// Ignored if the [CupertinoButton] doesn't also have a [color].
  ///
94 95
  /// Defaults to [CupertinoColors.quaternarySystemFill] when [color] is
  /// specified. Must not be null.
96 97
  final Color disabledColor;

98 99 100 101 102
  /// The callback that is called when the button is tapped or otherwise activated.
  ///
  /// If this is set to null, the button will be disabled.
  final VoidCallback onPressed;

103 104
  /// Minimum size of the button.
  ///
105 106
  /// Defaults to kMinInteractiveDimensionCupertino which the iOS Human
  /// Interface Guidelines recommends as the minimum tappable area.
107 108
  final double minSize;

109 110 111
  /// The opacity that the button will fade to when it is pressed.
  /// The button will have an opacity of 1.0 when it is not pressed.
  ///
112
  /// This defaults to 0.4. If null, opacity will not change on pressed if using
xster's avatar
xster committed
113
  /// your own custom effects is desired.
114 115
  final double pressedOpacity;

xster's avatar
xster committed
116 117 118 119 120
  /// The radius of the button's corners when it has a background color.
  ///
  /// Defaults to round corners of 8 logical pixels.
  final BorderRadius borderRadius;

xster's avatar
xster committed
121 122
  final bool _filled;

123 124 125 126 127
  /// 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;

  @override
128
  _CupertinoButtonState createState() => _CupertinoButtonState();
129 130

  @override
131 132
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
133
    properties.add(FlagProperty('enabled', value: enabled, ifFalse: 'disabled'));
134 135 136 137 138
  }
}

class _CupertinoButtonState extends State<CupertinoButton> with SingleTickerProviderStateMixin {
  // Eyeballed values. Feel free to tweak.
139 140
  static const Duration kFadeOutDuration = Duration(milliseconds: 10);
  static const Duration kFadeInDuration = Duration(milliseconds: 100);
141
  final Tween<double> _opacityTween = Tween<double>(begin: 1.0);
142 143

  AnimationController _animationController;
144
  Animation<double> _opacityAnimation;
145

146 147 148
  @override
  void initState() {
    super.initState();
149
    _animationController = AnimationController(
150
      duration: const Duration(milliseconds: 200),
151
      value: 0.0,
152 153
      vsync: this,
    );
154 155 156
    _opacityAnimation = _animationController
      .drive(CurveTween(curve: Curves.decelerate))
      .drive(_opacityTween);
157
    _setTween();
158 159
  }

160 161 162 163 164 165 166 167 168 169
  @override
  void didUpdateWidget(CupertinoButton old) {
    super.didUpdateWidget(old);
    _setTween();
  }

  void _setTween() {
    _opacityTween.end = widget.pressedOpacity ?? 1.0;
  }

170 171 172 173 174 175 176
  @override
  void dispose() {
    _animationController.dispose();
    _animationController = null;
    super.dispose();
  }

177 178 179 180 181 182 183 184 185 186 187 188 189 190
  bool _buttonHeldDown = false;

  void _handleTapDown(TapDownDetails event) {
    if (!_buttonHeldDown) {
      _buttonHeldDown = true;
      _animate();
    }
  }

  void _handleTapUp(TapUpDetails event) {
    if (_buttonHeldDown) {
      _buttonHeldDown = false;
      _animate();
    }
191 192
  }

193 194 195 196 197
  void _handleTapCancel() {
    if (_buttonHeldDown) {
      _buttonHeldDown = false;
      _animate();
    }
198 199
  }

200 201 202 203
  void _animate() {
    if (_animationController.isAnimating)
      return;
    final bool wasHeldDown = _buttonHeldDown;
204
    final TickerFuture ticker = _buttonHeldDown
205 206
        ? _animationController.animateTo(1.0, duration: kFadeOutDuration)
        : _animationController.animateTo(0.0, duration: kFadeInDuration);
207
    ticker.then<void>((void value) {
208 209 210
      if (mounted && wasHeldDown != _buttonHeldDown)
        _animate();
    });
211 212 213 214
  }

  @override
  Widget build(BuildContext context) {
215
    final bool enabled = widget.enabled;
216 217 218 219 220 221
    final CupertinoThemeData themeData = CupertinoTheme.of(context);
    final Color primaryColor = themeData.primaryColor;
    final Color backgroundColor = widget.color == null
      ? (widget._filled ? primaryColor : null)
      : CupertinoDynamicColor.resolve(widget.color, context);

xster's avatar
xster committed
222
    final Color foregroundColor = backgroundColor != null
223 224 225
      ? themeData.primaryContrastingColor
      : enabled
        ? primaryColor
226
        : CupertinoDynamicColor.resolve(CupertinoColors.placeholderText, context);
227 228

    final TextStyle textStyle = themeData.textTheme.textStyle.copyWith(color: foregroundColor);
229

230
    return GestureDetector(
231
      behavior: HitTestBehavior.opaque,
232 233 234 235
      onTapDown: enabled ? _handleTapDown : null,
      onTapUp: enabled ? _handleTapUp : null,
      onTapCancel: enabled ? _handleTapCancel : null,
      onTap: widget.onPressed,
236
      child: Semantics(
237
        button: true,
238
        child: ConstrainedBox(
239
          constraints: widget.minSize == null
240
            ? const BoxConstraints()
241
            : BoxConstraints(
242 243 244
              minWidth: widget.minSize,
              minHeight: widget.minSize,
            ),
245
          child: FadeTransition(
246
            opacity: _opacityAnimation,
247 248
            child: DecoratedBox(
              decoration: BoxDecoration(
249 250
                borderRadius: widget.borderRadius,
                color: backgroundColor != null && !enabled
251
                  ? CupertinoDynamicColor.resolve(widget.disabledColor, context)
252
                  : backgroundColor,
253
              ),
254
              child: Padding(
255 256 257
                padding: widget.padding ?? (backgroundColor != null
                  ? _kBackgroundButtonPadding
                  : _kButtonPadding),
258
                child: Center(
259 260
                  widthFactor: 1.0,
                  heightFactor: 1.0,
261
                  child: DefaultTextStyle(
xster's avatar
xster committed
262 263 264 265 266
                    style: textStyle,
                    child: IconTheme(
                      data: IconThemeData(color: foregroundColor),
                      child: widget.child,
                    ),
267
                  ),
268 269 270 271 272 273 274 275 276
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}