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.
1 2 3 4 5 6 |
Scaffold( floatingActionButton: FloatingActionButton( child: Icon (Icons.add), onPressed: () {}, ), ); |
And what if you have a BottomAppBar and you want to embed FAB into it?
First, add the bottom navigation bar to the scaffold:
1 2 3 4 5 6 7 8 9 |
bottomNavigationBar: BottomAppBar( color: Colors.blue, items: const [ BottomNavigationBarItem( icon: Icon(Icons.home), title: Text('Home'), ), ], ), |
Then add the FloatingActionButtonLocation to the Scaffold:
1 2 |
floatingActionButtonLocation: FloatingActionButtonLocation.centerdocked, |
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
Flutter Blogs
In recent times, due to the effects of the pandemic, a mask detecting app is in great need….
Theming is styling an application so that its look and feel matches your personal design aesthetic or that…
In this blog, we have collated the important Flutter best practices that should be kept in mind for…
In the last blog and webinar on State Management in Flutter, we learned about managing state using Stateful…
In this week’s blog on plugins, we will look at a very special requirement – OCR(Optical Character Recognition)…