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.
- FloatingActionButton
- FloatingActionButton.extended
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
In material design, the FAB has two sizes: default and mini. To switch to mini size, set mini in the constructor to true.
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
We can change the effect of elevation of the FAB above the screen by setting the elevation and highlightElevation property. elevation works at all times while highlightElevation is the elevation of the button when tapped.
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
This section is meant to cover some animations related to FloatingActionButtons.
Default FAB animation in page transitions
First, I want to mention the default animation Flutter has when navigating between pages which both have a FloatingActionButton. When transitioning from one page to the other, Flutter will automatically animate the FAB change instead of switching instantly. This requires no code on the user side.
IMPORTANT: Hero Animations with FloatingActionButtons
OR Why can’t I have two FloatingActionButtons on the same page?
Above metioned animation is possible because the FloatingActionButton has a Hero widget wrapped around it. A “Hero” is an element that flies to the next page when a transition occurs.
A Hero widget requires a tag that correlates two separate elements on two different pages and then makes one transition to the other.
The Hero tag has to be unique. Since each FAB is a Hero, defining two of them on the same page is not allowed without explicitly changing the hero tag of one of them.