Buttons are the material components or widgets that allow a user a tap facility to take actions, make choices, submit forms, save data, or go to a new page, etc. In this article, you will learn the different types of buttons in Flutter.

Buttons are triggered when a user taps or clicks on them. To use the buttons in Flutter, you need to import the Material Component package from Flutter.

package:flutter/material.dart

Types of Buttons in Flutter

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

1. Elevated Button

It is the button that has a unique special feature of elevation. When an elevated button is pressed, its elevation will increase to a certain value. You can also style a bit of it, but it does not offer styling like the rest of the buttons.

Example:

ElevatedButton(
            style:  ElevatedButton.styleFrom(),
            onPressed: () {},
            child: const Text('Enabled'),
          ),
You can also disable the click or onTap of ElevatedButton by just simply making the onPressed method to null

ElevatedButton(
            style: ElevatedButton.styleFrom(),
            onPressed: null,
            child: const Text('Disabled'),
          ),

Output

2. Text Button

It is the simplest form of all the buttons. They are regular text without any boundaries or outlines. It has a style property that accepts ButtonStyle as a value, using this style property developers can customize the TextButton however they want.

Example:

TextButton(
              child:const Text(
                "Visit Flutter Junction",
                style: TextStyle(fontSize: 25),
              ),
              onPressed: () async {
                const String _url = "https://flutterjunction.com";
                if (await canLaunch(_url)) {
                  launch(_url);
                } else {
                  throw "Could not launch $_url";
                }
              },
 

Output

3. Floating Action Button

Floating Action Buttons are small buttons that are circular and hand on the screen of the application. They are implemented in the app’s UI to perform primary actions. You need to use at most a single floating action button per screen.

Example

 FloatingActionButton(
        onPressed: () {
          // Add your onPressed code here!
        },
        backgroundColor: Colors.green,
        child: const Icon(Icons.navigation),
      ),

Output

4. Dropdown Button

Dropdown buttons provide users to select an item from the number of items. It shows the presently selected item with the arrow that opens a menu to select the other item.

Example

const List<String> list = <String>['One', 'Two', 'Three', 'Four'];
String dropdownValue = list.first;

DropdownButton<String>(
      value: dropdownValue,
      icon: const Icon(Icons.arrow_downward),
      elevation: 16,
      style: const TextStyle(color: Colors.deepPurple),
      underline: Container(
        height: 2,
        color: Colors.deepPurpleAccent,
      ),
      onChanged: (String? value) {
        // This is called when the user selects an item.
        setState(() {
          dropdownValue = value!;
        });
      },
      items: list.map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
    )

5. Outlined Button

It is a special type of TextButton with an outlined border. Unlike ElevatedButton, it does not have or just slight elevation. You can modify these button styles by using the properties provided in the material package.

Example

OutlinedButton(
      onPressed: () {
        
      },
      child: const Text('Flutter Juction'),
    )

Output

6. Icon Button

It is the button with the icons present inside them. It is commonly used in the AppBar actions field but can be used in other parts also. It is used to create option tabs, profile screens, etc.

Example

IconButton(
          icon: const Icon(Icons.volume_up),
          tooltip: 'Increase volume by 10',
          onPressed: () {
            
          },
          )

7. PopUp Menu Button

These are represented by three vertical dots. It opens a menu bar from which user can select the option.

Example

PopupMenuButton<SampleItem>(
          initialValue: selectedMenu,
          // Callback that sets the selected popup menu item.
          onSelected: (SampleItem item) {
            setState(() {
              selectedMenu = item;
            });
          },
          itemBuilder: (BuildContext context) => <PopupMenuEntry<SampleItem>>[
            const PopupMenuItem<SampleItem>(
              value: SampleItem.itemOne,
              child: Text('Item 1'),
            ),
            const PopupMenuItem<SampleItem>(
              value: SampleItem.itemTwo,
              child: Text('Item 2'),
            ),
            const PopupMenuItem<SampleItem>(
              value: SampleItem.itemThree,
              child: Text('Item 3'),
            ),
          ],
        ),
      ),

Conclusion

In this article, you learned the different types of buttons in Flutter with their use and functionality.

I hope this blog post provides you with enough important information on how to create and work with different types of buttons in Flutter.

 Thanks for reading this article 

Also, follow to get updated on exciting articles and projects.

If I got something wrong? Let me know in the comments. I would love to improve.

Let’s get connected

We can be friends. Find on Facebook, Linkedin, Github, YouTube, 

BuyMeACoffee, and Instagram.

Contribute: BuyMeACoffee

Contact: Contact Us