Flutter Buttons
Buttons are control elements that provide a trigger to start an event such as taking actions, search. They can be placed anywhere on the UI like dialogs, forms, cards, toolbars, etc.
Buttons are the widgets, which are a part of the material design library. Flutter provides several types of buttons with different shapes, styles, and features.
Types of Flutter Buttons
These are some of the different types of button available:
- Flat Button
- Raised Button
- Floating Button
- Drop Down Button
- Icon Button
- Inkwell Button
- Inkwell Button
- PopupMenu Button
Let us discuss each button in detail.
1. Flat Button
This is a text label button that doesn’t have much decoration and is displayed without any elevation. It has two required properties which are: child and onPressed(). It is mostly used in the toolbars, or in a dialog box, or inline with other content. By default, it has no color, and its text color is black. But, we can add color to the button and text using color and textColor property, respectively.
Example
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State{ @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Flutter FlatButton Example'), ), body: Center(child: Column(children: [ Container( margin: EdgeInsets.all(25), child: FlatButton( child: Text('SignUp', style: TextStyle(fontSize: 20.0),), onPressed: () {}, ), ), Container( margin: EdgeInsets.all(25), child: FlatButton( child: Text('LogIn', style: TextStyle(fontSize: 20.0),), color: Colors.blueAccent, textColor: Colors.white, onPressed: () {}, ), ), ] )) ), ); } }
Output
2. Raised Button
This button is based on the material widget and has a rectangular body. It’s similar to a flat button, but it has an elevation that will increase when the button is pressed by the user. It adds dimension also to the UI along the Z-axis. It has many properties like text color, shape, padding, button color, the color button when disabled, animation time, elevation, etc.
It has two callback functions.
- onPressed(): It gets triggered when the button is pressed.
- onLongPress(): It gets triggered when the button is pressed for a long time.
It is to note that this button is in a disabled state if onPressed() and onLongPressed() callbacks are not specified.
Example:
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State{ String msg = 'Flutter RaisedButton Example'; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Flutter RaisedButton Example'), ), body: Container( child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text(msg, style: TextStyle(fontSize: 30, fontStyle: FontStyle.italic),), RaisedButton( child: Text("Click Here", style: TextStyle(fontSize: 20),), onPressed: _changeText, color: Colors.red, textColor: Colors.yellow, padding: EdgeInsets.all(8.0), splashColor: Colors.grey, ) ], ), ), ), ), ); } _changeText() { setState(() { if (msg.startsWith('F')) { msg = 'We have learned FlutterRaised button example.'; } else { msg = 'Flutter RaisedButton Example'; } }); } }
Output:


3. Floating Action Button
- FloatingActionButton: It is a simple circular floating button with a child widget inside it. It must have a child parameter to display the widget.
- FloatingActionButton.extended: It is a wide floating button along with an icon and a label
Example:
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State{ @override Widget build(BuildContext context) { return MaterialApp(home: Scaffold( appBar: AppBar( title: Text("FAB Button Example"), backgroundColor: Colors.blue, actions: [ IconButton(icon: Icon(Icons.camera_alt), onPressed: () => {}), IconButton(icon: Icon(Icons.account_circle), onPressed: () => {}) ], ), floatingActionButton: FloatingActionButton( child: Icon(Icons.navigation), backgroundColor: Colors.green, foregroundColor: Colors.white, onPressed: () => {}, ), /*floatingActionButton:FloatingActionButton.extended( onPressed: () {}, icon: Icon(Icons.save), label: Text("Save"), ), */ ), ); } }
Output


4. DropDown Button
A drop-down button is used to create a nice overlay that allows the user to select any item from multiple items. Flutter provides a simple way of implementing a drop-down box or drop-down button. This button shows the currently selected item and an arrow that will open a menu to select an item.
Example:
import 'package:flutter/material.dart'; void main() => runApp(MaterialApp( home: MyApp(), )); class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State{ List _dropdownItems = [ ListItem(1, "GeeksforGeeks"), ListItem(2, "Javatpoint"), ListItem(3, "tutorialandexample"), ListItem(4, "guru99") ]; List > _dropdownMenuItems; ListItem _itemSelected; void initState() { super.initState(); _dropdownMenuItems = buildDropDownMenuItems(_dropdownItems); _itemSelected = _dropdownMenuItems[1].value; } List > buildDropDownMenuItems(List listItems) { List > items = List(); for (ListItem listItem in listItems) { items.add( DropdownMenuItem( child: Text(listItem.name), value: listItem, ), ); } return items; } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("DropDown Button Example"), ), body: Column( children: [ Padding( padding: const EdgeInsets.all(10.0), child: Container( padding: const EdgeInsets.all(5.0), decoration: BoxDecoration( color: Colors.greenAccent, border: Border.all()), child: DropdownButtonHideUnderline( child: DropdownButton( value: _itemSelected, items: _dropdownMenuItems, onChanged: (value) { setState(() { _itemSelected = value; }); }), ), ), ), Text("We have selected ${_itemSelected.name}"), ], ), ); } } class ListItem { int value; String name; ListItem(this.value, this.name); }
Output


5. Icon Button
An IconButton is a button with an icon in the Material widget. It is used as a widget that gives the Flutter UI a material design feel. We can customize the look and feel of the button.
Example:
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Icon Button Example"), ), body: Center( child: MyStatefulWidget(), ), ), ); } } double _speakervolume = 0.0; class MyStatefulWidget extends StatefulWidget { MyStatefulWidget({Key key}) : super(key: key); @override _MyStatefulWidgetState createState() => _MyStatefulWidgetState(); } class _MyStatefulWidgetState extends State{ Widget build(BuildContext context) { return Column( mainAxisSize: MainAxisSize.min, children: [ IconButton( icon: Icon(Icons.volume_up), iconSize: 50, color: Colors.brown, tooltip: 'Increase volume by 5', onPressed: () { setState(() { _speakervolume += 5; }); }, ), Text('Speaker Volume: $_speakervolume') ], ); } }
Output
Run the application. When you press the volume icon button, it will always increase by 5.
6. Inkwell Button
InkWell button is a material design button, which is used to get a touch response. This is used for adding splash ripple effect to the button.
Example:
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State{ int _volume = 0; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('InkWell Button Example'), ), body: Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: [ InkWell( splashColor: Colors.green, highlightColor: Colors.blue, child: Icon(Icons.ring_volume, size: 50), onTap: () { setState(() { _volume += 2; }); }, ), Text ( _volume.toString(), style: TextStyle(fontSize: 50) ), ], ), ), ), ); } }
Output
Every time you press the ring volume button, it will increase the volume by 2.
7. PopupMenu Button
This button displays the menu when it gets pressed and it calls the onSelected method the menu it gets dismissed. PopUpMenuButton contains a text and an image. It is mainly used in the Settings menu to list all options.
Example:
Open the main.dart file and replace it with the below code.
import 'package:flutter/material.dart'; void main() { runApp(MyApp());} class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State{ Choice _selectedOption = choices[0]; void _select(Choice choice) { setState(() { _selectedOption = choice; }); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text('PopupMenu Button Example'), actions: [ PopupMenuButton ( onSelected: _select, itemBuilder: (BuildContext context) { return choices.skip(0).map((Choice choice) { return PopupMenuItem ( value: choice, child: Text(choice.name), ); }).toList(); }, ), ], ), body: Padding( padding: const EdgeInsets.all(10.0), child: ChoiceCard(choice: _selectedOption), ), ), ); } } class Choice { const Choice({this.name, this.icon}); final String name; final IconData icon; } const List choices = const [ const Choice(name: 'Wi-Fi', icon: Icons.wifi), const Choice(name: 'Bluetooth', icon: Icons.bluetooth), const Choice(name: 'Battery', icon: Icons.battery_alert), const Choice(name: 'Storage', icon: Icons.storage), ]; class ChoiceCard extends StatelessWidget { const ChoiceCard({Key key, this.choice}) : super(key: key); final Choice choice; @override Widget build(BuildContext context) { final TextStyle textStyle = Theme.of(context).textTheme.headline; return Card( color: Colors.greenAccent, child: Center( child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.center, children: [ Icon(choice.icon, size: 115.0, color: textStyle.color), Text(choice.name, style: textStyle), ], ), ), ); } }
Output

