How to customize tabbar width in flutter?

TabBar(isScrollable: true)

Makes a scrollable tab bar. it's useful when your tab text content or number of your tabs doesn't fit into display size.

or maybe you can do something like this:

child: TabBar(
            tabs: [
              Container(
                width: 30.0,
                child: Tab(text: 'hello'),
              ),
              Container(
                  child: Tab(text: 'world'),
              ),
            ],
          )

  double width = MediaQuery.of(context).size.width;

    double yourWidth = width  / 5;


bottom: TabBar(
            indicatorColor: Colors.white,
            indicatorSize: TabBarIndicatorSize.label,
            isScrollable: true,
            controller: _tabcontroller,
            tabs: <Widget>[
              Container(
                width: 30,
                height: 50,
                alignment: Alignment.center,
                child: Icon(
                  Icons.camera_alt,
                ),
              ),
              Container(
                width: yourWidth,
                  height: 50,
                  alignment: Alignment.center,
                  child: Text("CHATS")),
              Container(
                  width: yourWidth,
                  height: 50,
                  alignment: Alignment.center,
                  child: Text("STATUS")),
              Container(
                  width: yourWidth,
                  height: 50,
                  alignment: Alignment.center,
                  child: Text("CALL"))
            ],
          ),`


---------------

`

You can add labelPadding to your TabBar Widget like so:

child: TabBar(
        indicatorColor: Colors.white,
        labelPadding: EdgeInsets.symmetric(horizontal: 2.0),
        ....
        tabs: <Tab>[
                     ......
        ]
)
......

Or you can do this (I don't recommend it)

In the material/tabs.dart file, edit this line:

padding: widget.labelPadding ?? tabBarTheme.labelPadding ?? kTabLabelPadding,

with something similar

padding: EdgeInsets.symmetric(horizontal: 2.0),

By default flutter uses kTabLabelPadding for padding.

Flutter issue here


here's how I solved this problem:

    bottom: TabBar(
      isScrollable: true,
      controller: _tabController,
      indicatorColor: Colors.white,
      labelPadding: EdgeInsets.symmetric(horizontal: 10.0),

      tabs: <Widget>[
        Tab(
          icon: Icon(Icons.camera_alt),
        ),
        Tab(
          text: "CONVERSAS",
        ),
        Tab(
          text: "STATUS",
        ),
        Tab(
          text: "CHAMADAS",
        )
      ],
    )

Just use padding, I think it'll work for every screen size! ... and don't forget:

   isScrollable: true