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

  1. You can use activeIcon:
BottomNavigationBarItem(
        activeIcon: ,
        icon: ,
  1. 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

Tags:

Flutter