How to create a Notched Bottom Navigation Bar Flutter

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

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

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

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

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 :)