Flutter Button Developer Guide

Flutter Button Developer Guide
Flutter Button Developer Guide
  1. FlatButton Class [Basic]
  2. RaisedButton Class [Basic]
  3. IconButton Class [Basic]
  4. FloatingActionButton Class [Basic]
  5. ButtonBar Class [Advanced]
  6. DropdownButton Class [Advanced]
  7. PopupMenuButton Class [Advanced]

1. FlatButton Class

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 })
  • ‘onPressed’ parameter is required
  • ‘child’ parameter is required
FlatButton Implementation
FlatButton Implementation
FlatButton Color Parameters
FlatButton Color Parameters
FlatButton Disabled
FlatButton Disabled
FlatButton.icon Constructor
FlatButton.icon Constructor

2. RaisedButton Class

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 })
  • ‘onPressed’ parameter is required
RaisedButton Implementation
RaisedButton Implementation
RaisedButton Color Parameters
RaisedButton Color Parameters
RaisedButton.icon Constructor
RaisedButton.icon Constructor

3. IconButton Class

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 })
  • ‘onPressed’ parameter is required
  • ‘icon’ parameter is required
IconButton Class Implementation
IconButton Class Implementation
IconButton Color Parameters
IconButton Color Parameters

4. FloatingActionButton Class

  • 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({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 })
  • ‘onPressed’ parameter is required
FloatingActionButton Implementation
FloatingActionButton Implementation
FloatingActionButton Tooltip
FloatingActionButton Tooltip
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 })
  • ‘onPressed’ parameter is required
  • ‘label’ parameter is required
FloatingActionButton.extended Constructor
FloatingActionButton.extended Constructor

5. ButtonBar Class

  • 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({Key key, MainAxisAlignment alignment: MainAxisAlignment.end, MainAxisSize mainAxisSize: MainAxisSize.max, List<Widget> children: const [] })
  • 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

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 })
  • items
  1. Create a Dropdown StatefulWidget.
  2. Create a list of dropdown items.
  3. Create a variable for default selected item.
  4. Main properties required for DropdownButton class implementation
  • items
  • onChanged
  • value
  • value
  • child - Text Widget
DropdownButton Class Implementation
DropdownButton Class Implementation
  • iconEnabledColor
  • iconDisabledColor
DropdownButton Class Properties
DropdownButton Class Properties

7. PopupMenuButton<T> class

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 })
  • itemBuilder
  1. Create a list of popup menu items.
  2. Main properties required for PopupMenuButton class implementation.
  • itemBuilder
  • onSelected
  • itemBuilder property will contain PopupMenuItem class implementation as shown below
  • value
  • child - Text Widget
PopupMenuButton Class Implementation
PopupMenuButton Class Implementation
  • 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
Settings PopupMenuButton

Coding - Sample Flutter App Code

  • PopupMenuDivider : a popup menu entry that is just a horizontal line - Documentation
  • CheckedPopupMenuItem : a popup menu item with a checkmark - Documentation
  • GestureDetector Class
  • InkWell Class

Useful Resources

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Top Site Reliability Engineering (SRE) Tools

If your Organizing Keys suck, maybe you’re not doing it right

OWC Envoy Express Thunderbolt 3 Enclosure — worth it over USB 3?

Compromise in Programming to Maximize Value

KingDeFi Weekly Development Update — 20

Return by Reference in C++

Develop RPC Connection with Golang

GoTezos Q1-Q2 Update

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

AkshatApp

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

More from Medium

Flutter Puzzle Hack Updates

Minimize playing content in the Flutter app with Overlay.

My Flutter Islamic Calendar App

Flutter MethodChannel