Custom BottomNavigationBar with custom images in flutter

In this article we will see how can we show the custom BottomNavigationBar with the custom images. To create the navigation bar we use a widget called BottomNavigationBar. This widget provides the items, so here we have to add the items for navigation bar.

BottomNavigationBar(items: [

  BottomNavigationBarItem(icon: Icon(Icons.home),label: TabTitle.HOME),
]);

That’s all you can add the items just like above. But here you will face a problem like when you add more than 3 items to the navigation bar it won’t show you the navigation properly. For that you need add one more line of code like below.

BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: [

  BottomNavigationBarItem(icon: Icon(Icons.home),label: TabTitle.HOME),
]);

This code will arrange the items with the equal space in the bar.

Here, we have to observe two things, one is when user selects any item the item should be in selected color, So, we need to change the icon and label colors respectively.

For selected icon, we have to add activeIcon: in the item just like below.

BottomNavigationBarItem(icon: unselectedImage,activeIcon: selectedImage, label: TabTitle.HOME),

In the above the we are using two images one is unselectedImage and selectedImage, when user selects item the activeIcon will show the image.

Same thing, for label also we have change the color of label when user selects.

for that we need to add this line of code.

selectedItemColor: any color
unselectedItemColor: any color

Yes, here when any item is selected, then icon and label will be change.

And also you can add the some style to the labels like below

selectedLabelStyle: your textstyle
unselectedLabelStyle: your textstyle

How to make navigation bar items with single image for item ?

In the above example we have been using two images one is for icon and another one is for activeicon. But if you have only one image then how to can you get the same result.

It is very simple to do like below

BottomNavigationBarItem(icon: selectedImage,color:blue,activeIcon: selectedImage,color:red, label: TabTitle.HOME),

Here, i am using only one selected image but i am adding the blue color for icon and when user selected the item the active icon comes with the red color.but the selected image should be png image.

and last thing, when user select the item how it will reflect, lets see.

just take a global variable as

int _selectedIndex = 0;

and when user tap on any item

onTap: bottomNavigationItemTapped(int index) {
  setState(() {
    _selectedIndex = index;
  });

and we use this _selectedIndex in

BottomNavigationBar(
currentIndex: _selectedIndex)

By this code when user tap on item it changes the state of navigation by using currentindex.

Thats all, I hope you like my article and help me to improve by your suggestions.

If you found this article helpful click and hold 👏 a button and show some love and help others to find this article.

Feeling more generous, you can buy me a cup of tea.