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),  
          ],  
        ),  
      ),  
    );  
  }  
}

Flutter Introduction

Flutter Basics

Flutter Widgets

Flutter Routing

Advanced Concepts

Interview Questions

Flutter Buttons

Types of Flutter Buttons

1. Flat Button

Example

Output

2. Raised Button

It has two callback functions.

Example:

Output:

3. Floating Action Button

Example:

Output

4. DropDown Button

Example:

Output

5. Icon Button

Example:

Output

6. Inkwell Button

Example:

Output

7. PopupMenu Button

Example:

Output