raised_button.dart 14.7 KB
Newer Older
1 2 3 4
// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

5
import 'package:flutter/foundation.dart';
6
import 'package:flutter/widgets.dart';
7

8
import 'button.dart';
9
import 'button_theme.dart';
10
import 'colors.dart';
11
import 'constants.dart';
12
import 'theme.dart';
13
import 'theme_data.dart';
14

15 16
/// A material design "raised button".
///
17 18
/// A raised button is based on a [Material] widget whose [Material.elevation]
/// increases when the button is pressed.
19 20 21 22 23
///
/// Use raised buttons to add dimension to otherwise mostly flat layouts, e.g.
/// in long busy lists of content, or in wide spaces. Avoid using raised buttons
/// on already-raised content such as dialogs or cards.
///
24
/// If the [onPressed] callback is null, then the button will be disabled and by
25
/// default will resemble a flat button in the [disabledColor]. If you are
26 27
/// trying to change the button's [color] and it is not having any effect, check
/// that you are passing a non-null [onPressed] handler.
28
///
29 30 31
/// If you want an ink-splash effect for taps, but don't want to use a button,
/// consider using [InkWell] directly.
///
32 33
/// Raised buttons have a minimum size of 88.0 by 36.0 which can be overidden
/// with [ButtonTheme].
34
///
35
/// See also:
36
///
37 38 39 40 41
///  * [FlatButton], a material design button without a shadow.
///  * [DropdownButton], a button that shows options to select from.
///  * [FloatingActionButton], the round button in material applications.
///  * [IconButton], to create buttons that just contain icons.
///  * [InkWell], which implements the ink splash part of a flat button.
42
///  * [RawMaterialButton], the widget this widget is based on.
43
///  * <https://material.google.com/components/buttons.html>
44
class RaisedButton extends StatelessWidget {
45
  /// Create a filled button.
46
  ///
47 48
  /// The [elevation], [highlightElevation], and [disabledElevation]
  /// arguments must not be null.
49
  const RaisedButton({
50
    Key key,
51
    @required this.onPressed,
52
    this.onHighlightChanged,
53 54 55
    this.textTheme,
    this.textColor,
    this.disabledTextColor,
56
    this.color,
57
    this.disabledColor,
58 59
    this.highlightColor,
    this.splashColor,
60
    this.colorBrightness,
61 62 63
    this.elevation = 2.0,
    this.highlightElevation = 8.0,
    this.disabledElevation = 0.0,
64 65
    this.padding,
    this.shape,
66
    this.materialTapTargetSize,
67
    this.animationDuration = kThemeChangeDuration,
68 69 70 71
    this.child,
  }) : assert(elevation != null),
       assert(highlightElevation != null),
       assert(disabledElevation != null),
72
       assert(animationDuration != null),
73 74 75 76 77 78 79 80 81 82 83 84 85
       super(key: key);

  /// Create a filled button from a pair of widgets that serve as the button's
  /// [icon] and [label].
  ///
  /// The icon and label are arranged in a row and padded by 12 logical pixels
  /// at the start, and 16 at the end, with an 8 pixel gap in between.
  ///
  /// The [elevation], [highlightElevation], [disabledElevation], [icon], and
  /// [label] arguments must not be null.
  RaisedButton.icon({
    Key key,
    @required this.onPressed,
86
    this.onHighlightChanged,
87 88 89 90 91 92 93
    this.textTheme,
    this.textColor,
    this.disabledTextColor,
    this.color,
    this.disabledColor,
    this.highlightColor,
    this.splashColor,
94
    this.colorBrightness,
95 96 97
    this.elevation = 2.0,
    this.highlightElevation = 8.0,
    this.disabledElevation = 0.0,
98
    this.shape,
99
    this.materialTapTargetSize,
100
    this.animationDuration = kThemeChangeDuration,
101 102 103 104 105 106 107
    @required Widget icon,
    @required Widget label,
  }) : assert(elevation != null),
       assert(highlightElevation != null),
       assert(disabledElevation != null),
       assert(icon != null),
       assert(label != null),
108
       assert(animationDuration != null),
109 110 111 112 113 114 115 116 117 118
       padding = const EdgeInsetsDirectional.only(start: 12.0, end: 16.0),
       child = new Row(
         mainAxisSize: MainAxisSize.min,
         children: <Widget>[
           icon,
           const SizedBox(width: 8.0),
           label,
         ],
       ),
       super(key: key);
119

120
  /// Called when the button is tapped or otherwise activated.
121
  ///
122
  /// If this is set to null, the button will be disabled, see [enabled].
123
  final VoidCallback onPressed;
124

125 126 127 128
  /// Called by the underlying [InkWell] widget's [InkWell.onHighlightChanged]
  /// callback.
  final ValueChanged<bool> onHighlightChanged;

129 130 131 132 133 134 135 136 137 138 139 140 141
  /// Defines the button's base colors, and the defaults for the button's minimum
  /// size, internal padding, and shape.
  ///
  /// Defaults to `ButtonTheme.of(context).textTheme`.
  final ButtonTextTheme textTheme;

  /// The color to use for this button's text.
  ///
  /// The button's [Material.textStyle] will be the current theme's button
  /// text style, [ThemeData.textTheme.button], configured with this color.
  ///
  /// The default text color depends on the button theme's text theme,
  /// [ButtonThemeData.textTheme].
142
  ///
143 144 145 146 147 148
  /// See also:
  ///   * [disabledTextColor], the text color to use when the button has been
  ///     disabled.
  final Color textColor;

  /// The color to use for this button's text when the button is disabled.
149
  ///
150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166
  /// The button's [Material.textStyle] will be the current theme's button
  /// text style, [ThemeData.textTheme.button], configured with this color.
  ///
  /// The default value is the theme's disabled color,
  /// [ThemeData.disabledColor].
  ///
  /// See also:
  ///  * [textColor] - The color to use for this button's text when the button is [enabled].
  final Color disabledTextColor;

  /// The button's fill color, displayed by its [Material], while it
  /// is in its default (unpressed, [enabled]) state.
  ///
  /// The default fill color is the theme's button color, [ThemeData.buttonColor].
  ///
  /// Typically the default color will be overidden with a Material color,
  /// for example:
167 168 169
  ///
  /// ```dart
  ///  new RaisedButton(
170
  ///    color: Colors.blue,
171 172 173 174
  ///    onPressed: _handleTap,
  ///    child: new Text('DEMO'),
  ///  ),
  /// ```
175 176 177
  ///
  /// See also:
  ///   * [disabledColor] - the fill color of the button when the button is disabled.
178
  final Color color;
179

180
  /// The fill color of the button when the button is disabled.
181
  ///
182 183
  /// The default value of this color is the theme's disabled color,
  /// [ThemeData.disabledColor].
184
  ///
185 186 187
  /// See also:
  ///   * [color] - the fill color of the button when the button is [enabled].
  final Color disabledColor;
188

189
  /// The splash color of the button's [InkWell].
190
  ///
191 192 193
  /// The ink splash indicates that the button has been touched. It
  /// appears on top of the button's child and spreads in an expanding
  /// circle beginning where the touch occurred.
194
  ///
195 196 197 198 199 200
  /// The default splash color is the current theme's splash color,
  /// [ThemeData.splashColor].
  ///
  /// The appearance of the splash can be configured with the theme's splash
  /// factory, [ThemeData.splashFactory].
  final Color splashColor;
201

202
  /// The highlight color of the button's [InkWell].
203
  ///
204 205 206 207 208 209 210 211
  /// The highlight indicates that the button is actively being pressed. It
  /// appears on top of the button's child and quickly spreads to fill
  /// the button, and then fades out.
  ///
  /// If [textTheme] is [ButtonTextTheme.primary], the default highlight color is
  /// transparent (in other words the highlight doesn't appear). Otherwise it's
  /// the current theme's highlight color, [ThemeData.highlightColor].
  final Color highlightColor;
212

213 214
  /// The z-coordinate at which to place this button. This controls the size of
  /// the shadow below the raised button.
215
  ///
216
  /// Defaults to 2, the appropriate elevation for raised buttons.
217 218 219
  ///
  /// See also:
  ///
220 221 222
  ///  * [FlatButton], a button with no elevation or fill color.
  ///  * [disabledElevation], the elevation when the button is disabled.
  ///  * [highlightElevation], the elevation when the button is pressed.
223
  final double elevation;
224

225 226
  /// The elevation for the button's [Material] when the button
  /// is [enabled] but not pressed.
227
  ///
228 229 230 231 232 233 234 235 236 237 238 239 240 241 242
  /// Defaults to 2.0.
  ///
  /// See also:
  ///
  ///  * [highlightElevation], the default elevation.
  ///  * [disabledElevation], the elevation when the button is disabled.

  /// The elevation for the button's [Material] when the button
  /// is [enabled] and pressed.
  ///
  /// This controls the size of the shadow below the button. When a tap
  /// down gesture occurs within the button, its [InkWell] displays a
  /// [highlightColor] "highlight".
  ///
  /// Defaults to 8.0.
243 244 245 246
  ///
  /// See also:
  ///
  ///  * [elevation], the default elevation.
247
  ///  * [disabledElevation], the elevation when the button is disabled.
248
  final double highlightElevation;
249

250 251
  /// The elevation for the button's [Material] when the button
  /// is not [enabled].
252
  ///
253
  /// Defaults to 0.0.
254 255 256 257
  ///
  /// See also:
  ///
  ///  * [elevation], the default elevation.
258
  ///  * [highlightElevation], the elevation when the button is pressed.
259
  final double disabledElevation;
260

261 262
  /// The theme brightness to use for this button.
  ///
263
  /// Defaults to the theme's brightness, [ThemeData.brightness].
264
  final Brightness colorBrightness;
265

266
  /// The button's label.
267
  ///
268
  /// Often a [Text] widget in all caps.
269
  final Widget child;
270

271 272 273 274
  /// 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.
275 276
  bool get enabled => onPressed != null;

277 278 279 280 281 282 283 284 285 286 287 288 289
  /// The internal padding for the button's [child].
  ///
  /// Defaults to the value from the current [ButtonTheme],
  /// [ButtonThemeData.padding].
  final EdgeInsetsGeometry padding;

  /// The shape of the button's [Material].
  ///
  /// The button's highlight and splash are clipped to this shape. If the
  /// button has an elevation, then its drop shadow is defined by this
  /// shape as well.
  final ShapeBorder shape;

290 291 292 293 294
  /// Defines the duration of animated changes for [shape] and [elevation].
  ///
  /// The default value is [kThemeChangeDuration].
  final Duration animationDuration;

295 296 297 298 299 300 301 302 303
  /// 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;

304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354
  Brightness _getBrightness(ThemeData theme) {
    return colorBrightness ?? theme.brightness;
  }

  ButtonTextTheme _getTextTheme(ButtonThemeData buttonTheme) {
    return textTheme ?? buttonTheme.textTheme;
  }

  Color _getFillColor(ThemeData theme, ButtonThemeData buttonTheme) {
    final Color fillColor = enabled ? color : disabledColor;
    if (fillColor != null)
      return fillColor;

    final bool themeIsDark = _getBrightness(theme) == Brightness.dark;
    switch (_getTextTheme(buttonTheme)) {
      case ButtonTextTheme.normal:
      case ButtonTextTheme.accent:
        return enabled
          ? theme.buttonColor
          : theme.disabledColor;
      case ButtonTextTheme.primary:
        return enabled
          ? theme.buttonColor
          : (themeIsDark ? Colors.white12 : Colors.black12);
    }
    return null;
  }

  Color _getTextColor(ThemeData theme, ButtonThemeData buttonTheme, Color fillColor) {
    final Color color = enabled ? textColor : disabledTextColor;
    if (color != null)
      return color;

    final bool themeIsDark = _getBrightness(theme) == Brightness.dark;
    final bool fillIsDark = fillColor != null
      ? ThemeData.estimateBrightnessForColor(fillColor) == Brightness.dark
      : themeIsDark;

    switch (_getTextTheme(buttonTheme)) {
      case ButtonTextTheme.normal:
        return enabled
          ? (themeIsDark ? Colors.white : Colors.black87)
          : theme.disabledColor;
      case ButtonTextTheme.accent:
        return enabled
          ? theme.accentColor
          : theme.disabledColor;
      case ButtonTextTheme.primary:
        return enabled
          ? (fillIsDark ? Colors.white : Colors.black)
          : (themeIsDark ? Colors.white30 : Colors.black38);
355
    }
356 357 358 359 360 361 362 363 364 365 366 367 368 369 370
    return null;
  }

  Color _getHighlightColor(ThemeData theme, ButtonThemeData buttonTheme) {
    if (highlightColor != null)
      return highlightColor;

    switch (_getTextTheme(buttonTheme)) {
      case ButtonTextTheme.normal:
      case ButtonTextTheme.accent:
        return theme.highlightColor;
      case ButtonTextTheme.primary:
        return Colors.transparent;
    }
    return Colors.transparent;
371
  }
372 373 374

  @override
  Widget build(BuildContext context) {
375 376 377 378 379 380
    final ThemeData theme = Theme.of(context);
    final ButtonThemeData buttonTheme = ButtonTheme.of(context);
    final Color fillColor = _getFillColor(theme, buttonTheme);
    final Color textColor = _getTextColor(theme, buttonTheme, fillColor);

    return new RawMaterialButton(
381
      onPressed: onPressed,
382
      onHighlightChanged: onHighlightChanged,
383 384 385 386 387 388 389 390 391 392
      fillColor: fillColor,
      textStyle: theme.textTheme.button.copyWith(color: textColor),
      highlightColor: _getHighlightColor(theme, buttonTheme),
      splashColor: splashColor ?? theme.splashColor,
      elevation: elevation,
      highlightElevation: highlightElevation,
      disabledElevation: disabledElevation,
      padding: padding ?? buttonTheme.padding,
      constraints: buttonTheme.constraints,
      shape: shape ?? buttonTheme.shape,
393
      animationDuration: animationDuration,
394
      child: child,
395
      materialTapTargetSize: materialTapTargetSize ?? theme.materialTapTargetSize,
396 397
    );
  }
398 399

  @override
400 401 402 403 404 405 406 407 408 409 410 411 412 413 414
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
    properties.add(new ObjectFlagProperty<VoidCallback>('onPressed', onPressed, ifNull: 'disabled'));
    properties.add(new DiagnosticsProperty<Color>('textColor', textColor, defaultValue: null));
    properties.add(new DiagnosticsProperty<Color>('disabledTextColor', disabledTextColor, defaultValue: null));
    properties.add(new DiagnosticsProperty<Color>('color', color, defaultValue: null));
    properties.add(new DiagnosticsProperty<Color>('disabledColor', disabledColor, defaultValue: null));
    properties.add(new DiagnosticsProperty<Color>('highlightColor', highlightColor, defaultValue: null));
    properties.add(new DiagnosticsProperty<Color>('splashColor', splashColor, defaultValue: null));
    properties.add(new DiagnosticsProperty<Brightness>('colorBrightness', colorBrightness, defaultValue: null));
    properties.add(new DiagnosticsProperty<double>('elevation', elevation, defaultValue: null));
    properties.add(new DiagnosticsProperty<double>('highlightElevation', highlightElevation, defaultValue: null));
    properties.add(new DiagnosticsProperty<double>('disabledElevation', disabledElevation, defaultValue: null));
    properties.add(new DiagnosticsProperty<EdgeInsetsGeometry>('padding', padding, defaultValue: null));
    properties.add(new DiagnosticsProperty<ShapeBorder>('shape', shape, defaultValue: null));
415
  }
416
}