Quick tip #3 — Attach FAB within a BottomAppBar

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.

BottomAppBar with FloatingActionButton

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.

Bhavik Makwana (@ibhavikmakwana) | Twitter

Flutter Community (@FlutterComm) | Twitter

ibhavikmakwana (Bhavik Makwana)