raised_button.dart 6.24 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 'colors.dart';
10
import 'theme.dart';
11

12 13 14 15 16 17 18 19 20
/// A material design "raised button".
///
/// A raised button consists of a rectangular piece of material that hovers over
/// the interface.
///
/// 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.
///
21 22 23 24
/// If the [onPressed] callback is null, then the button will be disabled and by
/// default will appear like a flat button in the [disabledColor]. If you are
/// trying to change the button's [color] and it is not having any effect, check
/// that you are passing a non-null [onPressed] handler.
25
///
26
/// Requires one of its ancestors to be a [Material] widget.
27
///
28 29 30
/// If you want an ink-splash effect for taps, but don't want to use a button,
/// consider using [InkWell] directly.
///
31
/// See also:
32
///
33 34 35 36 37
///  * [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.
38
///  * <https://material.google.com/components/buttons.html>
39
class RaisedButton extends StatelessWidget {
40 41 42 43
  /// Creates a raised button.
  ///
  /// The [child] argument is required and is typically a [Text] widget in all
  /// caps.
44
  const RaisedButton({
45
    Key key,
46
    @required this.onPressed,
47
    this.color,
48 49
    this.highlightColor,
    this.splashColor,
50
    this.disabledColor,
51 52 53
    this.elevation: 2.0,
    this.highlightElevation: 8.0,
    this.disabledElevation: 0.0,
54 55 56 57
    this.colorBrightness,
    this.child
  }) : super(key: key);

58
  /// The callback that is called when the button is tapped or otherwise activated.
59 60 61
  ///
  /// If this is set to null, the button will be disabled.
  final VoidCallback onPressed;
62

63 64 65 66 67 68
  /// The primary color of the button, as printed on the [Material], while it
  /// is in its default (unpressed, enabled) state.
  ///
  /// Defaults to null, meaning that the color is automatically derived from the [Theme].
  ///
  /// Typically, a material design color will be used, as follows:
69 70 71
  ///
  /// ```dart
  ///  new RaisedButton(
72
  ///    color: Colors.blue,
73 74 75 76
  ///    onPressed: _handleTap,
  ///    child: new Text('DEMO'),
  ///  ),
  /// ```
77
  final Color color;
78

79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97
  /// The primary color of the button when the button is in the down (pressed) state.
  /// The splash is represented as a circular overlay that appears above the
  /// [highlightColor] overlay. The splash overlay has a center point that matches
  /// the hit point of the user touch event. The splash overlay will expand to
  /// fill the button area if the touch is held for long enough time. If the splash
  /// color has transparency then the highlight and button color will show through.
  ///
  /// Defaults to the splash color from the [Theme].
  final Color splashColor;

  /// The secondary color of the button when the button is in the down (pressed)
  /// state. The higlight color is represented as a solid color that is overlaid over the
  /// button color (if any). If the highlight color has transparency, the button color
  /// will show through. The highlight fades in quickly as the button is held down.
  ///
  /// Defaults to the highlight color from the [Theme].
  final Color highlightColor;


98 99 100
  /// The color of the button when the button is disabled. Buttons are disabled
  /// by default. To enable a button, set its [onPressed] property to a non-null
  /// value.
101 102
  final Color disabledColor;

103 104
  /// The z-coordinate at which to place this button. This controls the size of
  /// the shadow below the raised button.
105
  ///
106
  /// Defaults to 2, the appropriate elevation for raised buttons.
107 108 109 110
  ///
  /// See also:
  ///
  ///  * [FlatButton], a button with no elevation.
111
  final double elevation;
112

113 114
  /// The z-coordinate at which to place this button when highlighted. This
  /// controls the size of the shadow below the raised button.
115
  ///
116 117
  /// Defaults to 8, the appropriate elevation for raised buttons while they are
  /// being touched.
118 119 120 121
  ///
  /// See also:
  ///
  ///  * [elevation], the default elevation.
122
  final double highlightElevation;
123

124 125
  /// The z-coordinate at which to place this button when disabled. This
  /// controls the size of the shadow below the raised button.
126
  ///
127
  /// Defaults to 0, the appropriate elevation for disabled raised buttons.
128 129 130 131
  ///
  /// See also:
  ///
  ///  * [elevation], the default elevation.
132
  final double disabledElevation;
133

134 135 136
  /// The theme brightness to use for this button.
  ///
  /// Defaults to the brightness from [ThemeData.brightness].
137
  final Brightness colorBrightness;
138

139
  /// The widget below this widget in the tree.
140 141
  ///
  /// Typically a [Text] widget in all caps.
142
  final Widget child;
143

144 145 146 147 148 149 150
  /// 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;

  Color _getColor(BuildContext context) {
    if (enabled) {
      return color ?? Theme.of(context).buttonColor;
151
    } else {
152 153
      if (disabledColor != null)
        return disabledColor;
154
      final Brightness brightness = Theme.of(context).brightness;
155
      assert(brightness != null);
pq's avatar
pq committed
156
      switch (brightness) {
157
        case Brightness.light:
158
          return Colors.black12;
159
        case Brightness.dark:
160 161
          return Colors.white12;
      }
pq's avatar
pq committed
162
      return null;
163 164
    }
  }
165 166 167 168 169 170

  @override
  Widget build(BuildContext context) {
    return new MaterialButton(
      onPressed: onPressed,
      color: _getColor(context),
171 172
      highlightColor: highlightColor ?? Theme.of(context).highlightColor,
      splashColor: splashColor ?? Theme.of(context).splashColor,
173 174 175
      elevation: enabled ? elevation : disabledElevation,
      highlightElevation: enabled ? highlightElevation : disabledElevation,
      colorBrightness: colorBrightness,
176
      child: child,
177 178
    );
  }
179
}