Flutter Raised Button in Detail

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

Creating a button with custom width and color

Creating a Rounded button with padding

Creating a Gradient Button

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bharat Sharma

Bharat Sharma

Developer and Designer. Passionate about coding.