Flutter Button Developer Guide

In this guide we will learn how to implement buttons in your flutter app. There are many classes or widgets which can be used to implements buttons in your flutter app. In this guide we will learn how to implement button functionality using material button widgets.

Flutter Button Developer Guide
Flutter Button Developer Guide

Widgets or Classes to implement button functionality

In this guide, we will learn all the material button widgets listed on the official flutter docs

Material Button Documentation

Let us start with the simplest way to implement buttons in flutter

1. FlatButton Class

Documentation

Also refer official class documentation with this guide to deeply understand the concept.

A flat button is a text label displayed on a zero elevation Material widget.

FlatButton Class Constructor

FlatButton({Key key, @required VoidCallback onPressed, ValueChanged<bool> onHighlightChanged, ButtonTextTheme textTheme, Color textColor, Color disabledTextColor, Color color, Color disabledColor, Color focusColor, Color hoverColor, Color highlightColor, Color splashColor, Brightness colorBrightness, EdgeInsetsGeometry padding, ShapeBorder shape, Clip clipBehavior, FocusNode focusNode, bool autofocus: false, MaterialTapTargetSize materialTapTargetSize, @required Widget child })

Required Parameters

FlatButton Implementation
FlatButton Implementation

let’s add some more properties like colors etc.

Refer official class documentation for property list

FlatButton Color Parameters
FlatButton Color Parameters

How to disable a button ?

Set onPressed VoidCallback to ‘null’

FlatButton Disabled
FlatButton Disabled

FlatButton.icon Constructor

FlatButton.icon Constructor
FlatButton.icon Constructor

2. RaisedButton Class

Documentation

Also refer official class documentation with this guide to deeply understand the concept.

Button with elevation

RaisedButton Class Constructor

RaisedButton({Key key, @required VoidCallback onPressed, ValueChanged<bool> onHighlightChanged, ButtonTextTheme textTheme, Color textColor, Color disabledTextColor, Color color, Color disabledColor, Color focusColor, Color hoverColor, Color highlightColor, Color splashColor, Brightness colorBrightness, double elevation, double focusElevation, double hoverElevation, double highlightElevation, double disabledElevation, EdgeInsetsGeometry padding, ShapeBorder shape, Clip clipBehavior, FocusNode focusNode, bool autofocus: false, MaterialTapTargetSize materialTapTargetSize, Duration animationDuration, Widget child })

Required Parameters

RaisedButton Implementation
RaisedButton Implementation

let’s add some more properties like colors etc.

Refer official class documentation for property list

RaisedButton Color Parameters
RaisedButton Color Parameters

RaisedButton.icon Constructor

RaisedButton.icon Constructor
RaisedButton.icon Constructor

3. IconButton Class

Documentation

Also refer official class documentation with this guide to deeply understand the concept.

IconButton Class Constructor

IconButton({Key key, double iconSize: 24.0, EdgeInsetsGeometry padding: const EdgeInsets.all(8.0), AlignmentGeometry alignment: Alignment.center, @required Widget icon, Color color, Color focusColor, Color hoverColor, Color highlightColor, Color splashColor, Color disabledColor, @required VoidCallback onPressed, FocusNode focusNode, bool autofocus: false, String tooltip })

Required Parameters

IconButton Class Implementation
IconButton Class Implementation

let’s add some more properties like colors etc.

Refer official class documentation for property list

IconButton Color Parameters
IconButton Color Parameters

4. FloatingActionButton Class

Documentation

Also refer official class documentation with this guide to deeply understand the concept.

FloatingActionButton Class Constructor

FloatingActionButton({Key key, Widget child, String tooltip, Color foregroundColor, Color backgroundColor, Color focusColor, Color hoverColor, Color splashColor, Object heroTag: const _DefaultHeroTag(), double elevation, double focusElevation, double hoverElevation, double highlightElevation, double disabledElevation, @required VoidCallback onPressed, bool mini: false, ShapeBorder shape, Clip clipBehavior: Clip.none, FocusNode focusNode, bool autofocus: false, MaterialTapTargetSize materialTapTargetSize, bool isExtended: false })

Required Parameters

Scaffold has a floatingActionButton Parameter

Scaffold Constructor Documentation

FloatingActionButton Implementation
FloatingActionButton Implementation

let’s add some more properties like colors etc.

Refer official class documentation for property list

FloatingActionButton Tooltip
FloatingActionButton Tooltip

FloatingActionButton.extended constructor

FloatingActionButton.extended({Key key, String tooltip, Color foregroundColor, Color backgroundColor, Color focusColor, Color hoverColor, Object heroTag: const _DefaultHeroTag(), double elevation, double focusElevation, double hoverElevation, Color splashColor, double highlightElevation, double disabledElevation, @required VoidCallback onPressed, ShapeBorder shape, bool isExtended: true, MaterialTapTargetSize materialTapTargetSize, Clip clipBehavior: Clip.none, FocusNode focusNode, bool autofocus: false, Widget icon, @required Widget label })

Required Parameters

FloatingActionButton.extended Constructor
FloatingActionButton.extended Constructor

5. ButtonBar Class

Documentation

Also refer official class documentation with this guide to deeply understand the concept.

ButtonBar Class Constructor

ButtonBar({Key key, MainAxisAlignment alignment: MainAxisAlignment.end, MainAxisSize mainAxisSize: MainAxisSize.max, List<Widget> children: const [] })

children [] — List of the buttons to be arranged horizontally.

lets add some more parameters or properties : refer official class documentation for property list

ButtonBar Implementation
ButtonBar Implementation

6. DropdownButton Class

Documentation

Also refer official class documentation with this guide to deeply understand the concept.

A drop-down button lets the user select from a number of items. Dropdown button allows us build simple input user interface to select list items. Common examples : select countries, currencies, states etc in our flutter app

DropdownButton Class Constructor

DropdownButton({Key key, @required List<DropdownMenuItem<T>> items, T value, Widget hint, Widget disabledHint, @required ValueChanged<T> onChanged, int elevation: 8, TextStyle style, Widget underline, Widget icon, Color iconDisabledColor, Color iconEnabledColor, double iconSize: 24.0, bool isDense: false, bool isExpanded: false })

Required Parameter

Implementation

5. items property will contain DropdownMenuItem class implementation as shown below

6. Main properties required to implement DropdownMenuItem class

DropdownButton Class Implementation
DropdownButton Class Implementation

let’s add some more properties like colors etc.

Refer official class documentation for property list

icon - The widget to use for the drop-down button’s icon

DropdownButton Class Properties
DropdownButton Class Properties

7. PopupMenuButton<T> class

Documentation

Also refer official class documentation with this guide to deeply understand the concept.

When this button is pressed, it displays a menu (pop-up menu).

PopupMenuButton Class Constructor

PopupMenuButton({Key key, @required PopupMenuItemBuilder<T> itemBuilder, T initialValue, PopupMenuItemSelected<T> onSelected, PopupMenuCanceled onCanceled, String tooltip, double elevation, EdgeInsetsGeometry padding: const EdgeInsets.all(8.0), Widget child, Icon icon, Offset offset: Offset.zero, bool enabled: true, ShapeBorder shape, Color color })

Required Parameters

Implementation

3. Main properties required to implement PopupMenuItem class

PopupMenuButton Class Implementation
PopupMenuButton Class Implementation

let’s add some more properties like colors etc.

Refer official class documentation for property list

PopupMenuButton Class Properties
PopupMenuButton Class Properties

PopupMenuButton Sample Implementation - Add Settings Popup Menu Button

Settings PopupMenuButton

Coding - Sample Flutter App Code

Bonus Tip : Also refer the following classes to improve your PopupMenu UI

There are two more classes using which we can implement button functionality :

We will learn the above two classes in Flutter Gestures Developer Guide.

Originally published at https://blog.akshatapp.com on November 27, 2019.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
AkshatApp

Helping designers and developers build high quality websites and cross platform mobile apps with our step-by-step developer guides 📚 at akshatapp.com