1 Of The Best Dive Deep Into the Floating Action Button in Flutter



This article is the first article in a detailed study of the Flutter widgets series. Let’s dive into the Flutter FloatingActionButton widget today.

What Is FloatingActionButton

FloatingActionButton is one of the material design buttons, And It can use to trigger actions when it is pressed. This button floats above the content of the screen and the default position is the bottom right corner of the screen.

For example, Google Drive, Gmail, Google Keep Notes has a FloatingActionButton which performs various actions. The purpose of the FAB must be something the user might frequently want or needs to do.

FloatingActionButton Types

Flutter offers two types of FloatingActionButtons out-of-the-box.


1. FloatingActionButton

The default constructor creates a simple circular FAB with a child widget inside it. It takes an onPressed method to react to taps and a child (not compulsory) to display a widget inside the FAB.

The code is relatively simple and commonly used with the floatingActionButton parameter of the Scaffold widget.


2. FloatingActionButton.extended

FloatingActionButton.extended returns a wide FAB, usually with an icon and a label inside it.

Instead of a child parameter, now we have access to label and icon parameters.


Using Colors in a FloatingActionButton

The FAB offers the foregroundColor and backgroundColor parameters to color the elements inside it.

The foregroundColor colors the child inside the FAB.


The backgroundColor colors the background of the button.


Changing the Look of the FloatingActionButton

The FAB gives us multiple options to resize and change the look of the button.

Switching to a mini button

This makes the button smaller in size.

Changing the shape of the FAB

To change the shape of the button, we set the shape parameter in the constructor. The default value of the shape is a CircleBorder().

Let’s make a square button.

If you notice, it says RoundedRectangleBorder but it behaves like a square. This is because we haven’t supplied a borderRadius.

Supplying a border-radius,

RoundedRectangleBorder and other border classes also have another field called side which lets us edit the color and width of the border.

Changing the elevation of FAB

Let’s set the elevation to 0.0:

And then 20.0

You can see the shadow changing around the button indicating an increase in distance in the z-axis.

Animating the FloatingActionButton

Default FAB animation in page transitions

IMPORTANT: Hero Animations with FloatingActionButtons


OR Why can’t I have two FloatingActionButtons on the same page?

Request a Quote