×
×

Spread the love

In flutter, RaisedButton widget is one of the most used flutter widgets from material library. In this example tutorial we will learn how to use a RaisedButton in flutter and its properties in detail.

Flutter RaisedButton

Flutter Raised Button is a material widget. It has an elevation which is a material property.By default the elevation value for raised button is 2. Use raised buttons to add dimension to otherwise mostly flat layouts, e.g. in long busy lists of content, or in wide spaces.

Note: Avoid using raised button on already-raised content such as dialogs or cards.

Flutter RaisedButton Properties

Raised Button has almost similar properties of a flutter FlatButton widget. It has many properties like color, textColor, elevation etc.. Lets see the constructor for a RaisedButton to know all the properties.

RaisedButton({
Key key, 
@required VoidCallback onPressed, 
VoidCallback onLongPress, 
ValueChanged<bool> onHighlightChanged, 
MouseCursor mouseCursor, 
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}) 

Handling Callbacks of RaisedButton

onPressed

When we tap the button this gets called. It is a VoidCallback method which means no arguments and return values. We need to pass a method with no arguments. The button will be disabled if we don’t provide onPressed: property or if we set onPressed: to null.
E.g. void testFunction();

Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:RaisedButton(
              child:Text("Button"),
              onPressed: () {
                 //your code
              },
            )
        )

or we can use a function name inside the anonymous method of onPressed callback.

Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:RaisedButton(
              child:Text("Button"),
              onPressed: () {
                 //your method name without paranthesis
eg: testFunction; 
              },
            )
        )

onLongPress

This callback is invoked when the user long press the button. It works similar to onPressed.

Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:RaisedButton(
              child:Text("Button"),
              onLongPress: () {
//you can implement code here or use a function name without parnthesis similar to onPressed.
              },
            )
        )

onHighlightChanged

It gets called when the button is pressed/down or released/up. It will return true when the button is pressed and false when released.

Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:RaisedButton(
              child:Text("Button"),
              onHighlightChanged: (value) {
                print(value);
              },
              onPressed: () {
              },
            )
        )

Styling the RaisedButton widget

RaisedButton – textTheme

To change text color based on theme we will use textTheme property. This property takes ButtonTextTheme which has three constants like normal, accent and primary.

ButtonTextTheme.accent

Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:RaisedButton(
              child:Text("Button"),
              textTheme: ButtonTextTheme.accent,
             onPressed: () {},
            )
        )

Output:

raisedbutton texttheme accent

RaisedButton textColor

We will use textColor property to change the color of button text.

Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:RaisedButton(
              child:Text("Button"),
              textColor: Colors.green,
             onPressed: () {},
            )
        )

Output:

raisedbutton textcolor

RaisedButton disabledTextColor

We will use this property to set text color to be displayed, when the button is disabled. In this example i am setting onPressed to null so that we can see the output.

Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:RaisedButton(
              child:Text("Button"),
              textColor: Colors.green,
              disabledTextColor: Colors.greenAccent,
             onPressed:null,
            )
        )

Output:

raisedbutton disabledtextcolor

RaisedButton – color

We will use this property to set background color for the button.

Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:RaisedButton(
              child:Text("Button"),
              textColor: Colors.white,
              color:Colors.green,
             onPressed: (){},
            )
        )

Output:

raisedbutton color

RaisedButton – disabledColor

We will use disabledColor property to set background color that we want to display when the button is disabled. In this example i am setting onPressed to null so that we can see the output.

Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:RaisedButton(
              child:Text("Button"),
              textColor: Colors.white,
              color:Colors.green,
             disabledColor: Colors.greenAccent,
             onPressed:null,
            )
        )

Output:

raisedbutton disabledcolor

RaisedButton – highlightColor

When we tap the button, highlightColor displays over the entire button and fades out when we release the button.

Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:RaisedButton(
              child:Text("Button"),
              textColor: Colors.white,
              color:Colors.green,
              highlightColor: Colors.deepOrange,
              onPressed:(){},
            )
        )

RaisedButton – splashColor

When the user taps the button the splashColor starts filling the button slowly. It fades out when the user releases the button.

Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:RaisedButton(
              child:Text("Button"),
              textColor: Colors.white,
              color:Colors.green,
              splashColor: Colors.deepOrange,
              onPressed:(){},
            )
        )

RaisedButton – colorBrightness

The colorBrightness property increases the readability of button text. This property takes Brightness which has two constants light and dark. Its better to use Brightness.dark for dark backgrounds and Brightness.light for light background.

Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:RaisedButton(
              child:Text("Button"),
              textColor: Colors.white,
              color:Colors.green,
              colorBrightness:Brightness.light,
              onPressed:(){},
            )
        )

RaisedButton – Padding

The padding property provides padding to the button,which means internal spacing. It takes EdgeInsets which has three methods all, only and symmetric.

EdgeInsets.all()

It takes one value and sets that amount of padding for all the sides.

Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:RaisedButton(
              child:Text("Button"),
              textColor: Colors.white,
              color:Colors.green,
              padding: EdgeInsets.all(20),
              onPressed:(){},
            )
        )

Output:

raisedbutton padding all

EdgeInsets.only()

You can specify up to 4 sides, which means you can define any number of sides you want below four.

Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:RaisedButton(
              child:Text("Button"),
              textColor: Colors.white,
              color:Colors.green,
              padding: EdgeInsets.only(left: 20,right: 20,bottom: 30),
              onPressed:(){},
            )
        )

Output:

raisedbutton padding only

EdgeInsets.symmetric()

This accepts horizontal and vertical values. You can provide only horizontal, only vertical or both.

Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:RaisedButton(
              child:Text("Button"),
              textColor: Colors.white,
              color:Colors.green,
              padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
              onPressed:(){},
            )
        )

Output:

raisedbutton padding symmetric

RaisedButton Elevation

Elevation means nothing but the button or any widget looks raised upward in the air. Like raising a bit upward from the surface where it was placed where we can also observe some shadow. This is a material property which is used to provide more style to the designs.

RaisedButton – elevation

We will use this property to provide elevation to the button.

Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:RaisedButton(
              child:Text("Button"),
              textColor: Colors.white,
              color:Colors.green,
              elevation: 20,
              onPressed:(){},
            )
        )

Output:

raisedbutton elevation

RaisedButton – highlightElevation

When the user taps the button, you can observe highlightElevation as the button raises up. The elevation reduces when the user releases the button.

Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:RaisedButton(
              child:Text("Button"),
              textColor: Colors.white,
              color:Colors.green,
              highlightElevation: 20,
              onPressed:(){},
            )
         )

RaisedButton – disabledElevation

We will use this property to set elevation when a button is disabled. The elevation will be visible only when the button is disabled.

Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:RaisedButton(
              child:Text("Button"),
              textColor: Colors.white,
              color:Colors.green,
              disabledElevation: 20,
              onPressed:null,
            )
        )

Output:

flutter raisedbutton widget disabledelevation

Shaping RaisedButton

RaisedButton – shape

By using shape property we can apply different shapes to the button. We can apply shapes like rectangular , rounded rectangle, circular, etc.

Rectangular Border

Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:RaisedButton(
              child:Text("Button"),
              padding: EdgeInsets.symmetric(horizontal: 30,vertical: 10),
              shape:Border.all(width: 2,color: Colors.green),
              textColor: Colors.green,
              onPressed: (){},
            )
        )

Output:

flutter raisedbutton widget border all

OutlineInputBorder

Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:RaisedButton(
              child:Text("Button"),
              padding: EdgeInsets.symmetric(
                 horizontal: 30,
                 vertical: 10
              ),
              shape:OutlineInputBorder(),
              textColor: Colors.green,
              onPressed: (){},
            )
        )

Output:

flutter raisedbutton widget outline input border

Using borderSide for styling border.

Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:RaisedButton(
              child:Text("Button"),
              padding: EdgeInsets.symmetric(
                horizontal: 30,
                vertical: 10
              ),
              shape:OutlineInputBorder(
                  borderSide: BorderSide(
                      color: Colors.green,
                      width: 3,
                      style: BorderStyle.solid
                  )
              ),
              textColor: Colors.green,
              onPressed: (){},
            )
        )

Output:

raisedbutton outline input border

We will be using borderSide property for all the border types from now. You can leave them without providing border side.

UnderlineInputBorder

Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:RaisedButton(
              child:Text("Button"),
              padding: EdgeInsets.symmetric(horizontal: 30,vertical: 10),
              shape:UnderlineInputBorder(
                  borderSide: BorderSide(
                      color: Colors.green,
                      width: 3,
                      style: BorderStyle.solid
                  )
              ),
              textColor: Colors.green,
              onPressed: (){},
            )
        )

Output:

raisedbutton underline input border

StadiumBorder

It directly forms the shape with rounded edges without providing any BorderRadius.It looks similar to roundeRectangleBorder.

Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:RaisedButton(
              child:Text("Button"),
              padding: EdgeInsets.symmetric(
                  horizontal: 30,
                  vertical: 10
              ),
              shape:StadiumBorder(
                  side: BorderSide(
                      color: Colors.green,
                      width: 2
                  )
              ),
              textColor: Colors.green,
              onPressed: (){},
            )
        )

Output:

raisedbutton widget stadium border

RoundedRectangleBorder

Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:RaisedButton(
              child:Text("Button"),
              padding: EdgeInsets.symmetric(
                  horizontal: 30,
                  vertical: 10
              ),
              shape:RoundedRectangleBorder(
                  side: BorderSide(
                      color: Colors.green,
                      width: 2
                  ),
                  borderRadius: BorderRadius.circular(20)
              ),
              textColor: Colors.green,
              onPressed: (){},
            )
        )

Output:

raisedbutton widget rounded rectangle border

CircleBorder

Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:RaisedButton(
              child:Text("Button"),
              padding: EdgeInsets.symmetric(
                  horizontal: 30,
                  vertical: 30
              ),
              shape:CircleBorder(
                  side: BorderSide(
                      color: Colors.green,
                      width: 2
                  )
              ),
              textColor: Colors.green,
              onPressed: (){},
            )
        )

Output:

flutter raisedbutton widget circle border

BeveledRectangleBorder

Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:RaisedButton(
              child:Text("Button"),
              padding: EdgeInsets.symmetric(
                  horizontal: 30,
                  vertical: 30
              ),
              shape:BeveledRectangleBorder(
                  side: BorderSide(
                      color: Colors.green,
                      width: 2
                  ), 
                  borderRadius: BorderRadius.circular(15)
              ),
              textColor: Colors.green,
              onPressed: (){},
            )
        )

Output:

raisedbutton beveled recatngele border

That all about flutter Raisedbutton widget example tutorial. I’ll see you again with some other flutter tutorial.Have a great day!!

Do like and share if you find this post helpful.Thank you!!

Reference: Flutter Official Documentation.


Spread the love

AUTHOR

Naresh Pradeep

Hey there! I am the founder of CodesInsider and android developer.I love to code and build apps.


Related Posts

Leave a Reply

Your email address will not be published.