Question 182213 in Flutter Question posted in
The official Flutter documentation can be found here.

Custom bottom navbar flutter

I would like to create a custom bottom navigation bar, similar to the one shown in the following screenshot:

enter image description here

Could you please provide guidance on how to achieve this? I am interested in customizing the appearance and functionality of the bottom navigation bar in my application. Any tips, code snippets, or recommended resources would be greatly appreciated.

Thank you in advance for your assistance!

Tags:

2

Answers


  1. 0

    There are many ways to build Bottom navigation bar in flutter, First let me list down some flutter packages that I have used for bottom navigations

    1- animated_bottom_navigation_bar: ^1.2.0 (provides a lot of customisation P.S I love this one)

    2- circular_bottom_navigation: ^2.3.0

    3- bottom_navigation_view: ^0.3.0

    4- curved_navigation_bar: ^1.0.3 (I have used this one recently, I provides beautiful curved animation, have customised it code to achieve shadows and other stuff)

    Before using any package for bottom navigation always review other packages as well.

    Now if don’t want to use any package bellow is the code snippet to build button navigation bar in flutter

    there is property named buttomNavigationBar in Sraffold!

    bottomNavigationBar: Container(
            clipBehavior: Clip.hardEdge,
            decoration: const BoxDecoration(
              color: AppColors.white,
              boxShadow: [
                BoxShadow(
                  color: AppColors.lightGrayColor,
                  spreadRadius: 2,
                  blurRadius: 7,
                  offset: Offset(2, 2),
                ),
              ],
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20),
                topRight: Radius.circular(20),
              ),
            ),
            child: BottomNavigationBar(
              currentIndex: viewModel.currentIndex,
              selectedItemColor: AppColors.lightPrimaryColor,
              unselectedItemColor: AppColors.textColor,
              onTap: viewModel.onTap,
              selectedLabelStyle: const TextStyle(color: AppColors.lightPrimaryColor, fontWeight: FontWeight.bold),
              unselectedLabelStyle: const TextStyle(color: AppColors.textColor, fontWeight: FontWeight.normal),
              type: BottomNavigationBarType.fixed,
              elevation: 0,
              items: const [
                BottomNavigationBarItem(
                  label: 'Home',
                  icon: Icon(Icons.home_outlined),
                  activeIcon: Icon(Icons.home)
                ),
                BottomNavigationBarItem(
                  label: 'Categories',
                  icon: Icon(Icons.category_outlined),
                  activeIcon: Icon(Icons.category)
                ),
                BottomNavigationBarItem(
                  label: 'Cart',
                  icon: Icon(Icons.shopping_cart_outlined),
                  activeIcon: Icon(Icons.shopping_cart)
                ),
              ],
            ),
          ),
    Login or Signup to reply.
  2. 0

    I would recommend you to use NavigationBar which is the version that follows the recommendations of Material 3. In this case you should modify certain things to specifically achieve that aspect you could modify: splashColor, hoverColor and indicatorColor.
    You could use a StatefullWidget to modify or perform some animation, be it resize, rotate or whatever you need: to do this you should basically update the selectedIndex through setState and in combination with some AnimatedFoo widget to achieve a nice effect.

    If your requirements are very specific you can always build the button bar with a simple Row and customize it the way you want.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search