颤动标签栏标签之间的边距/填充

Question

我厌倦了标签栏，没有找到答案。我有 3 个标签栏，我想像类别一样将标签放在左侧？

我想要的标签栏 enter image description here

我的标签栏 enter image description here

我的代码

       // BOTTOM
      bottom: PreferredSize(
        preferredSize: const Size.fromHeight(kToolbarHeight),
        child: Align(
          alignment: Alignment.centerLeft,
          child: Container(
            width: MediaQuery.of(context).size.width / 1.1,
            child: TabBar(
              labelPadding: EdgeInsets.all(0),
              labelColor: Colors.white,
              labelStyle: poppins.copyWith(
                fontSize: 15,
                fontWeight: bold,
              ),
              unselectedLabelColor: Color(0xff585861),
              indicatorColor: Colors.white,
              indicatorSize: TabBarIndicatorSize.label,

              // TABS
              tabs: [
                Tab(
                  text: 'Following',
                ),
                Tab(
                  text: 'Trending',
                ),
                Tab(
                  text: 'Search',
                ),
              ],
            ),
          ),
        ),
      ),

Answer 1

bottom:  PreferredSize(
        preferredSize: const Size.fromHeight(kToolbarHeight),
        child: Align(
          alignment: Alignment.centerLeft,
          child: Container(
            width: MediaQuery.of(context).size.width / 1.1,
            child: TabBar(
              isScrollable: true,
              labelPadding: EdgeInsets.all(0),
              labelColor: Colors.white,
              labelStyle: poppins.copyWith(
                fontSize: 15,
                fontWeight: bold,
              ),
              unselectedLabelColor: Color(0xff585861),
              indicatorColor: Colors.white,
              indicatorSize: TabBarIndicatorSize.label,

              // TABS
              tabs: [
                Tab(
                  text: 'Following',
                ),
                Tab(
                  text: 'Trending',
                ),
                Tab(
                  text: 'Search',
                ),
              ],
            ),
          ),
        ),
      )

Answer 2

我能找到解决办法。

只需将 isScrollable: true 参数添加到 TabBar()，所有选项卡都会缩小到一侧。

如果没有设置 isScrollable: true，所有选项卡项都会占用它们在给定小部件中的所有空间。

Answer 3

尝试在TabBar() 小部件中添加isScrollable: true,

参考标签栏here

参考 isScrollable here

   bottom: PreferredSize(
        preferredSize: const Size.fromHeight(kToolbarHeight),
        child: Align(
          alignment: Alignment.centerLeft,
          child: Container(
            width: MediaQuery.of(context).size.width / 1.1,
            child: TabBar(
              labelPadding: EdgeInsets.all(5),
              labelColor: Colors.white,
              isScrollable: true,// add this property
              unselectedLabelColor: Color(0xff585861),
              indicatorColor: Colors.white,
              indicatorSize: TabBarIndicatorSize.label,

              // TABS
              tabs: [
                Tab(
                  text: 'Following',
                ),
                Tab(
                  text: 'Trending',
                ),
                Tab(
                  text: 'Search',
                ),
              ],
            ),
          ),
        ),
      ),

您的结果屏幕->