If you want to change BottomNavigationBarItem icon when selected in Flutter. 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | 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),)) ]) |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
