By WalkingTree   May 22, 2020

A FloatingActionButton is an icon button on a screen that allows the user to perform an action, which he would normally do on that specific screen. This button is usually found floating above the content and resides on one corner of the screen. For example, when you open Gmail, the Compose button, found on the top left of the screen, is a floating action button. 

It’s recommended to use at most a single floating action button per screen and usually in the Scaffold. By default, it’s circular and large in size but you can change both along with its color and location also.

Flutter provides two constructors to create these buttons:

• FloatingActionButton(): This creates a circular button with a child widget, usually an icon.
• FloatingActionButton.extended(): This constructor creates a larger, rounded corner FloatingActionButton, with an optional icon and a label.

How to use the FloatingActionButton widget?

You would use the FloatingActionButton as you would use any other widget. But normally it’s added to the Scaffold with the floatingactionbutton field.

And what if you have a BottomAppBar and you want to embed FAB into it?

First, add the bottom navigation bar to the scaffold:

Then add the FloatingActionButtonLocation to the Scaffold:

You have different location options – center, left and right – docked or floating.

Check Flutter documentation on FloatingActionButton for more information

https://api.flutter.dev/flutter/material/FloatingActionButton-class.html

If you haven’t seen the Flutter’s Widget of the Week video yet, check it out down below

Or, check out the FadeTransition documentation by Flutter