TabBar icon color when tab is selected - flutter

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,
),
],
....
)
)
]
)
)

Answer 1

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"),
),
),
),
);
}
}

Answer 2

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.

Answer 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