How to change tab bar highlighted color - flutter

Question

Note:
Solution from stackoverflow about this question not solved my issue
My full code
import 'package:flutter/material.dart';
class BookingHistory extends StatefulWidget {
BookingHistory({Key key}) : super(key: key);
#override
_BookingHistoryState createState() => _BookingHistoryState();
}
class _BookingHistoryState extends State<BookingHistory> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
// backgroundColor: Colors.white,
appBar: AppBar(
flexibleSpace: Container(
color: Colors.green,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
TabBar(indicatorColor: Colors.blue,
labelColor: Colors.red,
unselectedLabelColor: Colors.green,
tabs: [
Tab(
child: Text(
"Completed",
style: TextStyle(color: Colors.white),
),
),
Tab(
child: Text(
"Requested",
style: TextStyle(color: Colors.white),
),
),
Tab(
child: Text(
"Accepted",
style: TextStyle(color: Colors.white),
),
)
])
],
),
),
),
body: TabBarView(children: [
Container(
child: Center(
child: Text("i am tab 1"),
),
),
Container(
child: Center(
child: Text("i am tab 2"),
),
),
Container(
child: Center(
child: Text("i am tab 3"),
),
)
]),
)),
);
}
}
Answer
To make effecting indicatorColor,labelColor or unselectedLabelColor we need wrap Widget with Material Widget(Solution suggested by Ravinder Kumar) or if we need only to change indicatorColor color then use indicatorColor: Colors.blueAccent color with ending with name Accent (Solution suggested by Amazing Aidan)

Answer 1

Bizarrely, changing the code to
indicatorColor: Colors.blueAccent
works but not Colors.blue

Answer 2

Wrap your TabBar inside Material widget,
Material(
color: Colors.green,
child:
TabBar(
indicatorColor: Colors.red,
labelColor: Colors.red,
unselectedLabelColor: Colors.green,
.....
Output:
Complete Code
class BookingHistory extends StatefulWidget {
BookingHistory({Key key}) : super(key: key);
#override
_BookingHistoryState createState() => _BookingHistoryState();
}
class _BookingHistoryState extends State<BookingHistory> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
// backgroundColor: Colors.white,
appBar: AppBar(
flexibleSpace: Container(
color: Colors.green,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Material(
color: Colors.green,
child:
TabBar(
indicatorColor: Colors.red,
labelColor: Colors.red,
unselectedLabelColor: Colors.green,
tabs: [
Tab(
child: Text(
"Completed",
style: TextStyle(color: Colors.white),
),
),
Tab(
child: Text(
"Requested",
style: TextStyle(color: Colors.white),
),
),
Tab(
child: Text(
"Accepted",
style: TextStyle(color: Colors.white),
),
)
]))
],
),
),
),
body: TabBarView(children: [
Container(
child: Center(
child: Text("i am tab 1"),
),
),
Container(
child: Center(
child: Text("i am tab 2"),
),
),
Container(
child: Center(
child: Text("i am tab 3"),
),
)
]),
)),
);
}
}
UPDATE: strangely any colors other than seems to work, for example use indicatorColor: Colors.black,

Answer 3

The Container in the AppBar is unncessary, instead directly set backgroundColor: Colors.green in AppBar.
And in the TabBar set indicatorColor, labelColor, unselectedLabelColor properly.
In each Tab you don't need to specify TextStyle. It will override labelColor and unselectedLabelColor from the TabBar.
AppBar(
backgroundColor: Colors.green,
flexibleSpace: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
TabBar(
indicatorColor: Colors.white,
labelColor: Colors.white,
unselectedLabelColor: Colors.white70,
tabs: [
Tab(child: Text("Completed")),
Tab(child: Text("Requested")),
Tab(child: Text("Accepted"))
])
],
),
)