There are some basic properties provided in the TabBar
but the are not enough in your use case. You have to create a TabController
and an index variable. Whenever the switch happened TabController
have to set the index & background of the tab is needs to be set according to that index.
Editing my code for more optimise answer with border radius
Example Code
class _TabDemoState extends State<TabDemo> with SingleTickerProviderStateMixin {
TabController _tabController;
int _selectedTab = 0;
@override
void initState() {
super.initState();
_tabController = TabController(vsync: this, length: 3);
_tabController.addListener((){
if (!_tabController.indexIsChanging){
setState(() {
_selectedTab = _tabController.index;
});
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Tab Demo"),
),
backgroundColor: Colors.white,
body: DefaultTabController(
length: 3,
child: Column(
children: <Widget>[
Material(
color: Colors.grey.shade300,
child: TabBar(
unselectedLabelColor: Colors.blue,
labelColor: Colors.blue,
indicatorColor: Colors.white,
controller: _tabController,
labelPadding: const EdgeInsets.all(0.0),
tabs: [
_getTab(0, Icon(Icons.directions_car)),
_getTab(1, Icon(Icons.directions_transit)),
_getTab(2, Icon(Icons.directions_bike)),
],
),
),
Expanded(
child: TabBarView(
physics: NeverScrollableScrollPhysics(),
controller: _tabController,
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
],
)),
);
}
_getTab(index, child) {
return Tab(
child: SizedBox.expand(
child: Container(
child: child,
decoration: BoxDecoration(
color:
(_selectedTab == index ? Colors.white : Colors.grey.shade300),
borderRadius: _generateBorderRadius(index)),
),
),
);
}
_generateBorderRadius(index) {
if ((index + 1) == _selectedTab)
return BorderRadius.only(bottomRight: Radius.circular(10.0));
else if ((index - 1) == _selectedTab)
return BorderRadius.only(bottomLeft: Radius.circular(10.0));
else
return BorderRadius.zero;
}
}
Note - In this I have faced an issue. Its when you fast swipe on from left to right that _tabContoller
values returns two values first it gives you index-2
value than index-1
value which is expected. I don't know why this is happening but to resolve this issue I have to disable the scroll on TabBarView
.
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.