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),))
        ]);

Thanks for your response. I have posted it as an answer. please check. — Fathima km, Feb 28 '18 at 13:14

score 52 · Answer 1 · answered Aug 28 '18 at 19:26

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.

title was Deprecated, use Label instead – Somwang Souksavatd Nov 04 '21 at 08:26 — Somwang Souksavatd, Nov 04 '21 at 08:26

score 34 · Accepted Answer · answered Feb 28 '18 at 13:29

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!

Bad idea. That's too tedious to write. Instead you can wrap your list in a `Theme`. And override a few properties. Such as `primaryColor`, `accentColor`, and `caption.color`. These values are the values that BottomNavigationBar uses to icons depending on if they are selected or not. — Rémi Rousselet, Feb 28 '18 at 14:06
I do agree up on your view.But how would that change the Icon, which is an `Image.asset` here? — Hemanth Raj, Feb 28 '18 at 14:08
Oh, my bad. I thought it was about changing the selected icon color. Ignore my message then. — Rémi Rousselet, Feb 28 '18 at 14:30
@Darky, Yes, I need to change the icon, else your answer would have been correct. Thank you — Fathima km, Mar 01 '18 at 03:42
I also need to set the first image in first BottomNavigationBarItem and second image (in the conditional expression) in rest of the items when pressing back button after moving to other screens. How is this possible? please help. — Fathima km, Mar 01 '18 at 04:31
Not sure what you mean by that. Be more clear or point any visual reference — Hemanth Raj, Mar 01 '18 at 04:33

score 13 · Answer 3 · answered Sep 24 '18 at 21:52

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]
          ),
        ),
    ),

score 10 · Answer 4 · answered Jul 24 '18 at 19:22

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.

If you are wanting to change the selected icon's color you just set the "fixedColor" on the BottomNavigationBar itself.e.g. BottomNavigationBar( fixedColor: colorPrimary, items: [ BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("first")), BottomNavigationBarItem(icon: Icon(Icons.pie_chart), title: Text("insights")) ], ), ) — Andrew, Jul 25 '18 at 15:01
This should be the selected answer alongside @miloss solution. Really neat and simple without having to switch the images every time the tab is clicked — blessing dickson, Dec 06 '20 at 10:21

score 7 · Answer 5 · answered May 02 '20 at 04:13

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

MSpeed · Answer 6 · 2019-10-11T12:58:08.347

5

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,
        ...
)

edited Oct 11 '19 at 12:58

answered Jan 09 '19 at 19:13

MSpeed

8,153
7
49
61

score 4 · Answer 7 · answered May 07 '20 at 14:29

4

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')
),

answered May 07 '20 at 14:29

sagarchavan

187
3
14

late 2022 and material 3 update. there is no title argument available. So change it with (label:String) 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' ) – Umit Kırtıl Nov 19 '22 at 09:40

score 1 · Answer 8 · answered Nov 19 '22 at 09:42

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

score 0 · Answer 9 · answered Mar 23 '20 at 12:57

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'),
      ),
   ],
  ),

This seems to affect text label colour only. The icon colour is unaffected. Unfortunately, I've also tried `(un)selectedIconTheme` to no avail. — kakyo, Sep 06 '20 at 04:21

score 0 · Answer 10 · answered May 29 '20 at 04:56

0

color: _selectedIndex == ThisIndex?SelectedColor:normalColor,

answered May 29 '20 at 04:56

Muhammad Ashraf

3,323
2
12
19

score 0 · Answer 11 · answered Sep 06 '20 at 04:29

0

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.

answered Sep 06 '20 at 04:29

kakyo

10,460
14
76
140

How to change BottomNavigationBarItem icon when selected, Flutter

11 Answers11

Linked