How to change BottomNavigationBarItem icon when selected, Flutter

Question

I am new to Flutter. I have a BottomNavigationBar with 4 items. I want to change icon of the item when pressed. Please help.

This is what I have done so far.

bottomNavigationBar : new BottomNavigationBar(
        currentIndex: index,
        onTap: (int index) {
          setState(() {
            this.index = index;
          }
          );
          _navigateToScreens(index);
        },
        type: BottomNavigationBarType.fixed,
        items: [
          new BottomNavigationBarItem(
              backgroundColor: Colors.white,
              icon: new Image.asset('images/1.0x/icon1.png'),
              title: new Text("Route1", style: new TextStyle(
                  color: const Color(0xFF06244e), fontSize: 14.0))),
          new BottomNavigationBarItem(
              icon: new Image.asset('images/1.0x/icon2.png'),
              title: new Text("Route2", style: new TextStyle(
                  color: const Color(0xFF06244e), fontSize: 14.0))),
          new BottomNavigationBarItem(
              icon: new Image.asset('images/1.0x/icon3.png'),
              title: new Text("Route3", style: new TextStyle(
                  color: const Color(0xFF06244e), fontSize: 14.0),)),
          new BottomNavigationBarItem(
              icon: new Image.asset('images/1.0x/icon4.png'),
              title: new Text("Route4", style: new TextStyle(
                  color: const Color(0xFF06244e), fontSize: 14.0),))
        ]);

Answer 1

There is new feature added in flutter in BottomNavigationBarItem that is active icon . we can use it to tell what should be the icon when a tab is active

bottomNavigationBar : new BottomNavigationBar(
    currentIndex: index,
    onTap: (int index) {
      setState(() {
        this.index = index;
      }
      );
      _navigateToScreens(index);
    },
    type: BottomNavigationBarType.fixed,
    items: [
      new BottomNavigationBarItem(
          backgroundColor: Colors.white,
          icon: new Image.asset('images/1.0x/icon1.png'),
          activeIcon:new Image.asset('images/1.0x/newIcon.png'),
          title: new Text("Route1", style: new TextStyle(
              color: const Color(0xFF06244e), fontSize: 14.0))),
      new BottomNavigationBarItem(
          icon: new Image.asset('images/1.0x/icon2.png'),
          activeIcon:new Image.asset('images/1.0x/newIcon.png'),
          title: new Text("Route2", style: new TextStyle(
              color: const Color(0xFF06244e), fontSize: 14.0))),
      new BottomNavigationBarItem(
          icon: new Image.asset('images/1.0x/icon3.png'),
          activeIcon: new Image.asset('images/1.0x/newIcon.png'),
          title: new Text("Route3", style: new TextStyle(
              color: const Color(0xFF06244e), fontSize: 14.0),)),
      new BottomNavigationBarItem(
          icon: new Image.asset('images/1.0x/icon4.png'),
          activeIcon: new Image.asset('images/1.0x/newIcon.png'),
          title: new Text("Route4", style: new TextStyle(
              color: const Color(0xFF06244e), fontSize: 14.0),))
    ]),

Hope someone will find this useful.

Answer 2

You can change the icon by checking for the current index is equal to the index of BottomNavigationBarItem index.

Simple example with static index values:

bottomNavigationBar : new BottomNavigationBar(
        currentIndex: index,
        onTap: (int index) {
          setState(() {
            this.index = index;
          }
          );
          _navigateToScreens(index);
        },
        type: BottomNavigationBarType.fixed,
        items: [
          new BottomNavigationBarItem(
              backgroundColor: Colors.white,
              icon: index==0?new Image.asset('images/1.0x/icon1.png'):new Image.asset('images/1.0x/newIcon.png'),
              title: new Text("Route1", style: new TextStyle(
                  color: const Color(0xFF06244e), fontSize: 14.0))),
          new BottomNavigationBarItem(
              icon: index==1?new Image.asset('images/1.0x/icon2.png'):new Image.asset('images/1.0x/newIcon.png'),
              title: new Text("Route2", style: new TextStyle(
                  color: const Color(0xFF06244e), fontSize: 14.0))),
          new BottomNavigationBarItem(
              icon: index==2?new Image.asset('images/1.0x/icon3.png'):new Image.asset('images/1.0x/newIcon.png'),
              title: new Text("Route3", style: new TextStyle(
                  color: const Color(0xFF06244e), fontSize: 14.0),)),
          new BottomNavigationBarItem(
              icon: index==3?new Image.asset('images/1.0x/icon4.png'):new Image.asset('images/1.0x/newIcon.png'),
              title: new Text("Route4", style: new TextStyle(
                  color: const Color(0xFF06244e), fontSize: 14.0),))
        ])

Hope that helps!

Answer 3

If anyone is looking for a solution to change the Bottom Navigation Bar Item's color,when "type" is set to "shifting", then give this a try:

type: BottomNavigationBarType.shifting,
  items: [
    BottomNavigationBarItem(
      activeIcon: Icon(
          Icons.home,
          color: Colors.grey[700],
        ),
      icon: Icon(
          Icons.home,
          color: Colors.grey,
        ),
      title: Text(
        'Home',
        style: TextStyle(
          color: Colors.grey[600]
          ),
        ),
    ),

Answer 4

If all you want to change is the color of the BottomNavigationBarItem icon, you don't need to have two images with different colors for one icon. Just one is enough.

You can use ImageIcon to create icon from custom image, and use it's color property to change the icon color, using the value of the currentIndex, like this:

bottomNavigationBar: BottomNavigationBar(
    type: BottomNavigationBarType.fixed,
    currentIndex: currentTab,
    onTap: (int index) {
      setState(() {
        currentTab = index;
        currentPage = pages[index];
      });
    },
    items: <BottomNavigationBarItem>[
      BottomNavigationBarItem(
          icon: ImageIcon(
            AssetImage("assets/img/tab1.png"),
            color: currentTab == 0
                ? Colors.orange
                : Colors.black,
          ),
          title: Text('Title 1',
            style: TextStyle(
                fontSize: 10.0,
                color: currentTab == 0
                    ? Colors.orange
                    : Colors.black),
          )
      ),
      BottomNavigationBarItem(
          icon: ImageIcon(
            AssetImage("assets/img/tab2.png"),
            color: currentTab == 1
                ? Colors.orange
                : Colors.black,
          ),
          title: Text('Title 2',
            style: TextStyle(
                fontSize: 10.0,
                color: currentTab == 1
                    ? Colors.orange
                    : Colors.black),)
      ),
      BottomNavigationBarItem(
          icon: ImageIcon(
            AssetImage("assets/img/tab3.png"),
            color: currentTab == 2
                ? Colors.orange
                : Colors.black,
          ),
          title: Text('Title 3',
            style: TextStyle(
                fontSize: 10.0,
                color: currentTab == 2
                    ? Colors.orange
                    : Colors.black),)
      ),
      BottomNavigationBarItem(
          icon: ImageIcon(
            AssetImage("assets/img/tab4.png"),
            color: currentTab == 3
                ? Colors.orange
                : Colors.black,
          ),
          title: Text('Title 4',
            style: TextStyle(
                fontSize: 10.0,
                color: currentTab == 3
                    ? Colors.orange
                    : Colors.black),)
      )
    ],
  ),

Hope someone will find this useful.

Answer 5

2020

Image

2 way

The better way currently to do it is:

    selectedItemColor: Colors.white,
    unselectedItemColor: Color(0xFFF434A50),
    items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(
            icon: ImageIcon(AssetImage("assets/tab1.png"),),
            title: Text('Agents'),
        ),
    ]

Alternative way:

BottomNavigationBarItem(
   activeIcon: Image.asset("assets/tab1.png",width: 15,color: Colors.white,),
   icon: Image.asset("assets/tab1.png",width: 15,color: Color(0xFFF434A50),),
   title: Text('Agents'),
 ),

activeIcon - Selected tab

icon - Deselected tab

Answer 6

If you just want to change the color and not the icon itself, fixedColor determines the colour of the icon when it's selected:

BottomNavigationBar(
        ...
        fixedColor: Colors.red,
        ...
)

Answer 7

Changed Active Icon for Bottom Navigation Bar in this way if you are showing icon from Image Assets:

BottomNavigationBarItem(
              activeIcon: Image.asset(
                'assets/images/useractive.png',
                height: 25,
                width: 25,
              ),
              icon: Image.asset(
                'assets/images/user.png',
                height: 25,
                width: 25,
              ),
              title: Text('My Time Out')
),

Answer 8

I solved in this way. At the BottomNavigationBar , there are two attributes selectedItemColor and unselectedItemColor

bottomNavigationBar: BottomNavigationBar(
    ...
    selectedItemColor: Theme.of(context).primaryColor,
    unselectedItemColor: Theme.of(context).secondaryHeaderColor,
    ...
    items: [
      BottomNavigationBarItem(
        icon: Icon(Icons.search),
        title: Text('Search'),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.star),
        title: Text('Featured'),
      ),
   ],
  ),

Answer 9

color: _selectedIndex == ThisIndex?SelectedColor:normalColor,

Answer 10

Just wanna add to the existing answers: Although fixedColor , (un)selectedItemColor are the ways to go, there is a gotcha:

They will be overriden by BottomNavigationBarItem.icon.color !

So make sure you get rid of the hardcoded icon color first.

Answer 11

BottomNavigationBarItem(
          activeIcon: Image.asset(
            'lib/assets/images/homeActive.png',
            height: 25,
            width: 25,
          ),
          icon: Image.asset(
            'lib/assets/images/homePassive.png',
            height: 25,
            width: 25,
          ),
          label: 'Home'
      )

update 2022