Flutter – Working with Material Button

Buttons are material components that provide the user a single tap facility for taking actions, making choices, submitting forms, saving data, opening a new page, etc. Buttons are triggered when the user taps on them. They are the most commonly used feature provided in almost all the flutter apps. For using buttons you need to import the Material Components package for flutter i.e. “package:flutter/material.dart“. Based on their classification, buttons are divided into two categories – deprecated and un-deprecated. The button works on material apps only.

Special features of a button:

• Easy addition of different child widgets for different purposes
• Easy theming of the buttons
• Easy addition of themed text and icons
• Provide action functionalities

Types of Buttons

Buttons are classified broadly into the following categories:

1. Elevated Button
2. Floating Action Button
3. Outlined Button
4. Icon Button
5. Text Button
6. Dropdown Button
7. PopUp Menu Button

Flat Button & Raised Button classes have been deprecated in the flutter. Instead, we can use Text Button and Elevated Button classes to achieve the same result. 

Given below is a brief description of each of the categories:

1. Flat Button

These are simple buttons with no extra styling embedded. There is no elevation factor included and the button is just a text enclosed by a colored boundary. 

Example:

            // DEPRECATED 

                // FlatButton(
                //   color: Colors.green,
                //   child: const Text(
                //     'Flat Button',
                //     style: TextStyle(color: Colors.white),
                //   ),
                //   onPressed: () {},
                // ),
                
            // We can achieve same results with Text Button also


                TextButton(
                  onPressed: () {},
                  child: Container(
                    color: Colors.green,
                    padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                    child: const Text(
                      'Flat Button',
                      style: TextStyle(color: Colors.white, fontSize: 13.0),
                    ),
                  ),
                ),

Output:

 

2. Raised Button

These buttons are slightly elevated from the screen  They have styling options inside them. It is always preferable to avoid raised contents in materials that are already raised.

Example:

            // DEPRECATED
      // RaisedButton(
                //   color: Colors.green,
                //   textColor: Colors.white,
                //   elevation: 10,
                //   child: Text(
                //     'Raised Button',
                //   ),
                //   onPressed: () {},
                // ),
                
                
           
             // We can achieve same results with Raised Button also


                ElevatedButton(
                  onPressed: () {},
                  // style: ButtonStyle(elevation: MaterialStateProperty(12.0 )),
                  style: ElevatedButton.styleFrom(
                      elevation: 12.0,
                      textStyle: const TextStyle(color: Colors.white)),
                  child: const Text('Elevated Button'),
                ),

Output:

 

3. Elevated Button

This button has a special feature of increased elevation. When an elevated button is pressed its elevation is increased to a certain value. They do not offer straightforward styling like the rest of the buttons, but you can use a styleFrom method to style an elevated button explicitly.

Example:

ElevatedButton(
              child: const Text(
                'Raised Button',
              ),
              onPressed: () {},
            ),

Output:

4. Floating Action Button

These are small circular buttons that hang on the screen of the application. You can set the position of your action button by using but by default, it is placed at the center of the screen. They create a hovering effect when tapped.

FloatingActionButton(
              child: Icon(Icons.person),
              backgroundColor: Colors.green,
              foregroundColor: Colors.white,
              onPressed: () {},
            ),

Output:

 

5. Outlined Button

These are simple buttons with text in the center enclosed by a thin border. You can modify the styling of these buttons by using properties provided in the material package. They have a slight elevation.

Example:

OutlinedButton(
               child: Text(
                "Outlined Button",
                style: TextStyle(
                  color: Colors.green,
                ),
              ),
              onPressed: () {},
            ),

Output:

 

6. Icon Button

These are picturized buttons with colors filled inside them. Icon Buttons represent a cartoonish image of the category defined inside. These are used to create profile screens, option tabs, etc.

Example:

IconButton(
           splashColor: Colors.yellow,
              icon: Icon(Icons.code),
              color: Colors.green,
              onPressed: () {},
            ),

Output:

7. Text Button

The simplest of all the buttons is a text button. They are regular text without any outline or boundary. 

Example:

TextButton(
           child: Text(
                "Text Button",
                style: TextStyle(
                  color: Colors.green,
                ),
              ),
              onPressed: () {},
            ),

Output:

 

8. Drop Down button:  These buttons provide an option to be chosen to form a list of available options. It is a drop-down list.

Example:

Output:

9. Pop Up Menu Button

It is represented by three vertical dots. It displays a menu bar from which the user selects his chosen option. 

Example:

Output:

How to add a button to your application?

Given below are the basic steps you always need to perform while creating a button.

1. Create a parent widget for whom you want to set your button as a child 
2. Add the child property for the respective parent widget
3. Explore the requirements of your app and choose which type of button you want to add to it.
4. Declare the button and add the styling.
5. Modify your button using the in-built theming properties provided by the material package. 

Example:

Suppose you want to create a raised button that has an icon of a favorite titled alongside “GeeksforGeeks is” as text. 

Step 1: Since it is an elevated button that will have a text widget and an icon side-by-side, let’s enclose it in a Column widget as its parent.

Step 2: Create a child property to which well will assign our button.

Step 3: Add the required theming to your button according to your choice.

Step 4: Add elevatedbutton and icon to your column

Step 5: Beautify your button.

Implementation:

Output: