Flutter Raised Button in Detail

RaisedButton’ is a widget used to create material design ‘raised button in Flutter. It’s Material.elevation increases when the button is pressed. It adds dimension to otherwise flat layout buttons and gives our UI a totally another look. So let’s dive in and create some awesome buttons in flutter ➡️

RaisedButton Class

const RaisedButton({
Key key,
@required this.onPressed,
this.enabled,
this.color,
this.highlightColor,
this.splashColor,
this.disabledColor,
this.elevation: 5.0,
this.highlightElevation: 10.0,
this.disabledElevation: 0.0,
this.colorBrightness,
this.animationDuration,
this.disabledTextColor,
this.hoverColor,
this.hoverElevation,
this.onLongPress,
this.textColor,
this.textTheme,
this.shape,
this.padding,
this.child,
}) : super(key: key);
  • enabled — Bool value that tells whether the button is enabled or disabled.
  • onPressed — The callback that is called when the button is tapped or activated.
  • color — Sets the background color of the button
  • highlightColor — Sets the highlight color of the button’s InkWell. InkWell is a rectangular area of Material that responds to touch. To know more about it Click Here. Simply, we can say that it sets the highlight color of the expanding circle effect that appears on tapping the button.
Difference between highlightColor and splashColor (Credits: flutter.dev)
  • splashColor — Sets the splash color of the button’s InkWell.
  • disabledColor — Sets the background color of a disabled button.
  • elevation — It is a double value used to set the elevation of the button.
  • highlightElevation — It’s a double value that sets the button’s material's elevation relative to its parent when the button is enabled and pressed.
  • disabledElevation — It’s a double value that sets the elevation of a disabled button i.e when the button is not enabled.
  • colorBrightness — The theme brightness to be used for this button.
  • animationDuration — It defines the duration of animation effects for shape changes and elevation.
  • disabledTextColor — It sets the color for the text when the button is disabled.
  • hoverColor — The background color of the button when a pointer is hovering over it.
  • hoverElevation — It sets the elevation of the button’s Material relative to its parent when the button is enabled and a pointer is hovering over it.
  • onLongPress — The callback that is called when the button is long pressed.
  • textColor — The color to be used for the button’s text.
  • textTheme — The TextTheme to be used for the button’s text.
  • shape — It is used to set the shape of the button’s material.
  • padding — Sets the padding for the button.

Creating a simple Raised Button

For creating a disabled button we need to set the enabled property to false or we can set onPressed to null i.e setting enabled: false, OR onPressed: null,

Creating a button with custom width and color

The above code creates the following button:

Creating a Rounded button with padding

Creating a Gradient Button

Hope this article helps you in some form or the other. Clap your hands 👏 if it does or clap multiple times 👏 👏 👏 if you loved this article 😄

Play around with code and create awesome buttons. DM me what you create. Always eager to hear from creative developers.

Do comment if you find something to be incorrect.

Find me on: Twitter, LinkedIn

See ya 👋

Developer and Designer. Passionate about coding.