Flutter RaisedButton cookbook

ANEESH JOSE
Dec 3, 2019 · 3 min read

RaisedButton is one of the most widely used widget in the flutter material library. It is actually a simple button which can handle normal click event. But what make it so great is its easiness of development. Lets look into the basic RaisedButton:

new RaisedButton(  onPressed: () => print("Button Pressed"),  child: new Text("Press here"),),
Simple RaisedButton flutter
Simple RaisedButton flutter
RaisedButton

The onPressed will get called when you click the button and you will get a console output ‘Button Pressed’.

Let’s color it:

Add a new parameter color to the RaisedButton Widget:

new RaisedButton(  color: Colors.greenAccent,  onPressed: () => print("Button Pressed"),  child: new Text("Press here"),)
Colored RaisedButton flutter
Colored RaisedButton flutter
RaisedButton with color attribute

There are other coloring arguments to RaisedButton. They are focusColor, highlightColor and hoverColor.

Let’s see how would it look like if onPressed is null. It would look like

Disabled RaisedButton Flutter
Disabled RaisedButton Flutter
Disabled RaisedButton

This button is disabled. We can change the color of the button and its text while disabled using

disabledColor: Colors.greenAccent[100],disabledTextColor: Colors.blue[100],
How to change the color of the Disabled RaisedButton
How to change the color of the Disabled RaisedButton
Disabled RaisedButton color and textcolor

The elevation will give a feeling of rise from its background.

elevation:5.0
Flutter RaisedButton elevation
Flutter RaisedButton elevation
RaisedButton elevation

There are three more elevations parameters too. focusElevation, highlightElevation and hoverElevation . They will give an elevation when the button is focused using autoFocus or a focusNode when the button is highlighted and when we hover over the button respectively.

We can set a splash color when the button is pressed

splashColor: Colors.yellow[200],
Flutter add splash color for a RaisedButton
Flutter add splash color for a RaisedButton
RaisedButton Splash Color

You can set the animation duration of Raised button using:

animationDuration: Duration(seconds: 2),

This will be helpful when elevation changes from on to another such as focused mode to non-focused, etc.

Another one is the colorBrightness. It has two options dark and light.

colorBrightness: Brightness.light,orcolorBrightness: Brightness.dark,

We can change the shape of the RaisedButton. For an example, we use RoundedRectangleBorder

shape: RoundedRectangleBorder(  borderRadius: new BorderRadius.circular(18.0),  side: BorderSide(color: Colors.black),)
Shape Property of RaisedButton. Round Shape RaisedButton. Flutter
Shape Property of RaisedButton. Round Shape RaisedButton. Flutter
Rounded border RaisedButton

onHighlightChanged callback: Triggered when pressed or released the RaisedButton.

onHighlightChanged: (boolValue) => print(boolValue),
//returns true when pressed the button, false when released

padding: Padding is used to set the distance between sides of the RaisedButton and it’s child.

padding: EdgeInsets.only(top: 20.0),//distance of top to the child
Flutter Padding to RaisedButton.
Flutter Padding to RaisedButton.
padding: EdgeInsets.all(20.0),//distance of all the sides to the //child
Add padding to all the sides in RaisedButton
Add padding to all the sides in RaisedButton

Hope you enjoy the article. Will come back with another interesting widget. Feel free to ask if you have any doubts.

Flutter Community

Articles and Stories from the Flutter Community

ANEESH JOSE

Written by

Flutter enthusiast | Dart | Android Developer | Web | Firebase | Node

Flutter Community

Articles and Stories from the Flutter Community

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade