简体   繁体   中英

Text of tab is partially hidden when switched to another tab in TabBarView, flutter

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.

在此处输入图像描述

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,

Try to add isScrollable property

  TabBar(
            isScrollable: true,
            tabs: []
          )

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM