Skip to main content

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


  • Basic Widgets or Classes to implement button functionality
    • FlatButton Class
    • RaisedButton Class
    • IconButton Class
    • FloatingActionButton Class
  • Advanced Widgets or Classes to implement button functionality
    • ButtonBar
    • DropdownButton
    • PopupMenuButton
In this guide, we will cover all the material button widgets listed on the official flutter docs - Material Button Documentation

Flutter Material Button Documentation
Flutter 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 
  • 'onPressed' parameter is required
  • 'child' parameter is required
FlatButton Implementation
FlatButton Implementation
lets add some more parameters or properties : 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
  • 'onPressed' parameter is required
RaisedButton Implementation
RaisedButton Implementation
lets add some more parameters or properties : 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
  • 'onPressed' parameter is required
  • 'icon' parameter is required
IconButton Class Implementation
IconButton Class Implementation
lets add some more parameters or properties : 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.
  • floating action button is a circular icon button that hovers over content to promote a primary action.
  • Use at most single floating action button per screen
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
  • 'onPressed' parameter is required
Scaffold has a floatingActionButton Parameter - Scaffold Constructor Documentation

FloatingActionButton Implementation
FloatingActionButton Implementation
lets add some more parameters or properties : 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
  • 'onPressed' parameter is required
  • 'label' parameter is required
FloatingActionButton.extended Constructor
FloatingActionButton.extended Constructor

5. ButtonBar Class - Documentation

Also refer official class documentation with this guide to deeply understand the concept.
  • Use this class when you have to display multiple buttons in a horizontal layout.
  • Do not use row widget, instead use ButtonBar class which is designed to acheive such common layouts effectively.
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 
  • alignment: MainAxisAlignment.center - How the children should be placed along the horizontal axis.
  • mainAxisSize: MainAxisSize.max - How much horizontal space is available.

ButtonBar Implementation
ButtonBar Implementation

6. DropdownButton Class - Documentation

Also refer official class documentation with this guide to deeply understand the concept.
A dropdown 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 Parameters
  • items
Implementation
  • Create a Dropdown StatefulWidget
  • Create a list of dropdown items
  • Create a variable for default selected item
  • 3 main properties required for DropdownButton class implementation
    • items
    • onChanged
    • value
  • items property will contain DropdownMenuItem class implementation as shown below
  • 2 main properties required to implement DropdownMenuItem class
    • value
    • child - Text Widget
DropdownButton Class Implementation
DropdownButton Class Implementation
lets add some more parameters or properties : refer official class documentation for property list 
icon - The widget to use for the drop-down button's icon
  • iconEnabledColor
  • iconDisabledColor
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 
  • itemBuilder
Implementation
  • Create a list of popup menu items
  • 3 main properties required for PopupMenuButton class implementation
    • itemBuilder 
    • onSelected
  • itemBuilder property will contain PopupMenuItem class implementation as shown below
  • 2 main properties required to implement PopupMenuItem class
    • value
    • child - Text Widget
PopupMenuButton Class Implementation
PopupMenuButton Class Implementation
lets add some more parameters or properties : refer official class documentation for property list 
  • icon property to change popup menu button
  • tooltip - text that describe the action that will occur when the button is pressed
  • onCanceled - the function defined here will be called when user dismisses popup menu without selecting any option
PopupMenuButton Class Properties
PopupMenuButton Class Properties
PopupMenuButton sample implementation - add settings popup menu button
Settings PopupMenuButton
Settings PopupMenuButton

Coding - Sample Flutter App Code


Bonus Tip : Also refer the following classes to improve your PopupMenu UI
  • PopupMenuDivider - a popup menu entry that is just a horizontal line - Documentation
  • CheckedPopupMenuItem - a popup menu item with a checkmark - Documentation
To learn more about flutter - Flutter Developer Guide
There are two more classes using which we can implement button functionality

  • GestureDetector Class
  • InkWell Class


We will cover this in Flutter Gestures Guide.
Unauthorized use and/or duplication of this material without express and written permission from this site’s author and/or owner is strictly prohibited.The materials(images, logos, content) contained in this web site are protected by applicable copyright and trade mark law.

Flutter, Pixel, Android and the Android logo are registered trademarks of Google LLC.

Popular posts from this blog

Step-by-Step Guide to create a new flutter project using Visual Studio Code [VS Code]

This is a beginner's guide to visual studio code and flutter. VS Code is a light weight editor with flutter app development, execution and debug support. Visual Studio Code is a source-code editor developed by Microsoft. Install latest stable version of VS Code Install the Flutter and Dart plugins In VS Code "Extensions" Tab, search field type flutter, select "Flutter" in the list and click "Install". Flutter plugin also installs the required Dart plugin. Validate your flutter setup using "flutter doctor command". Once Flutter SDK and your VS Code Editor is up and running, Flutter Visual Studio Code To Create a new flutter project from the flutter starter app template follow the below steps step 1 : Open Command Palette Use Shortcut key - Ctrl+Shift+P or Cmd+Shift+P on macOS OR Go to View Menu, select "Command Palette" VS Code Command Palette step 2 : Create Flutter New Project Sele

Step-by-Step Guide for Flutter Android APK Signing and Release

In this guide we will learn how to sign the release version of apk or aab(android app bundle) to publish our flutter app to android play store. flutter release apk How to sign the apk or app bundle created using flutter ? To publish your app on Play Store, you need to give your app a digital signature. step 1 : Create a new keystore file ; if you have an existing keystore , skip this step Run command in your terminal for linux/mac keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key On Windows, use the following command: keytool -genkey -v -keystore c:/Users/USER_NAME/key.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias key Fill in the required info inside the terminal Enter keystore password: test@12345 Re-enter new password: test@12345 What is your first and last name? [test]: test What is the name of your organizational unit? [test]: test

Step-by-Step Guide to take a App Screenshot with the Device Frame using Android Studio

This guide will help you to take a screenshot with the device frame using android studio. If we capture screenshot using the default android emulator "Capture Screenshot" option, then screenshot will not have the device frame. Android Emulator - Screen Capture By using android studio we can capture screenshot with different devices frame. How to take a App Screenshot with the Device Frame using Android Studio step 1 : Load your project in android studio and run the app Open Android Studio Load your android app project in android studio.  Build and Run your app using android emulator or a connected physical device.  If you are using a physical device make sure that you have enabled USB DEBUGGING option. Android Studio - Load Project step 2 : Open Logcat in Android Studio Check out bottom left corner in android studio to find Logcat option and click to open Logcat If it is not visible then select "View Menu" and search for