How to set the indicator color to more than one tab at a time in Tab bar view flutter? - flutter

Question

I have a tab bar view with 3 tabs, Email, Profile, Complete. Now there is a button in Email like such:
1. Email Tab
widget.theTabController.animateTo(
(widget.theTabController.index + 1),
);
When this button is clicked the tab changes and so does the indicator color changes.
But is there any way I could keep the indicator color of the Email tab same as the Profile tab like such:
Below is the code of my tab bar view.
Tabbar view
class SignupEmail extends StatefulWidget {
#override
_SignupEmailState createState() => _SignupEmailState();
}
class _SignupEmailState extends State<SignupEmail>
with SingleTickerProviderStateMixin {
bool entryPermission = false;
final List<Tab> myTabs = <Tab>[
new Tab(text: 'EMAIL'),
new Tab(text: 'PROFILE'),
new Tab(text: 'COMPLETE'),
];
TabController _tabController;
void initState() {
super.initState();
_tabController = new TabController(vsync: this, length: myTabs.length);
_tabController.addListener(() {
print("Selected Index: " + _tabController.index.toString());
});
}
#override
void dispose() {
_tabController.dispose();
super.dispose();
}
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
backgroundColor: Colors.white,
body: SingleChildScrollView(
child: Padding(
padding:
const EdgeInsets.only(left: 16, right: 16, top: 50, bottom: 0),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
MainTitle(),
Container(
child: DefaultTabController(
length: myTabs.length,
child: Column(
children: [
Container(
// height: 50,
width: double.infinity,
child: IgnorePointer(
child: TabBar(
controller: _tabController,
unselectedLabelColor:
Color.fromRGBO(0, 0, 0, 0.87),
labelColor: Color(0xff9E9E9E),
indicatorColor: Color.fromRGBO(98, 0, 238, 1),
tabs: myTabs,
),
),
),
SizedBox(
height: 28,
),
Container(
width: double.infinity,
height: 500,
child: TabBarView(
// physics: NeverScrollableScrollPhysics(),
controller: _tabController,
children: [
EmailTab(
theTabController: _tabController,
),
ProfileTab(
theTabController: _tabController,
),
CompleteEmail()
]),
),
],
)),
),
],
),
),
),
),
),
);
}
}

Answer 1

I think the only way is to build a tab navigation by yourself. I recently had a similar issue, when I wanted the tab color to match the screen color.
I simply created a stack with
Positioned(
left: safeAreaPos.dx,
width: safeAreaPos.dx + safeAreaSize.width,
bottom: 0,
child: Row(
children: [
for (var i = 0; i < 4; i++)
TabButton(i, context)
],
and render my tab
Widget TabButton(int tabIndex, BuildContext context) {
final List<String> labels = ['A', 'B', 'C', 'D'];
final List<double> labelSizes = [12, 16, 16, 12];
return SizedBox(
height: 50, width: safeAreaSize.width / 4,
child:
FlatButton(
color: bgTabColors[tabIndex],
padding: EdgeInsets.all(0),
textColor: CupertinoColors.white,
child: Text(labels[tabIndex], style: TextStyle(fontSize: labelSizes[tabIndex]),),
onPressed: () =>
BlocProvider.of<ProjectKanbanBloc>(context).add(ProjectKanbanTabRequested(tabIndex)),
)
);
}
}