RaisedButton

A material design “raised button”.

A raised button is based on a Material widget whose Material.elevation increases when the button is pressed.

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.

If onPressed and onLongPress callbacks are null, then the button will be disabled and by default will resemble 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 or onLongPress callbacks.

If you want an ink-splash effect for taps, but don’t want to use a button, consider using InkWell directly.

Raised buttons have a minimum size of 88.0 by 36.0 which can be overridden with ButtonTheme.

FlatButton

A material design “flat button”.

A flat button is a text label displayed on a (zero elevation) Material widget that reacts to touches by filling with color.

Use flat buttons on toolbars, in dialogs, or inline with other content but offset from that content with padding so that the button’s presence is obvious. Flat buttons intentionally do not have visible borders and must therefore rely on their position relative to other content for context. In dialogs and cards, they should be grouped together in one of the bottom corners. Avoid using flat buttons where they would blend in with other content, for example in the middle of lists.

FlatButton(
  color: Colors.blue,
  textColor: Colors.white,
  disabledColor: Colors.grey,
  disabledTextColor: Colors.black,
  padding: EdgeInsets.all(8.0),
  splashColor: Colors.blueAccent,
  onPressed: () {
    /*...*/
  },
  child: Text(
    "Flat Button",
    style: TextStyle(fontSize: 20.0),
  ),
)
Widget build(BuildContext context) {
  return Center(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        const RaisedButton(
          onPressed: null,
          child: Text(
            'Disabled Button',
            style: TextStyle(fontSize: 20)
          ),
        ),
        const SizedBox(height: 30),
        RaisedButton(
          onPressed: () {},
          child: const Text(
            'Enabled Button',
            style: TextStyle(fontSize: 20)
          ),
        ),
        const SizedBox(height: 30),
        RaisedButton(
          onPressed: () {},
          textColor: Colors.white,
          padding: const EdgeInsets.all(0.0),
          child: Container(
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                colors: <Color>[
                  Color(0xFF0D47A1),
                  Color(0xFF1976D2),
                  Color(0xFF42A5F5),
                ],
              ),
            ),
            padding: const EdgeInsets.all(10.0),
            child: const Text(
              'Gradient Button',
              style: TextStyle(fontSize: 20)
            ),
          ),
        ),
      ],
    ),
  );
}

See also:

Constructors

RaisedButton({Key key, @required VoidCallback onPressed, VoidCallback onLongPress, ValueChanged<bool> onHighlightChanged, ButtonTextTheme textTheme, Color textColor, Color disabledTextColor, Color color, Color disabledColor, Color focusColor, Color hoverColor, Color highlightColor, Color splashColor, Brightness colorBrightness, double elevation, double focusElevation, double hoverElevation, double highlightElevation, double disabledElevation, EdgeInsetsGeometry padding, ShapeBorder shape, Clip clipBehavior: Clip.none, FocusNode focusNode, bool autofocus: false, MaterialTapTargetSize materialTapTargetSize, Duration animationDuration, Widget child })Create a filled button. […]

RaisedButton.icon({Key key, @required VoidCallback onPressed, VoidCallback onLongPress, ValueChanged<bool> onHighlightChanged, ButtonTextTheme textTheme, Color textColor, Color disabledTextColor, Color color, Color disabledColor, Color focusColor, Color hoverColor, Color highlightColor, Color splashColor, Brightness colorBrightness, double elevation, double highlightElevation, double disabledElevation, ShapeBorder shape, Clip clipBehavior, FocusNode focusNode, bool autofocus, MaterialTapTargetSize materialTapTargetSize, Duration animationDuration, @required Widget icon @required Widget label })Create a filled button from a pair of widgets that serve as the button’s icon and label[…]

Leave a Reply

Your email address will not be published.