How to change color of tab's icon in selected and unselected state in flutter?
As per the directions given by Britannio, I have solved my problem but I want to share my solution so that it can help others. I am confused about one thing that I have to call setState() with empty body which is not recommended so if any one have a better solution then please comment. I'll update it.
TabController _tabController;
@override
void initState() {
super.initState();
_tabController = new TabController(vsync: this, length: 3);
_tabController.addListener(_handleTabSelection);
}
void _handleTabSelection() {
setState(() {
});
}
TabBar(
controller: _tabController,
indicatorColor: Colors.grey,
labelColor: Colors.black,
unselectedLabelColor: Colors.grey,
tabs: [
Tab(
text: 'Sale',
icon: Icon(Icons.directions_car,
color: _tabController.index == 0
? Colors.black
: Colors.grey)),
Tab(
text: 'Latest',
icon: Icon(Icons.directions_transit,
color: _tabController.index == 1
? Colors.black
: Colors.grey)),
Tab(
text: 'Popular',
icon: Icon(Icons.directions_bike,
color: _tabController.index == 2
? Colors.black
: Colors.grey)),
],
)
Now you can simply change color of labelColor property
bottomNavigationBar: TabBar(
tabs: [
],
labelColor: Colors.deepPurpleAccent,
),
There are two ways
- You can use
activeIcon
:
BottomNavigationBarItem(
activeIcon: ,
icon: ,
- You can use additional field:
IconData selectedItem = Icons.dashboard;
List<IconData> itemsList = [
Icons.dashboard,
Icons.location_on,
Icons.notifications,
Icons.account_circle,
];
//...
BottomNavigationBar(
onTap: (int index) {
setState(() {
selectedItem = itemsList[index];
});
},
currentIndex: itemsList.indexOf(selectedItem),
items: itemsList.map((data) {
return BottomNavigationBarItem(
icon: selectedItem == data
? Icon(data, color: Colors.grey)
: Icon(data, color: Colors.grey),
title: Container(),
);
}).toList());
UPD:
For Tab
there no activeIcon
, so, it seems that you can use second way