Search code examples
dartflutterbottombar

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

Solution

  • 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!