Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change color of tab's icon in selected and unselected state in flutter?

Tags:

flutter

I want to define unselected color of icon in tab just like unselectedLabelColor.

  TabBar(
          indicatorColor: Colors.grey,
          labelColor: Colors.black,
          unselectedLabelColor: Colors.grey,
          tabs: [
            Tab(
                text: 'first',
                icon: Icon(Icons.directions_car, color: Colors.grey)),
            Tab(
                text: 'second',
                icon: Icon(Icons.directions_transit, color: Colors.grey)),
            Tab(
                text: 'third',
                icon: Icon(Icons.directions_bike, color: Colors.grey)),
          ],
        )
like image 627
bilal Avatar asked Dec 28 '18 10:12

bilal


People also ask

How do you put a border on a TabBar in flutter?

Try to set appBar border : appBar: AppBar( shape: Border(bottom: BorderSide(color: Colors. red)), .... what you suggested is too close, it's only under the indicatorColor.


Video Answer


1 Answers

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)),
            ],
          )
like image 171
bilal Avatar answered Sep 21 '22 19:09

bilal