RaisedButton Widget - Flutter Widget Guide By Flutter Agency

RaisedButton Widget – Flutter Guide By Flutter Agency

In our flutter tutorial series, we’re going to learn how to display multiple types of buttons. Flutter has multiple button types such as

  • RaisedButton
  • OutlineButton
  • FlatButton
  • IconButton

What is RaisedButton Widget?

RaisedButton Widget is a normal button but implemented with material ink spread effect upon clicking.

RaisedButton Widget is a button with elevation. Users can set many properties like TextColor, ButtonColor, Color of Button when disabled, animation, time, shape, elevation, padding.etc.

The constructor of RaisedButton Widget looks like below :

  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,
  VisualDensity visualDensity,
  ShapeBorder shape,
  Clip clipBehavior: Clip.none,
  FocusNode focusNode,
  bool autofocus: false,
  MaterialTapTargetSize materialTapTargetSize,
  Duration animationDuration,
  Widget child,

Code snippet to create simple RaisedButton Widget is as follows :

        onPressed: () {},
        textColor: Colors.white,
        color: Colors.redAccent,
        padding: const EdgeInsets.all(8.0),
        elevation: 5,
        child: new Text(

Which will generate output like below :

Raised Button

RaisedButton Widget

textColor: This is used to set the color of the text in RaisedButton. The code snippet will look like below :

textColor: Colors.white,

disabledColor: This is the color used for the button when it is in its a disabled state. Code Snippet will look like below :

disabledColor: Colors.grey,

disabledTextColor: This is the color to use for this button’s text when the button is disabled.

Code snippet will look like below :

  disabledTextColor: Colors.black,

Color: This is the color used for the background color of the button while it is in it’s the default, unpressed state. Code Snippet to set color will look like below :

color: Colors.redAccent,

Elevation: The elevation will give a feeling of rising from its background. Code Snippet for elevation will look like below :

elevation: 5,

Shape: It provides the shape of the button. Users can select the Shape as per requirement.

The code snippet will look like below :

     shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(28.0),


RoundedRectangleBorder Raised Button

ContinuousRectangleBorder :

Code snippet for this will look like below :

 shape: ContinuousRectangleBorder(
          borderRadius: BorderRadius.circular(28.0),

Above code will give us output like below :



Thanks for being with us !!!

Abhishek Dhanani

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.

ready to get started?

Fill out the form below and we will be in touch soon!

"*" indicates required fields

✓ Valid number ✕ Invalid number
our share of the limelight

as seen on