Flutter Widgets (Buttons) The Whole Picture

Published in

Flutter Community

8 min readNov 22, 2020

A programmer’s wife sent him to a grocery store, her instructions were: “ Buy butter! see if they have eggs if they do… buy 10” So he bought 10!

The button is the most important component in any UI of an application. Whole interaction depends on how the buttons are placed and what kind of buttons are used. Before the smartphone days, we had physical number buttons and letters associated with each number button. It was convenient in those times to type long text messages but then came the Blackberry. Oh! I still miss those keys, I wish they had done better with the revolution of smartphones and adaptation of Android software they would have been kings in the smartphone industry.

Today there is a lot of thought and planning goes into UI and UX design. Designers with those skills are in a lot of demand and companies are investing a lot more in the UI and UX so the feel and aesthetic of an application are so great that you tend to retain your customers and spend less later on when you are upgrading your software.

KNOW YOUR BUTTONS

TextButton (previously known as FlatButton).
OutlinedButton (previously known as OutlineButton).
ElevatedButton (previously known as RaisedButton).
FloatingActionButton.
IconButton.

What has changed?

Not only the name of the button but its properties has also changed quite a bit. According to the official documentation FlatButton, OutlineButton and RaisedButton are obsolete and have been replaced with TextButton, OutlinedButton and ElevatedButton respectively. I tried using the old ones it still works but it is better to understand what has changed in the new ones.

Let us look at the properties of each one first then we shall talk about the big change.

TextButton or OutlinedButton or ElevatedButton(
  onPressed: () {},                  //@required
  onLongPress: () {},
  focusNode:,
  autofocus: true,
  clipBehavior: Clip.none,
  style: ButtonStyle(),             // This is the Big Change
  child: Widget(),                   //@required

All three have the same property. Now notice the style: ButtonSytle() that is the big change. Before you were able to change the colour and the shape and the text colour etc right from its properties but now you have to use the style property and what it takes in is the ButtonStyle, it has all those properties once the button itself had. Check the code down below…

ButtonStyle({
  this.textStyle,
  this.backgroundColor,
  this.foregroundColor,
  this.overlayColor,
  this.shadowColor,
  this.elevation,
  this.padding,
  this.minimumSize,
  this.side,
  this.shape,
  this.mouseCursor,
  this.visualDensity,
  this.tapTargetSize,
  this.animationDuration,
  this.enableFeedback,
});

ButtonStyle is used to configure the appearance of the buttons using MaterialStateProperty. The button widget keeps track of their current material state and resolves it by button’s MaterialStateProperty when the value is changed.

What is MaterialStateProperty?

As per my understanding, when a project is initially created developers set the Material theme where primary and secondary colours are set in the theme data property under the MaterialApp widget in the main.dart file, based on which the whole look and feel are created from the entry point of the application.

Now if you like to override the properties set by the MaterialTheme then you have to use the MaterialStateProperty. Look at the example given below.

TextButton(
  style: ButtonStyle(
    foregroundColor: MaterialStateProperty.all(Colors.deepOrange),
  ),
  onPressed: () => Navigator.pop(context),
  child: Text('CANCEL'),
),

There is one other way to change and override the properties set by the MaterialTheme by using the button’s theme date property known as TextButton.styleFrom, OutlinedButton.styleFrom, ElevatedButton.styleFrom for TextButton, OutlinedButton and ElevatedButton’s style property respectively.

TextButton(
  style: TextButton.styleFrom(
    primary: Colors.pink,
    backgroundColor: Colors.grey,
    onSurface:,                     @Color
    shadowColor: ,                  @COlor
    elevation: ,
    textStyle: ,
    padding: ,
    side: ,
    shape: ,
    and a few more...
  ),

Using styleFrom property basically goes back to the traditional way of styling the FlatButton or the OutlineButton or the RaisedButton.

Now let’s look at the buttons individually.

TextButton & TextButton.icon

Type: Low emphasis button.
Usage: Toolbars, Dialogs, Inline with other content, Cards, SnackBars. Should be grouped while using in Dialogs and Cards.
Avoid: TextButton should not be used where it would blend with other content such as a list.

OutlinedButton & OutlinedButton.icon

Type: Medium emphasis button.
Usage: Used for actions that important, but are not the primary action in the application.
Example: Look at the Google Play Store, when you see the list of applications there is a button Install on the right-hand side of the application. When you click on the title of the app for more details you see another Instal button which is different from the one in the list view.

ElevatedButton & ElevatedButton.icon

Type: High Emphasis button or Primary action button.
Usage: When you want your button to stand out on a flat layout and you want your user to interact with it as a primary action.
Example: Commonly used for the Login, Save, Submit etc.
Avoid: Elevated button should not be used inside another elevated surface such as Cards and Dialogs.

Important note: Above mentioned buttons also have an option to add an icon before the text. The child widget is replaced by two required widgets Icon and label.

TextButton.icon(
  onPressed: () => Navigator.pop(context),
  label: Text('CANCEL'),          @required
  icon: Icon(Icons.cancel),       @required
),

FloatingActionButton and FloatingActionButton extended

FloatingActionButton or famously known as FAB is a primary action button and also used for most common actions that need to be performed on a screen. It appears in front of all screen content, typically in a circular shape with an icon in the centre of it.

Floating action button comes in 3 sizes.

FloatingActionButton regular ( size 56 x 56 dp )
FloatingActionButton mini ( size 40 x 40 dp )
FloatingActionButton extended (contains a text and an icon )

Usage: Should be used to trigger an action on the current screen or open another screen.

Avoid: FAB should not be used for minor operations such are a delete action.

Let’s look at some of the important properties of FAB.

FloatingActionButton(
  onPressed: () {},                    @required
  child: Icon(Icons.add),
  tooltip: 'Click to Add',
  foregroundColor: Colors.white,
  backgroundColor: Colors.pink,
  hoverColor: Colors.white,
  elevation: 6,
  hoverElevation: 20,
  splashColor: Colors.blueGrey,
  highlightElevation: 20,
  mini: false,

tooltip: Text that describes the action that will occur when the button is long pressed.
foregroundColor: It will change the colour of the child widget inside the FAB. (tip: Icon colour will override the foregroundColor)
backgroundColor: It will change the colour of the FAB itself.
hoverColor: It will the colour of the FAB when a pointer will hover over it.
elevation: Default elevation is 6.0, it controls the shadow below the FAB.
hoverElevation: Defaults to 8.0 when a pointer is hovering over it.
hightlightElevation: Defaults to 12.0 when the user is touching it.
mini: Default is false if it is set to true the FAB will become small.

Next one is FloatingActionButton extended. The properties are very much similar besides two. Instead of a child widget, you have to pass the icon widget directly and a label which is required.

FloatingActionButton.extended(
  onPressed: () {},                 @required
  icon: Icon(Icons.add),           
  label: Text('Add'),               @required
  tooltip: 'Click to Add',
  foregroundColor: Colors.white,
  backgroundColor: Colors.pink,
  focusColor: Colors.red,
  hoverColor: Colors.white,
  elevation: 6,
  hoverElevation: 20,
  splashColor: Colors.blueGrey,
  highlightElevation: 20,  
),

Positioning of FAB

According to the default material design the FAB is placed in the right-hand corner at the bottom of the screen which has default padding of 16dp horizontally and vertically. You can change the position of it but adding a property to the Scaffold widget known as floatingActionButtonLocation. There are 9 different locations on the screen to position your FAB.

FloatingActionButtonLocation.startTop (top left corner)
FloatingActionButtonLocation.startFloat (bottom left corner)
FloatingActionButtonLocation.startDocked (bottom left corner touching bottom screen)FloatingActionButtonLocation.endTop (top right corner)
FloatingActionButtonLocation.endFloat (default location)
FloatingActionButtonLocation.endDocked (default location touching bottom screen)FloatingActionButtonLocation.centerTop (top center)
FloatingActionButtonLocation.centerFloat (bottom center)
FloatingActionButtonLocation.centerDocked (bottom center touching bottom screen)

There is this really cool UI trick provided by flutter using the bottom navigation bar and floating action button. If you are using the startDocked or endDocked or centerDocked to set the location of FAB it will stick at the bottom of the screen but you can raise it by using the BottomBar widget with bottomNavigationBar and in the shape property use CircularNotchedRectangle widget which will create a very neat notch at the bottom of the screen giving your UI a fantastic look. Check the image and the code below.

Scaffold(
  appBar: AppBar(
    title: Text('FloatingActionButton'),
  ),
  bottomNavigationBar: BottomAppBar(
    shape: CircularNotchedRectangle(),
    color: Colors.blue.shade700,
    child: Container(
      height: 50.0,
    ),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
    foregroundColor: Colors.white,
    backgroundColor: Colors.pink,
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);

IconButtons

Primarily used for selection or deselection. It is used as a toggle button, for making a single choice. Pretty commonly used for showing emotions such as marking something as a favourite or liking a post. Practically all the social media application have IconButtons. You can use the IconButton in the AppBar for quick actions.

Some of the common properties of IconButton are…

IconButton(
  onPressed: () {},
  icon: Icon(Icons.favorite),               //@required
  iconSize: 24.0,                           //default
  padding: EdgeInsets.all(8.0),             //default
  color: Colors.white,                      //default
  alignment: Alignment.center,              //default
  splashRadius: 5.0,
  focusColor: Colors.red,
  hoverColor: Colors.red,
  splashColor: Colors.red,
  disabledColor: Colors.grey,
),

You can try toggling the IconButton by using below code…

bool isSelected = false;
IconData icon = Icons.favorite_border;IconButton(
    icon: Icon(icon),
    color: Colors.white,
    onPressed: () {
        // Respond to icon toggle
        setState(() {
            isSelected = !isSelected;
            icon = isSelected ? Icons.favorite : Icons.favorite_border;
        });
    },
)

I think I have written enough for anyone to understand the new buttons and the old buttons. I will be writing on Scaffold widget next week and if you have any suggestion on what should I write please leave a comment. Check out my other stories, links are given below and if you found this article interesting, informative there is no harm in leaving a few claps. Thank you very much! see you next week.

Links to my other stories SafeArea Widget, Expanded & Flexible, Container Widget, Row and Column, Stack & Positioned, Boxes Part-1, Boxes Part-2, TabBar & TabBarView, GridView.