Flutter Buttons

Buttons are the graphical control element that provides a user to trigger an
event such as taking actions, making choices, searching things, and many more. They
can be placed anywhere in our UI like dialogs, forms, cards, toolbars, etc.

Buttons are the Flutter widgets, which is a part of the material design library. Flutter
provides several types of buttons that have different shapes, styles, and features.

Features of Buttons
The standard features of a button in Flutter are given below:

1. We can easily apply themes on buttons, shapes, color, animation, and behavior.
2. We can also theme icons and text inside the button.
3. Buttons can be composed of different child widgets for different characteristics.

Types of Flutter Buttons

Following are the different types of button available in Flutter:

ADVERTISEMENT

ADVERTISEMENT
ADVERTISEMENT

o Flat Button
o Raised Button
o Floating Button
o Drop Down Button
o Icon Button
o Inkwell Button
o PopupMenu Button
o Outline Button

Let us discuss each button in detail.

1. Flat Button
It is a text label button that does not have much decoration and displayed without
any elevation. The flat button has two required properties that are: child and
 onPressed(). It is mostly used in toolbars, dialogs, or inline with other content. By
default, the flat button has no color, and its text is black. But, we can use color to the
button and text using color and textColor attributes, respectively.

Example:

Open the main.dart file and replace it with the below code.

1. import 'package:flutter/material.dart';
2.
3. void main() {
4. runApp(MyApp());
5. }
6.
7. class MyApp extends StatefulWidget {
8. @override
9. _MyAppState createState() => _MyAppState();
10. }
11.
12. class _MyAppState extends State<MyApp> {
13. @override
14. Widget build(BuildContext context) {
15. return MaterialApp(
16. home: Scaffold(
17. appBar: AppBar(
18. title: Text('Flutter FlatButton Example'),
19. ),
20. body: Center(child: Column(children: <Widget>[
21. Container(
22. margin: EdgeInsets.all(25),
23. child: FlatButton(
24. child: Text('SignUp', style: TextStyle(fontSize: 20.0),),
25. onPressed: () {},
26. ),
27. ),
28. Container(
29. margin: EdgeInsets.all(25),
30. child: FlatButton(
31. child: Text('LogIn', style: TextStyle(fontSize: 20.0),),
32. color: Colors.blueAccent,
33. textColor: Colors.white,
34. onPressed: () {},
35. ),
36. ),
37. ]
38. ))
39. ),
40. );
41. }
42. }

Output:

If we run this app, we will see the following screen:

ADVERTISEMENT
ADVERTISEMENT
2. Raised Button
It is a button, which is based on the material widget and has a rectangular body. It is
similar to a flat button, but it has an elevation that will increases when the button is
pressed. It adds dimension to the UI along Z-axis. It has several properties like text
color, shape, padding, button color, the color of a button when disabled, animation
time, elevation, etc.

This button has two callback functions.

onPressed(): It is triggered when the button is pressed.

onLongPress(): It is triggered when the button is long pressed.

It is to note that this button is in a disabled state if onPressed() and onLongPressed()

callbacks are not specified.

Example:
 Open the main.dart file and replace it with the below code.

1. import 'package:flutter/material.dart';
2.
3. void main() {
4. runApp(MyApp());
5. }
6.
7. class MyApp extends StatefulWidget {
8. @override
9. _MyAppState createState() => _MyAppState();
10. }
11.
12. class _MyAppState extends State<MyApp> {
13. String msg = 'Flutter RaisedButton Example';
14. @override
15. Widget build(BuildContext context) {
16. return MaterialApp(
17. home: Scaffold(
18. appBar: AppBar(
19. title: Text('Flutter RaisedButton Example'),
20. ),
21. body: Container(
22. child: Center(
23. child: Column(
24. mainAxisAlignment: MainAxisAlignment.center,
25. children: [
26. Text(msg, style: TextStyle(fontSize: 30, fontStyle: FontStyle.italic),),
27. RaisedButton(
28. child: Text("Click Here", style: TextStyle(fontSize: 20),),
29. onPressed: _changeText,
30. color: Colors.red,
31. textColor: Colors.yellow,
32. padding: EdgeInsets.all(8.0),
33. splashColor: Colors.grey,
34. )
35. ],
36. ),
37. ),
38. ),
39. ),
40. );
41. }
42. _changeText() {
43. setState(() {
44. if (msg.startsWith('F')) {
45. msg = 'We have learned FlutterRaised button example.';
46. } else {
47. msg = 'Flutter RaisedButton Example';
48. }
49. });
50. }
51. }

Output:

When we run this example, it will give the below screenshot. If we click on the "Click
Here" button, it will change the text message. Show the second screenshot.
3. Floating Action Button
A FAB button is a circular icon button that triggers the primary action in our
application. It is the most used button in today's applications. We can use this button
for adding, refreshing, or sharing the content. Flutter suggests using at most one FAB
button per screen. There are two types of Floating Action Button:

ADVERTISEMENT
ADVERTISEMENT

FloatingActionButton: It creates a simple circular floating button with a child widget

inside it. It must have a child parameter to display a widget.

FloatingActionButton.extended: It creates a wide floating button along with an icon

and a label inside it. Instead of a child, it uses labels and icon parameters.

Example:

Open the main.dart file and replace it with the below code.
1. import 'package:flutter/material.dart';
2.
3. void main() {
4. runApp(MyApp());
5. }
6.
7. class MyApp extends StatefulWidget {
8. @override
9. _MyAppState createState() => _MyAppState();
10. }
11.
12. class _MyAppState extends State<MyApp> {
13. @override
14. Widget build(BuildContext context) {
15. return MaterialApp(home: Scaffold(
16. appBar: AppBar(
17. title: Text("FAB Button Example"),
18. backgroundColor: Colors.blue,
19. actions: <Widget>[
20. IconButton(icon: Icon(Icons.camera_alt), onPressed: () => {}),
21. IconButton(icon: Icon(Icons.account_circle), onPressed: () => {})
22. ],
23. ),
24. floatingActionButton: FloatingActionButton(
25. child: Icon(Icons.navigation),
26. backgroundColor: Colors.green,
27. foregroundColor: Colors.white,
28. onPressed: () => {},
29. ),
30. /*floatingActionButton:FloatingActionButton.extended(
31. onPressed: () {},
32. icon: Icon(Icons.save),
33. label: Text("Save"),
34. ), */
35. ),
36. );
37. }
38. }

Output:

Run the application in android emulator, and it will give the UI similar to the following
screenshot. The second image is an output of the FAB.extended button. Its coding
can be seen in the above code's comment section.

ADVERTISEMENT

4. DropDown Button
A drop-down button is used to create a nice overlay on the screen that allows the user
to select any item from multiple options. Flutter allows a simple way to implement a
drop-down box or drop-down button. This button shows the currently selected item
and an arrow that opens a menu to select an item from multiple options.

Flutter provides a DropdownButton widget to implement a drop-down list. We can

place it anywhere in our app.
 Example

Open the main.dart file and replace it with the below code.

1. import 'package:flutter/material.dart';
2.
3. void main() => runApp(MaterialApp(
4. home: MyApp(),
5. ));
6.
7. class MyApp extends StatefulWidget {
8. @override
9. _MyAppState createState() => _MyAppState();
10. }
11.
12. class _MyAppState extends State<MyApp> {
13. List<ListItem> _dropdownItems = [
14. ListItem(1, "GeeksforGeeks"),
15. ListItem(2, "Javatpoint"),
16. ListItem(3, "tutorialandexample"),
17. ListItem(4, "guru99")
18. ];
19.
20. List<DropdownMenuItem<ListItem>> _dropdownMenuItems;
21. ListItem _itemSelected;
22.
23. void initState() {
24. super.initState();
25. _dropdownMenuItems = buildDropDownMenuItems(_dropdownItems);
26. _itemSelected = _dropdownMenuItems[1].value;
27. }
28.
29. List<DropdownMenuItem<ListItem>> buildDropDownMenuItems(List listItems) {

30. List<DropdownMenuItem<ListItem>> items = List();

31. for (ListItem listItem in listItems) {
32. items.add(
33. DropdownMenuItem(
34. child: Text(listItem.name),
35. value: listItem,
36. ),
37. );
38. }
39. return items;
40. }
41.
42. @override
43. Widget build(BuildContext context) {
44. return Scaffold(
45. appBar: AppBar(
46. title: Text("DropDown Button Example"),
47. ),
48. body: Column(
49. children: <Widget>[
50. Padding(
51. padding: const EdgeInsets.all(10.0),
52. child: Container(
53. padding: const EdgeInsets.all(5.0),
54. decoration: BoxDecoration(
55. color: Colors.greenAccent,
56. border: Border.all()),
57. child: DropdownButtonHideUnderline(
58. child: DropdownButton(
59. value: _itemSelected,
60. items: _dropdownMenuItems,
61. onChanged: (value) {
62. setState(() {
63. _itemSelected = value;
64. });
65. }),
66. ),
67. ),
68. ),
69. Text("We have selected ${_itemSelected.name}"),
70. ],
71. ),
72. );
73. }
74. }
75.
76. class ListItem {
77. int value;
78. String name;
79.
80. ListItem(this.value, this.name);
81. }

Output

Run the application in android emulator, and it will give the UI similar to the following
screenshot. The second image is an output of the list contains in the drop drown
button.
 5. Icon Button
An IconButton is a picture printed on the Material widget. It is a useful widget that
gives the Flutter UI a material design feel. We can also customize the look and feel of
this button. In simple terms, it is an icon that reacts when the user will touch it.

Example:

Open the main.dart file and replace it with the below code.

1. import 'package:flutter/material.dart';
2.
3. void main() => runApp(MyApp());
4.
5. class MyApp extends StatelessWidget {
6. @override
7. Widget build(BuildContext context) {
8. return MaterialApp(
9. home: Scaffold(
10. appBar: AppBar(
11. title: Text("Icon Button Example"),
12. ),
13. body: Center(
14. child: MyStatefulWidget(),
15. ),
16. ),
17. );
18. }
19. }
20. double _speakervolume = 0.0;
21.
22. class MyStatefulWidget extends StatefulWidget {
23. MyStatefulWidget({Key key}) : super(key: key);
24.
25. @override
26. _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
27. }
28.
29. class _MyStatefulWidgetState extends State<MyStatefulWidget> {
30. Widget build(BuildContext context) {
31. return Column(
32. mainAxisSize: MainAxisSize.min,
33. children: <Widget>[
34. IconButton(
35. icon: Icon(Icons.volume_up),
36. iconSize: 50,
37. color: Colors.brown,
38. tooltip: 'Increase volume by 5',
39. onPressed: () {
40. setState(() {
41. _speakervolume += 5;
42. });
43. },
44. ),
45. Text('Speaker Volume: $_speakervolume')
46. ],
47. );
48. }
49. }

Output:

Run the application in android emulator, and it will give the UI similar to the following
screenshot. When we press the volume button, it will always increase by 5.
 6. Inkwell Button
InkWell button is a material design concept, which is used for touch response. This
widget comes under the Material widget where the ink reactions are actually painted.
It creates the app UI interactive by adding gesture feedback. It is mainly used for
adding splash ripple effect.

Example:

Open the main.dart file and replace it with the below code.

1. import 'package:flutter/material.dart';
2.
3. void main() => runApp(MyApp());
4.
5. class MyApp extends StatefulWidget {
6. @override
7. _MyAppState createState() => _MyAppState();
8. }
9.
10. class _MyAppState extends State<MyApp> {
11. int _volume = 0;
12.
13. @override
14. Widget build(BuildContext context) {
15. return MaterialApp(
16. home: Scaffold(
17. appBar: AppBar(
18. title: Text('InkWell Button Example'),
19. ),
20. body: Center(
21. child: new Column(
22. mainAxisAlignment: MainAxisAlignment.center,
23. children: <Widget>[
24. InkWell(
25. splashColor: Colors.green,
26. highlightColor: Colors.blue,
27. child: Icon(Icons.ring_volume, size: 50),
28. onTap: () {
29. setState(() {
30. _volume += 2;
31. });
32. },
33. ),
34. Text (
35. _volume.toString(),
36. style: TextStyle(fontSize: 50)
37. ),
38. ],
39. ),
40. ),
41. ),
42. );
43. }
44. }
Output:

ADVERTISEMENT
ADVERTISEMENT

Run the application in android emulator, and it will give the UI similar to the following
screenshot. Every time we press the ring volume button, it will increase the volume by
2.

7. PopupMenu Button
It is a button that displays the menu when it is pressed and then calls
the onSelected method the menu is dismissed. It is because the item from the
multiple options is selected. This button contains a text and an image. It will mainly
use with Settings menu to list all options. It helps in making a great user experience.

Example:

Open the main.dart file and replace it with the below code.
1. import 'package:flutter/material.dart';
2.
3. void main() { runApp(MyApp());}
4.
5. class MyApp extends StatefulWidget {
6. @override
7. _MyAppState createState() => _MyAppState();
8. }
9.
10. class _MyAppState extends State<MyApp> {
11. Choice _selectedOption = choices[0];
12.
13. void _select(Choice choice) {
14. setState(() {
15. _selectedOption = choice;
16. });
17. }
18. @override
19. Widget build(BuildContext context) {
20. return MaterialApp(
21. home: Scaffold(
22. appBar: AppBar(
23. title: const Text('PopupMenu Button Example'),
24. actions: <Widget>[
25. PopupMenuButton<Choice>(
26. onSelected: _select,
27. itemBuilder: (BuildContext context) {
28. return choices.skip(0).map((Choice choice) {
29. return PopupMenuItem<Choice>(
30. value: choice,
31. child: Text(choice.name),
32. );
33. }).toList();
34. },
35. ),
36. ],
37. ),
38. body: Padding(
39. padding: const EdgeInsets.all(10.0),
40. child: ChoiceCard(choice: _selectedOption),
41. ),
42. ),
43. );
44. }
45. }
46.
47. class Choice {
48. const Choice({this.name, this.icon});
49. final String name;
50. final IconData icon;
51. }
52.
53. const List<Choice> choices = const <Choice>[
54. const Choice(name: 'Wi-Fi', icon: Icons.wifi),
55. const Choice(name: 'Bluetooth', icon: Icons.bluetooth),
56. const Choice(name: 'Battery', icon: Icons.battery_alert),
57. const Choice(name: 'Storage', icon: Icons.storage),
58. ];
59.
60. class ChoiceCard extends StatelessWidget {
61. const ChoiceCard({Key key, this.choice}) : super(key: key);
62.
63. final Choice choice;
64.
65. @override
66. Widget build(BuildContext context) {
67. final TextStyle textStyle = Theme.of(context).textTheme.headline;
68. return Card(
69. color: Colors.greenAccent,
70. child: Center(
71. child: Column(
72. mainAxisSize: MainAxisSize.min,
73. crossAxisAlignment: CrossAxisAlignment.center,
74. children: <Widget>[
75. Icon(choice.icon, size: 115.0, color: textStyle.color),
76. Text(choice.name, style: textStyle),
77. ],
78. ),
79. ),
80. );
81. }
82. }

Output:

Run the application in android emulator, and it will give the UI similar to the following
screenshot. When we click the three dots shown at the top left corner of the screen,
it will pop up the multiple options. Here, we can select any option, and it will keep it in
the card, as shown in the second image.

8. Outline Button
 It is similar to the flat button, but it contains a thin grey rounded rectangle border. Its
outline border is defined by the shape attribute.

Example:

Open the main.dart file and replace it with the below code.

1. import 'package:flutter/material.dart';
2.
3. void main() {
4. runApp(MyApp());
5. }
6.
7. class MyApp extends StatefulWidget {
8. @override
9. _MyAppState createState() => _MyAppState();
10. }
11.
12. class _MyAppState extends State<MyApp> {
13. @override
14. Widget build(BuildContext context) {
15. return MaterialApp(
16. home: Scaffold(
17. appBar: AppBar(
18. title: Text('Outline Button Example'),
19. ),
20. body: Center(child: Column(children: <Widget>[
21. Container(
22. margin: EdgeInsets.all(25),
23. child: OutlineButton(
24. child: Text("Outline Button", style: TextStyle(fontSize: 20.0),),
25. highlightedBorderColor: Colors.red,
26. shape: RoundedRectangleBorder(
27. borderRadius: BorderRadius.circular(15)),
28. onPressed: () {},
29. ),
30. ),
31. Container(
32. margin: EdgeInsets.all(25),
33. child: FlatButton(
34. child: Text('Flat Button', style: TextStyle(fontSize: 20.0),),
35. color: Colors.blueAccent,
36. textColor: Colors.white,
37. onPressed: () {},
38. ),
39. ),
40. ]
41. ))
42. ),
43. );
44. }
45. }

Output:

Run the application in android emulator, and it will give the UI similar to the following
screenshot.
 Button Bar
Flutter provides the flexibility to arrange the buttons in a bar or a row. ButtonBar
widget contains three properties: alignment, children, and mainAxisSize.

o Alignment is used to present the aligning option to the entire button bar
widget.
o Children attribute is used to take the number of buttons in a bar.
o mainAxisSize attribute is used to provide the horizontal space for the button
bar.

Example:

Open the main.dart file and replace it with the below code.

ADVERTISEMENT

1. import 'package:flutter/material.dart';
2.
3. void main() {
4. runApp(MaterialApp( home: MyApp(),));
5. }
6.
7. class MyApp extends StatefulWidget {
8. @override
9. _State createState() => _State();
10. }
11.
12. class _State extends State<MyApp> {
13. @override
14. Widget build(BuildContext context) {
15. return Scaffold(
16. appBar: AppBar(
17. title: Text('Flutter ButtonBar Example'),
18. ),
19. body: Padding(
20. padding: EdgeInsets.all(10),
21. child: Column(
22. children: <Widget>[
23. Padding(
24. padding: EdgeInsets.all(15),
25. child: new ButtonBar(
26. mainAxisSize: MainAxisSize.min,
27. children: <Widget>[
28. RaisedButton(
29. child: new Text('Javatpoint'),
30. color: Colors.lightGreen,
31. onPressed: () {/** */},
32. ),
33. FlatButton(
34. child: Text('Flutter'),
35. color: Colors.lightGreen,
36. onPressed: () {/** */},
37. ),
38. FlatButton(
39. child: Text('MySQL'),
40. color: Colors.lightGreen,
41. onPressed: () {/** */},
42. ),
43. ],
44. ),
45. ),
46. ],
47. )
48. )
49. );
50. }
51. }

Output:

Run the application in android emulator, and it will give the UI similar to the following
screenshot. Here, we can see that the three buttons are placed in a horizontal bar or
row.