See All Types Button In Flutter

Flutter / By Rakesh Saini / August 8, 2021

Button in flutter are mainly used to perform some task like click or move to another place in flutter screens. Or also used to execute some task when we press or click on that button.

Buttons are widgets of flutter which perform some task. These are a part of material library. Basically flutter provides many types of button which are different in shape, feature and style.

Features of button in flutter

We can perform any event on any button.
We can change the style of the button.
Also we can add icons and custom shapes

Types of Button

Following are the major types of button:

FlatButton
RaisedButton
OutlineButton
TextButton
ElevatedButton
OutlinedButton

I am describing each button with example in the following way –

Note: Please note that some buttons are deprecated by flutter. FlatButton, RaisedButton, OutlineButton are replaced by TextButton, ElevatedButton and OutlinedButton. And themes are replaced by TextButtonTheme, ElevatedButtonTheme and OutlinedButtonTheme.

So i changed the color of first three buttons in line above. You can understand.

1. Text Button in flutter

TextButton in flutter mainly used in toolbar, dialog, inline and with other component. This button matched to the content area because this button doesn’t has elevation.

This is a part of material design. You can use onPress() and onLongPress() callbacks methods. You can visit official flutter website to see more features of TextButton.

TextButton(
              onPressed: null,
              child: Text("Text Button"),
              style: TextButton.styleFrom(
                  padding: EdgeInsets.all(15),
                  primary: Colors.blue,
                  textStyle: TextStyle(fontSize: 18, color: Colors.red)),
            ),

2. Elevated Button in flutter

This button has elevation so avoid using this when content already has shadow and elevation. Generally ElevatedButtonTheme is used to style this button. This is material design component you can design accordingly.

ElevatedButton(
                  onLongPress: null,
                  style: ElevatedButton.styleFrom(
                      primary: Colors.grey,
                      shadowColor: Colors.black,
                      elevation: 10,
                      textStyle:
                          TextStyle(fontSize: 16, color: Colors.black26)),
                  onPressed: null,
                  child: Text(
                    "Elevated Button",
                  ),
                ),

3. Outlined Button

Outlined Button is similar to Text Button. As name indicates that this button has outline border which makes it different from other buttons.

 OutlinedButton(
                    onLongPress: null,
                    style: OutlinedButton.styleFrom(primary: Colors.blue),
                    onPressed: null,
                    child: Text(
                      "Ouotlined Button",
                      style: TextStyle(
                        fontSize: 18,
                      ),
                    )),

I created all three button in single screen, so please see the screenshot below.