CODEWITHSUNDEEP
dartflutterbottombar
Fathima km
Fathima km

Reputation: 2689

How to change BottomNavigationBarItem icon when selected, Flutter

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

Upvotes: 34

Views: 81766

Answers (11)

Umit Kırtıl
Umit Kırtıl

Reputation: 60

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

Upvotes: 1

kakyo
kakyo

Reputation: 11580

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.

Upvotes: 0

Muhammad Ashraf
Muhammad Ashraf

Reputation: 3649

color: _selectedIndex == ThisIndex?SelectedColor:normalColor,

Upvotes: 0

sagarchavan
sagarchavan

Reputation: 197

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

Upvotes: 4

Igor Melo
Igor Melo

Reputation: 101

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

Upvotes: 10

Sem
Sem

Reputation: 1397

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

Upvotes: 0

MSpeed
MSpeed

Reputation: 8280

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

Upvotes: 5

sanjay
sanjay

Reputation: 281

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

Upvotes: 13

Shubham Kumar
Shubham Kumar

Reputation: 2455

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.

Upvotes: 56

miloss
miloss

Reputation: 1768

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.

Upvotes: 10

Hemanth Raj
Hemanth Raj

Reputation: 34769

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!

Upvotes: 36

Related Questions