By WalkingTree   May 22, 2020

Floating Action Button - A Flutter Widget

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

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

Flutter Blogs

Theming in Flutter

Theming is styling an application so that its look and feel matches your personal design aesthetic or that…

Translate »
Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.