TabBar icon color when tab is selected

Question

I'm trying to change color of the tab icon when tab is selected. I know how to change the color of the icon, but I don't know how to make the color change when I select tab.

My code:

child: AppBar(
    bottom: TabBar(
        tabs: <Tab>[
            Tab(
                child: new Row(
                    children: <Widget>[
                        new Text("Select", textAlign: TextAlign.start),
                        new SizedBox(
                            width: 24.0,
                        ),
                        new Icon(
                            Icons.arrow_drop_down,
                            color: Colors.blue.shade400,
                        ),
                    ],
                    ....
                )
            )
        ]
    )
)

Arash Mohammadi · Accepted Answer · 2019-10-30T07:24:35.950

To change the selected tab color, you just need to add this to TabBar :

labelColor: Colors.
unselectedLabelColor: Colors.white,

Full code:

DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            labelColor: Colors.deepOrange,
            unselectedLabelColor: Colors.white,
            tabs: <Tab>[
              Tab(
                child: Row(
                  children: <Widget>[
                    Text("Select", textAlign: TextAlign.start),
                    SizedBox(
                      width: 24.0,
                    ),
                    Icon(
                      Icons.arrow_drop_down,
                      color: Colors.blue.shade400,
                    ),
                  ],
                ),
              ),
              Tab(
                child: Row(
                  children: <Widget>[
                    Text("Select", textAlign: TextAlign.start),
                    SizedBox(
                      width: 24.0,
                    ),
                    Icon(
                      Icons.arrow_drop_down,
                      color: Colors.blue.shade400,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        body: Center(
          child: Container(
            child: Text("This is a page blahblah"),
          ),
        ),
      ),
    )

EDIT: If u want to only change the icon color, then add color to Text and remove the color from the Icon in Tab, Code:

DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            labelColor: Colors.deepOrange,
            unselectedLabelColor: Colors.white,
            tabs: <Tab>[
              Tab(
                child: Row(
                  children: <Widget>[
                    Text("Select", textAlign: TextAlign.start, style: TextStyle(color: Colors.white),),
                    SizedBox(
                      width: 24.0,
                    ),
                    Icon(
                      Icons.arrow_drop_down,
                    ),
                  ],
                ),
              ),
              Tab(
                child: Row(
                  children: <Widget>[
                    Text("Select", textAlign: TextAlign.start, style: TextStyle(color: Colors.white),),
                    SizedBox(
                      width: 24.0,
                    ),
                    Icon(
                      Icons.arrow_drop_down,

                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        body: Center(
          child: Container(
            child: Text("This is a page blahblah"),
          ),
        ),
      ),
    )

EDIT #2 Now , This code changes the Icon color, but leaves the text color change as default (You can customize the change for color of text like the icon color). Code:

import 'package:flutter/material.dart';

class FirstPage extends StatefulWidget {
  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            onTap: (index){
              setState(() {
               _currentIndex = index; 
              });
            },

            tabs: <Tab>[
              Tab(
                child: Row(
                  children: <Widget>[
                    Text("Select", textAlign: TextAlign.start,),
                    SizedBox(
                      width: 24.0,
                    ),
                    Icon(
                      Icons.arrow_drop_down,
                      color: _currentIndex == 0 ? Colors.deepOrange : Colors.white54
                    ),
                  ],
                ),
              ),
              Tab(
                child: Row(
                  children: <Widget>[
                    Text("Select", textAlign: TextAlign.start,),
                    SizedBox(
                      width: 24.0,
                    ),
                    Icon(
                      Icons.arrow_drop_down,
                      color: _currentIndex == 1 ? Colors.deepOrange : Colors.white54,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        body: Center(
          child: Container(
            child: Text("This is a page blahblah"),
          ),
        ),
      ),
    );
  }
}

Thanks for answer! LabelColor change full label(text and icon) I need, to change color only for Icon. — Smith, Oct 30 '19 at 06:13
Okay, now when I unselect tab, textcolor stays white, like this tab is active instead gray like inactive. — Smith, Oct 30 '19 at 07:14
Well then u need both icon and text to change colors. You need statefullwidget for this with _currentIndex as int. I'll edit the code :) . — Arash Mohammadi, Oct 30 '19 at 07:19

score 4 · Answer 2 · answered Oct 30 '19 at 07:00

TabBar has the properties labelColor and unselectedLabelColor to set a selected/unselected color to any icon and text in the Tabs.

If you want to have a fixed color for icons or texts in the Tabs, you just have to specify that color in the Icon or Text in the Tab to override the color defined in the properties labelColor and unselectedLabelColor of the TabBar.

So, in your case, if you want to have a selected/unselected color for icons and a fixed color for the text, you have to set the labelColor and unselectedLabelColor in the TabBar with the colors for the icons and set a specific color on the text inside the Tabs.

score 3 · Answer 3 · answered Oct 30 '19 at 05:53

3

Create a custom tab controller as shown click here
Do something like _tabController.index to get the index of the current tab.
For each tab check if its position(starting from 0) matches the TabController index and display the appropriate icon

answered Oct 30 '19 at 05:53

Jaspalsinh Gohil

941
1
9
20

TabBar icon color when tab is selected

3 Answers3