RaisedButton Widget – Flutter 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 :

RaisedButtonWidget({
  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 :

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

Which will generate output like below :

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 :

RaisedButton 

Thanks for being with us !!!