Flutter: Deep dive into Button

In this article I will only talk about the types of button and it’s usage. You will also see the common property which is being used mostly by developers.

I also talk about some of the common problem which people face while working button.

What is button?

An button is a Material widget that reacts to touches by filling with color (ink) and also perform actinon on Pressing on that.

I don’t think I need to talk more about what is button and how it works. We see button everyday in our Mobile App/ Web app/ Desktop App and also we use it.

I am here to talk about buttons in flutter. So, Do you know there are different types of prebuilt button(widget) in Flutter.

Types of Button

  • Raised Button
  • Flat Button
  • Icon Button
  • Outline Button
  • Floating Action Button

There is two more button which I’ll not cover in this article because I don’t consider these button belongs to the button family.

  • Popup Menu Button
  • DropDown Button

These button are used for some other purpose.

Usage

Let’s see how the button works and how can we memorize all the very easily.

We use button to perform some action on the button press/tap. So there is a one required property for all the button which is onPressed.

  • onPressed : This property is a available in all the button and also it’s a required property.

To help you in memorizing the all the buttons very easily, I am categorizing them in two types.

Type 1

  • RaisedButton
  • FlatButton
  • OutlineButton

You should remember these two property because it’s the least thing which we should use.

  • onPressed: This a required property so it will be available in all the buttons
  • child : This is a optional property but we use this all time.
demo.dart 
// Raised Button
RaisedButton(
    onPressed : (){},
    child : Text('Raised Button'),
);

// Flat Button
FlatButton(
    onPressed : (){},
    child : Text('Flat Button'),
);

// Outline Button
OutlineButton(
    onPressed : (){},
    child : Text('Outline Button'),
);

There is theme textTheme property int the Type 1 buttons. This property is used to define button’s base colors, and the defaults for the button’s minimum size, internal padding, and shape.

Try to remove the child from the type 1 button then you will find that button is visible but there is nothing on the top of button i.e text.

  • minWidth
  • height
  • buttonColor

Type 2

  • IconButton

You should remember these two property because it’s the least thing which we should use.

  • onPressed: This a required property so it will be available in all the buttons
  • icon : This a optional property and it takes widget as argument. We mostly use it and provide Icon Widget.
demo.dart 

// Icon Button
IconButton(
    onPressed : (){},
    icon: Icon(Icons.people)
);

Type 3

  • FloatingActionButton:
  • FloatingActionButton.extended

In type 3 we have floating action button and as the name tells, it’s a floating button. Floating action button don’t scroll up and down as we scroll the content in the UI.

As this button appear all the time in the scree. So, we can’t use this every time, it is being used in some special case. There is some fixed use of this button but you are independent to use it as you like.

You should remember these two property because it’s the least thing which we should use.

  • onPressed: This a required property so it will be available in all the buttons
  • child : This is a optional property but we use this all time.
demo.dart 

// Floating Action Button
FloatingActionButton(
    onPressed : (){},
    child : Icon(Icons.navigation),
);

There is one more type of floating action button which is very popular these days that is extended floating action button.

  • onPressed: This a required property so it will be available in all the buttons
  • label : This also a required property and it takes widget as argument. We usually give text widget in the label.
  • icon : This a optional property and it takes widget as argument. We mostly use it and provide Icon Widget.
demo.dart 
// Extended Floating Action Button
FloatingActionButton.extended(
    onPressed : (){},
    label: Text('Approve'),
    icon: Icon(Icons.thumb_up),
)

Problems

  • Disable button: There is no direct property in flutter button which disables the button.
  • Round Border Button: Sometimes we want to round the corder of button by proving some border radius at the corner.

Disable button

Sometimes we want to disable the button after first click on it and we don’t know how can we achieve that. Here is a solution which I prefer.

There is no property of disabling the button. you have to pass null in onPressed callback.

demo.dart 
bool isEnableButton = true;
 /*
 *   isEnableButton is bool type and when you want
 *   to disable the button make it false and true
 *   for enabling the button
 */

RaisedButton(
    onPressed : isEnableButton ? performAction : null,
    child : Text('Login'),
);

void performAction(){
    setState((){
        isEnableButton = false;
    });
    // Your Logic goes here
}

Round Border Button

Rounder border is one the favorite thing and we love round button. There is no widget which provides us round button, we have shape property in the button which does this for us.

demo.dart 
FlatButton(
    onPressed : performAction,
    child : Text('Login'),
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(18.0),
        side: BorderSide(color: Colors.red)
    ),
);

void performAction(){
   print('Perform Action');
}

I talked about this, So that you can understand that you can do customization if it’s not available. This is very common customization but you can lots of other cusromization too.

Conclusion

I hope you leaned something new and you liked this article.

At the time of writing this article I only remember these much thing only. If you remember anything which I forget please mention in the comment I will include it.

There is one possibility that you will run into some problem where no flutter button is helping you. You tried all the available properties but still not able to figure out the solution.

At this point I’ll suggest you to go for custom button. I mean build a widget which will fulfill your requirements.