You can find part 2 here
FloatingActionButton is a very useful Widget in a MaterialApp. It usually is (and should be) used as a primary action in a Scaffold, which is a top-level container in MaterialApp.
In this post, I want to talk about how to use FloatingActionButtons and explore their possibilities as much as I can.
Flutter made it very easy to use FloatingActionButton to any page that has a Scaffold as a top-level container:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("FloatingActionButtons"),
),
body: Center(
child: Text('mrflutter.com'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
The default position is always bottom right corner of the page and the default background color comes from primarySwatch or primaryColor of the theme of the MaterialApp class.

If you want to use the smaller version of the FAB you can set mini: true.
How to change FloatingActionButton’s position
For this we can use FloatingActionButtonLocation which has the following options:
- centerDocked
- centerFloat
- endDocked
- endFloat
- endTop
- miniStartTop
- startTop
Start, center and end speak for themselves as they simply position the FAB accordingly. The interesting part is docked and float ones which come in handy when FAB is used together with BottomNavigationBar. Docked means that the center of FAB will nicely align with the top of the BottomNavigationBar and float means that FAB will be positioned above the BottomNavigationBar.

Here’s the code I have used for the screenshot:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("FloatingActionButtons"),
),
body: Center(
child: Text('mrflutter.com'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Increment',
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
child: Container(
height: 50.0,
),
),
);
}
If you would like to align the FAB with the AppBar, just use startTop or endTop as location.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("FloatingActionButtons"),
backgroundColor: Colors.purple,
),
body: Center(
child: Text('mrflutter.com'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Increment',
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.startTop,
);
}
It will then look like this:

How to use FloatingActionButton.extended
If you want to add text to your FAB, there is a wider version that supports a text label together with an icon. Obviously, label becomes a mandatory parameter, but icon becomes optional. The child parameter goes away as it can now contain multiple widgets.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("FloatingActionButtons"),
),
body: Center(
child: Text('mrflutter.com'),
),
floatingActionButton: FloatingActionButton.extended(
onPressed: () {},
tooltip: 'Tap to call',
label: Text('CALL'),
icon: Icon(Icons.call),
),
);
}
This will look like this:

I hope this post helped you do more with FloatingActionButtons. In the next part, I will explain what you can do with FABs and animations.