Home > Software design >  How to remove extra space between tabs in flutter?
How to remove extra space between tabs in flutter?

Time:09-29

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

CodePudding user response:

if you want to make the space around them (at right and left) where tabs closer to each other. try to add symmetric padding like this for the tabbar:

TabBar(... padding: EdgeInsets.symmetric(horizontal: 30),tabs:[...])

CodePudding user response:

I'm able to find the solution to this.

Just by adding isScrollable: true parameter to TabBar() all tabs shrink to one side.

Without setting isScrollable: true all tabs items were taking all the space they have in the given widget.

End Result:

enter image description here

  • Related