Search code examples
flutterflutter-layouttabbar

How to remove extra space between tabs in flutter?

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",
      ),
    ],
  ));
 }
}

enter image description here

Solution

  • 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,
 )