How to create a Notched Bottom Navigation Bar Flutter

Akhil George — Fri, 07 Apr 2023 07:06:12 +0000

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:

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

The code’s output is shown below, and when you run it, your app will have a BottomAppBarwith a ready-to-use 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,

As shown below, apply the shape to the BottomAppBar.

shape: const CircularNotchedRectangle()

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

 extendBody: true,

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

Forem: Akhil George

How to create a Notched Bottom Navigation Bar Flutter