46

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.

enter image description here

Improve this question
0

8 Answers 8

Reset to default
77 
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'), ), ], )
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

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 ?
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 ?
If you place your TabBar in PreferredSize widget it seems to work. but i'm not sure. checkout this link : stackoverflow.com/questions/44272440/…
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
if you are dealing with label in your tab bar than you can add this property it resolved mine problem indicatorSize: TabBarIndicatorSize.label,
|
34

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
Improve this answer

Comments

19 
 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")) ], ),` --------------- `
Improve this answer

3 Comments

if you encounter an error regarding the MediaQuery it's because you need the context provided inside a new MaterialApp widget. More here stackoverflow.com/questions/50214338/…
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;
indicatorColor: Colors.white, helped me to set indicator color. Thanks.
5

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

Improve this answer

Comments

4

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, ),
Improve this answer

Comments

1

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

Comments

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

Improve this answer

Comments

0

use labelPadding: EdgeInsets.symmetric(horizontal: 2.0), works like a charm for me

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.