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.

Bancroft

Answer 1

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

Dippold

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 ? – Bancroft

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 ? – Bancroft

If you place your TabBar in PreferredSize widget it seems to work. but i'm not sure. checkout this link : #44272940 – Dippold

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 – Bancroft

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 – Bancroft

@TheodorusAgumGumilang can you post your updated code here for reference? – Fastidious

if you are dealing with label in your tab bar than you can add this property it resolved mine problem indicatorSize: TabBarIndicatorSize.label, – Beggary

Answer 2

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

Triarchy

Answer 3

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


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

`

Mckamey

if you encounter an error regarding the MediaQuery it's because you need the context provided inside a new MaterialApp widget. More here #50214838 – Squinty

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; – Millesimal

indicatorColor: Colors.white, helped me to set indicator color. Thanks. – Roeser

Answer 4

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

Rattan

With label padding works as it must, thank a lot! – Crescent

Answer 5

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

Crinkleroot

Answer 6

You have *indicatorSize* property inside TabBar if you want equal with tab then you can you TabBarIndicatorSize.tab

  TabBar(
      indicatorSize: TabBarIndicatorSize.tab,
      isScrollable: false,
      tabs: const [
        Tab(text: 'Title One'),
        Tab(text: 'Title Two'),
      ],
    ),
  )

Jokjakarta

Answer 7

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

Strep