Reputation: 1214

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

Upvotes: 19

Answers (8)

Himanshu Flutter

Reputation: 11

   TabBar(
                tabAlignment: TabAlignment.start,
                indicatorSize: TabBarIndicatorSize.label,
                padding: EdgeInsets.all(0),
                isScrollable: true,
                unselectedLabelStyle: TextStyle(color: AppColors.black),
                controller: tabcotroller,
                tabs: list),

Upvotes: 1

Khoa Nguyen

Reputation: 271

TabBar( ... tabAlignment: TabAlignment.start, )

Upvotes: 24

rahm_rny12

Reputation: 105

Maybe you should try labelPadding parameter. Giving it a value of 0 should take care of the problem for you.

Upvotes: 1

Tinku George

Reputation: 615

Change the value for the property labelPadding to adjust the padding of tabs. For no padding, labelPadding: EdgeInsets.zero.

Upvotes: 5

Rishita Joshi

Reputation: 425

you can give width attribute to the container

 Container(
        color: Colors.red,
        width:2.0
        child: const Tab(
          icon: Icon(Icons.home_rounded),
          text: "Home",
          iconMargin: EdgeInsets.zero,
        ),
      ),

Upvotes: 0

Mysterious Girl

Reputation: 418

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

Upvotes: 40

Chirag Bargoojar

Reputation: 1214

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: