How to customize tabbar width in flutter?

Question

Hi can we customize tabbar width in flutter ? my tabbar width is fixed in here so when i have long text in my tabbar it will not shown completetly, i want to make my tabbar width is flexible base on the content so when my text is just short text the tabbar width will be small and when the text is long text the tabbar width be bigger than the short text tab. I've been try search it on internet but i can't found any answer to fix my issues.

score 71 · Accepted Answer · edited Jun 13 '22 at 16:41

71

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

edited Jun 13 '22 at 16:41

Amani

16,245
29
103
153

answered Jul 09 '18 at 07:56

behzad besharati

5,873
3
18
22

4

yes it usefull, but what i want is to make the tabbar width is smaller , there is lot not used space between icon camera and chatting tab, how do i achieve this ? whatsapp can do this, they can make the camera icon tab so small . so the question is can we do that in flutter ? – Theodorus Agum Gumilang Jul 09 '18 at 08:35
i don't know mate it doesnt work on me, the tabbar width its still fixed, so if the total width is 400 its always split too 200 - 200 instead off 300 - 100 etc. hmm are you sure you already try that ? and can you confirm if that works ? – Theodorus Agum Gumilang Jul 09 '18 at 09:13
If you place your TabBar in PreferredSize widget it seems to work. but i'm not sure. checkout this link : https://stackoverflow.com/questions/44272440/how-can-i-customize-the-tabbar-indicator-width-and-height – behzad besharati Jul 09 '18 at 09:29
i already try that but still no luck , i can only change the height of the tabbar , and i think that answer is for the indicator of the tabbar not the tabbar it self. hmm maybe we can't change the width of the tabbar ? still can't find any answer in the internet – Theodorus Agum Gumilang Jul 09 '18 at 10:27
done i already figured out now, im forget to use is scrollable in my previous code, now that i try again and add is scrollable, now it's works – Theodorus Agum Gumilang Jul 09 '18 at 10:47
@TheodorusAgumGumilang can you post your updated code here for reference? – Nidhin Prathap Dec 10 '18 at 10:34
if you are dealing with label in your tab bar than you can add this property it resolved mine problem `indicatorSize: TabBarIndicatorSize.label`, – Ismail Shah Nov 27 '21 at 08:30

Leonardo Severo · Answer 2 · 2021-03-17T13:43:17.127

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

Hardik Bhalala · Answer 3 · 2019-04-17T13:28:45.547

18

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


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

`

edited Apr 17 '19 at 13:28

answered Apr 05 '19 at 13:48

Hardik Bhalala

209
2
6

if you encounter an error regarding the MediaQuery it's because you need the context provided inside a new MaterialApp widget. More here https://stackoverflow.com/questions/50214338/flutter-error-mediaquery-of-called-with-a-context-that-does-not-contain-a-med – Andrea Rega Aug 30 '19 at 05:13
1

This worked for me. Directly from flutter documentation: /// If [isScrollable] is true, then each tab is as wide as needed for its label /// and the entire [TabBar] is scrollable. Otherwise each tab gets an equal /// share of the available space. final bool isScrollable; – Epsi95 Feb 02 '20 at 08:22
indicatorColor: Colors.white, helped me to set indicator color. Thanks. – Kamlesh Oct 31 '20 at 06:17

score 5 · Answer 4 · answered Nov 17 '19 at 21:02

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

With label padding works as it must, thank a lot! – Olek Jan 15 '22 at 16:57 — Olek, Jan 15 '22 at 16:57

score 4 · Answer 5 · answered Jan 12 '20 at 19:23

for different sized device:

double orjWidth = MediaQuery.of(context).size.width;
double cameraWidth = orjWidth/24;
double yourWidth = (orjWidth - cameraWidth)/5;

    bottom: TabBar(
      controller: _tabController,
      indicatorColor: Colors.white,
      labelPadding: EdgeInsets.symmetric(horizontal:(orjWidth - ( cameraWidth + yourWidth*3))/8),
      isScrollable: true,
      tabs: [
        Container(
          child: Tab(icon: Icon(Icons.camera_alt)),
          width: cameraWidth,
        ),
        Container(
          child: Tab(
            text: "CHATS",
          ),
          width: yourWidth,
        ),
        Container(
          child: Tab(
            text: "STATUS",
          ),
          width: yourWidth,
        ),
        Container(
          child: Tab(
            text: "CALL",
          ),
          width: yourWidth,
        ),

Sad Lemon · Answer 6 · 2022-11-04T07:22:34.380

0

The tabbar widget adds by itself an adjusted horizontal Padding equal to 16.

adjustedPadding = const EdgeInsets.symmetric(
vertical: verticalAdjustment, horizontal: 16.0);

if u gave a label padding to the tabbar these 16 wont be added and then manually configure the padding of the other 3 tabs using a padding widget

edited Nov 04 '22 at 07:22

answered Nov 04 '22 at 07:22

Sad Lemon

1
1

How to customize tabbar width in flutter?

6 Answers6

Linked