0

Please tell me how to remove this hiding of attempted in TabBar. I used container to give size, but it's not changing the size of tab. I think by using indicatorsize, it can be done, but not sure how and which method is best for these cases.

enter image description here

Here is the code -

bottom: TabBar(
            unselectedLabelColor: Colors.white,
            labelColor: Colors.white,
            tabs: [
              Container(
                width: 100,
                child: const Tab(
                  text: 'Attempted',
                ),
              ),
              Container(
                width: 120,
                child: const Tab(
                  text: 'Booked',
                ),
              ),
              Container(
                width: 80,
                child: const Tab(
                  text: 'Travelled',
                ),
              ),
              Container(
                width: 100,
                child: const Tab(
                  text: 'Cancelled',
                ),
              ),
            ],
            controller: _tabController,
            indicatorColor: Colors.white,
            indicatorSize: TabBarIndicatorSize.tab,
Shreyansh Sharma
  • 1,588
  • 2
  • 17
  • 42
  • possible duplicate of https://stackoverflow.com/questions/51239291/how-to-customize-tabbar-width-in-flutter – Nibha Jain Dec 27 '21 at 11:47

2 Answers2

2

Your first tab text Attempted is longer than the width of Container and won't fit in your container. you can delete all container widget and use FittedBox widget like this.

tabs: const [
            FittedBox(
              child: Tab(
                text: 'Attempted',
              ),
            ),
            FittedBox(
              child: Tab(
                text: 'Booked',
              ),
            ),
            FittedBox(
              child: Tab(
                text: 'Travelled',
              ),
            ),
            FittedBox(
              child: Tab(
                text: 'Cancelled',
              ),
            ),
          ],
Hadi
  • 586
  • 3
  • 11
0

Try to add isScrollable property

  TabBar(
            isScrollable: true,
            tabs: []
          )
Masum Billah Sanjid
  • 1,029
  • 1
  • 7
  • 19