DEV Community

Akhil George
Akhil George

Posted on

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 BottomAppBarwith 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: () {},
            ),
          ],
        ),
      ),
    );
Enter fullscreen mode Exit fullscreen mode

The code’s output is shown below, and when you run it, your app will have a BottomAppBarwith a ready-to-use FloatingActionButton.

BottomAppBar with FloatingActionButton

To start, position the FloatingActionButtonbutton using the Scaffold widget’s floatingActionButtonLocationattribute.
We’ll use the centerDocked as shown below to position it in the center:

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
Enter fullscreen mode Exit fullscreen mode

As shown below, apply the shape to the BottomAppBar.

shape: const CircularNotchedRectangle()
Enter fullscreen mode Exit fullscreen mode

Center Notched BottomAppBar

specifying extendBody : trueensures that the scaffold’s body will be visible through the bottom navigation bar’s notch.

 extendBody: true,
Enter fullscreen mode Exit fullscreen mode

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: () {},
            ),
          ],
        ),
      ),

    );
Enter fullscreen mode Exit fullscreen mode

Thanks :)

Top comments (0)