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
- Elevated Button
- Text Button
- Floating Action Button
- Dropdown Button
- Outlined Button
- Icon Button
- 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
Leave a Reply