Flutter - Wrap tab indicator width with respect to tab text

Question

As I am new to flutter, In Android,

app:tabIndicatorFullWidth="false"

I use this property in tabbar to wrap the indicator size with respect to tab text. May I know how to achieve in flutter?

Tinus Jackson · Answer 1 · 2020-03-11T13:20:08.150

8

You can set the isScrollable to true

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.

  bottom: TabBar(
              isScrollable: true, // here

              tabs: [
                Tab(text: 'Car',),
                Tab(text: 'Transit Bus',),
                Tab(text: 'Bike',),
              ],
            ),

References

edited Mar 11 '20 at 13:20

answered Mar 11 '20 at 13:14

Tinus Jackson

3,397
2
25
58

1

This changes the tab's width, and the indicator's width is still the tab's width and not the text's width. OP's answer is correct – Flafy Aug 06 '22 at 12:40

score 4 · Accepted Answer · answered Mar 11 '20 at 13:24

I Figured out the answer,

TabBar( controller: _tabController,
                  indicatorColor: Colors.white,
                  indicatorSize: TabBarIndicatorSize.label,
                  tabs: getTabs(),
                )



indicatorSize: TabBarIndicatorSize.label

this property indicatorSize solved my problem.

Flutter - Wrap tab indicator width with respect to tab text

2 Answers2

References