So, I have set up a TabBarView with its tabs containing an icon and text each. The text seem to linearly change color as you switch between tabs by sliding. How do you achieve this same effect for the icon as well? I managed to make it switch color ON TAP but it's not obeying the same rule when sliding.
I have tried with tabController.index == 0
etc. Still not working.
Work With Tap
Or Sliding
Both :
child: new TabBar(
indicatorColor: Colors.white,
unselectedLabelColor: Colors.grey, // for unselected
labelColor: Colors.white, // for selected
indicatorWeight: 5.0,
tabs: [
new Tab(
text: 'Unpaid'.toUpperCase(),
),
new Tab(
text: 'Draft'.toUpperCase(),
),
new Tab(
text: 'All'.toUpperCase(),
),
],
),
),
),
body: new TabBarView(
children: [
new first.UnpaidInvoicePage(),
new second.PaidInvoicePage(),
new third.AllInvoicePage(),
],
),
Please Try below code:
========================================================================
import 'package:flutter/material.dart';
void main() {
runApp(TabBarDemo());
}
class TabBarDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
unselectedLabelColor: Colors.amber, // UnSelected Tab Color
labelColor: Colors.black, // Selected Tab Color
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
title: Text('Tabs Demo'),
),
body: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
),
);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.