Posts: 0
Threads: 0
Joined: Mar 2017
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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),))
]);
|
Posts: 0
Threads: 0
Joined: Jul 2019
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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!
|
Posts: 0
Threads: 0
Joined: Jan 2018
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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.
|
Posts: 0
Threads: 0
Joined: Mar 2023
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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.
|
Posts: 0
Threads: 0
Joined: Oct 2021
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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]
),
),
),
|
Posts: 0
Threads: 0
Joined: Apr 2022
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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,
...
)
|
Posts: 0
Threads: 0
Joined: Jul 2022
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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'),
),
],
),
|
Posts: 0
Threads: 0
Joined: Sep 2022
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
**2020**
[Image][1]
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
[1]:
|
Posts: 0
Threads: 0
Joined: Dec 2022
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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')
),
|
Posts: 0
Threads: 0
Joined: Apr 2023
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
color: _selectedIndex == ThisIndex?SelectedColor:normalColor,
|
|