CODEWITHSUNDEEP
dartmaterial-designflutter
Theodorus Agum Gumilang
Theodorus Agum Gumilang

Reputation: 1486

How to customize tabbar width in flutter?

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

Upvotes: 46

Views: 84454

Answers (8)

user28665759
user28665759

Reputation: 1

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

Upvotes: 0

Prawesh Panthi
Prawesh Panthi

Reputation: 368

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

Upvotes: 1

Sad Lemon
Sad Lemon

Reputation: 1

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

Upvotes: 0

behzad besharati
behzad besharati

Reputation: 6920

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

Upvotes: 76

Leonardo Severo
Leonardo Severo

Reputation: 510

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

Upvotes: 34

Adem Aygun
Adem Aygun

Reputation: 582

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

Upvotes: 4

Paul Kitatta
Paul Kitatta

Reputation: 509

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

Upvotes: 5

Hardik Bhalala
Hardik Bhalala

Reputation: 219

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


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

`

Upvotes: 19

Related Questions