Quick tip #3 — Attach FAB within a BottomAppBar

Bhavik Makwana
Sep 1, 2018 · 2 min read

In this article, you will learn how to attach the FloatingActionButton within BottomAppBar.

In this article, you will learn how to attach the FloatingActionButton within BottomAppBar.

We will call FloatingActionButton a FAB to keep it short.

Flutter’s BottomAppBar is a container that typically used with [Scaffold.bottomNavigationBar] and It’s very easy to use in your app.

Let’s get started

Using the below code you can implement the BottomAppBar with the FAB in your app.

return new Scaffold(
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.amberAccent,
child: const Icon(
Icons.edit,
color: Colors.blueGrey,
),
onPressed: () {},
),
bottomNavigationBar: BottomAppBar(
child: new Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.menu),
color: Colors.white,
onPressed: () {},
),
IconButton(
icon: Icon(Icons.search),
color: Colors.white,
onPressed: () {},
),
],
),
color: Colors.blueGrey,
),
);

Below is the output of the code and you will get a BottomAppBar with FloatingActionButton in your app ready to use.

Now Let’s attach the FAB button within the BottomAppBar on the center.

First, use the [floatingActionButtonLocation] property of the Scaffold widget to set the location of the FAB button.
We want to set it in the center so we will use the centerDocked like below:

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

centerDocked align the FAB over the Scaffold.bottomNavigationBar so that the center of the FAB lines up with the top of the BottomAppBar.

Now, add the shape to the BottomAppBar like below:

shape: CircularNotchedRectangle()

Above code creates a [Path] that describes a rectangle with a smooth circular notch.

Tip: You can also customize the shape of the BottomAppBar according to your to your requirement.

That’s it.
You are done,
In just a few steps you have implemented the FloatingActionButton within BottomAppBar.

Click the 👏 to help others find this article.

Hold the clap button to leave more claps.
If you have any query/queries reach me at my twitter account.

Flutter Community

Articles and Stories from the Flutter Community

Bhavik Makwana

Written by

Flutter Enthusiast | Google Certified Associate Android Developer | Speaker for flutter | Android Dev | Flutter Dev

Flutter Community

Articles and Stories from the Flutter Community

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade