How to create a Notched Bottom Navigation Bar Flutter
Tags: flutter, dart, beginners, tutorial
Published: 2023-04-07 07:06:12

This guide will demonstrate how to add a notched floating action button to the bottom navigation app bar. The bottom bar’s notched floating action button enhances the aesthetics of your app’s user interface. For more information, see the code below:


![BottomAppBar with Center Notch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zl51350wtxfqapp1va9d.jpg)


**Let’s get started**

The **_BottomAppBar_**with the **_FloatingActionButton_** can be added to your app using the code below.

```
Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
      bottomNavigationBar: BottomAppBar(
        padding: const EdgeInsets.symmetric(horizontal: 10),
        height: 60,
        color: Colors.cyan.shade400,
        notchMargin: 5,
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            IconButton(
              icon: const Icon(
                Icons.menu,
                color: Colors.black,
              ),
              onPressed: () {},
            ),
            IconButton(
              icon: const Icon(
                Icons.search,
                color: Colors.black,
              ),
              onPressed: () {},
            ),
            IconButton(
              icon: const Icon(
                Icons.print,
                color: Colors.black,
              ),
              onPressed: () {},
            ),
            IconButton(
              icon: const Icon(
                Icons.people,
                color: Colors.black,
              ),
              onPressed: () {},
            ),
          ],
        ),
      ),
    );
```
The code’s output is shown below, and when you run it, your app will have a **_BottomAppBar_**with a ready-to-use **_FloatingActionButton_**.


![BottomAppBar with FloatingActionButton](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i2jh1m9lwenumgeutail.jpg)

To start, position the **_FloatingActionButton_**button using the Scaffold widget’s **_floatingActionButtonLocation_**attribute.
We’ll use the centerDocked as shown below to position it in the center:

```
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
```
As shown below, apply the shape to the BottomAppBar.

```
shape: const CircularNotchedRectangle()
```

![Center Notched BottomAppBar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kydhm98za68ehuy3ck3x.jpg)

specifying **_extendBody_** : **_true_**ensures that the scaffold’s body will be visible through the bottom navigation bar’s notch.

```
 extendBody: true,
```


![BottomAppBar with Center Notch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3n1tbrtr0bquh9v3nrr.jpg)


That’s it. 🎉🎉

**Full Code :**

```
return Scaffold(
      extendBody: true,
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        padding: const EdgeInsets.symmetric(horizontal: 10),
        height: 60,
        color: Colors.cyan.shade400,
        shape: const CircularNotchedRectangle(),
        notchMargin: 5,
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            IconButton(
              icon: const Icon(
                Icons.menu,
                color: Colors.black,
              ),
              onPressed: () {},
            ),
            IconButton(
              icon: const Icon(
                Icons.search,
                color: Colors.black,
              ),
              onPressed: () {},
            ),
            IconButton(

              icon: const Icon(
                Icons.print,
                color: Colors.black,
              ),
              onPressed: () {},
            ),
            IconButton(
              icon: const Icon(
                Icons.people,
                color: Colors.black,
              ),
              onPressed: () {},
            ),
          ],
        ),
      ),
     
    );
```

Thanks :)