Step-by-Step Tutorial: Creating a Custom Bottom Navigation Bar in Flutter

The benefit of a Customized Bottom Navigation Bar

A custom bottom navigation bar in Flutter can offer several benefits for mobile app development. First and foremost, it can improve the overall user experience of the app by providing quick and easy navigation between different screens or features. Customization of the navigation bar can also be an opportunity to reinforce the branding of the app and make it stand out from competitors.

Furthermore, using a custom bottom navigation bar can provide greater flexibility and control over the design and functionality of the app, allowing developers to tailor it to the specific needs of their users. Overall, a custom bottom navigation bar in Flutter is an effective tool for improving the user experience and creating a more unique and memorable app.

What we are building: Custom Bottom Nav Bar

We are going to build the bottom navigation bar with the list of icons above and the behavior is the icon’s color changing to red while it is active or tapped and back to white while inactive. The same goes for BottomNavigationBarItem labels. It also navigates us to another view within our app.

Adding Assets

The design is from 5ly.co, so please check the design on the Figma community by yourself to get the design and all the necessary icons. In our app just add all the icons within the assets directory.

Don't forget to edit our pubspec.yaml file just like below.

flutter:
  uses-material-design: true
  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/images/buttons/bottom_navigation_bar/

Creating List of BottomNavigationBarItem

In the code above, we are having two Lists of items with different data types. The first is a List of String that holds the path for the icons, the second is the List of BottomNavigationBarItem classes that we are going to use in the customized BottomNavigationBar widget. Each item in the List of BottomNavigationBarItem has three properties. The activeIcon and icon properties are assigned with the value from List of String by adding the suffix _activated.png and _inactive.png to decide which icon to be used when the item is tapped or not. The label property is assigned with the String, Home, Shop, Bag, Favorites, and Profile String.

Creating CustomBottomNavigationBar Widget

We are creating the customized BottomNavigationBar widget by extending the StatelessWidget and returning the BottomNavigationBar widget. Our customized widget has one required constructor parameter, which is currentIndex to determine which page to be navigating to. The BottomNavigationBar widget that we are returning was wrapped by ClipRRect widget to create a rounded top left and top right corner by assigning value to the borderRadius property.

The BottomNavigationBar has a white background color. It also decides which item is active using the currentIndex value from the constructor to be passed to the currentIndex property. In the items property, we assigned the list named bottomNavigationBarItem that we have created before. The type of the BottomNavigationBar is BottomNavigationBar.fixed, so the icon would be prevented from being shifted while the user is taping.

The last is the onTap property, the anonymous function takes the index variable as its parameter. Within the function, we do the if statement, if the index is not equal to the currentIndex, we are sending the settings argument with the index value to the onGenerateRoute and navigating to the appropriate page or view, if the index value is equal to the currentIndex, we are not going anywhere because it means the user tapping the active item and we do not want the user to move to the same page again and again.

The onGenerateRoute Function

We were making the onGenerateRoute before in the first article, but just take a look at the code once again.

We can see, that the settings argument was passed to the onGenerateRoute function. Within the function, we are creating all the navigation logic for our app. Let's see our code in the implementation by pressing the run without debugging in the editor.

Great, we have done the customized button navigation bar for our app. We built the widget by creating a reusable widget that returns the BottomNavigationBar. BottomNavigationBar was tailored by reserving the beautiful icons and appropriate labels for each BottomNavigationBarItem.

In conclusion, creating a custom bottom navigation bar in Flutter can be a powerful way to enhance the user experience of your mobile app. With the flexibility and control that a custom navigation bar provides, you can design a more unique and memorable app that sets it apart from competitors. Overall, a custom bottom navigation bar in Flutter is a smart investment in the long-term success of your app, and it’s an essential tool to improve the navigation and user experience of your mobile app.

You can find the rest source code here on my GitHub.