I've implemented TabBar()
inside my AppBar()
.
Now, there is extra space between tabs. I'm running it on Chrome (web). I've tried to add zero padding to the indicatorPadding
, labelPadding
and padding
parameters inside TabBar()
but nothing shrinks the tab bar items.
So how can I reduce the space between them? Here is the code:
Widget build(BuildContext context) {
return Container(
height: height,
color: Colors.white,
child: TabBar(
indicatorColor: Colors.black,
unselectedLabelColor: Colors.black54,
indicatorSize: TabBarIndicatorSize.label,
labelColor: Colors.black,
labelStyle: const TextStyle(
fontSize: 12,
),
tabs: [
Container(
color: Colors.red,
child: const Tab(
icon: Icon(Icons.home_rounded),
text: "Home",
iconMargin: EdgeInsets.zero,
),
),
Container(
color: Colors.green,
child: const Tab(
icon: Icon(Icons.groups_rounded),
iconMargin: EdgeInsets.zero,
text: "My Network",
),
),
const Tab(
iconMargin: EdgeInsets.zero,
icon: Icon(
Icons.work_rounded,
// size: 20,
),
text: "Jobs",
),
const Tab(
iconMargin: EdgeInsets.zero,
icon: Icon(Icons.message_rounded),
text: "Messaging",
),
const Tab(
iconMargin: EdgeInsets.zero,
icon: Icon(Icons.notifications_rounded),
text: "Notification",
),
],
));
}
}
Had the same issue. Make sure you set padding to zero for tabs, label and indicator.
TabBar(
indicatorSize: TabBarIndicatorSize.label,
isScrollable: true,
tabs: categoriesWidgets,
padding: EdgeInsets.zero,
indicatorPadding: EdgeInsets.zero,
labelPadding: EdgeInsets.zero,
indicatorWeight: 4,
)