在 Flutter Tab bar 中，选择的 tab bar 尺寸和 tab bar 尺寸不能对齐。如何对齐？

Question

Flutter tab bar，选中的tab bar indicator 和每个tab size 不相等。我使用带有指示器装饰的选定指示器，并使用 PreferredSized 将每个选项卡包装在容器内。但是不能对齐。如何与所选指标和每个容器对齐？

This is my screen shot of the tab bar problem.

bottom: PreferredSize(
      preferredSize: Size(40, 40),
      child: Container(
        height: getScreenHeightRation(40.0),
        decoration: BoxDecoration(
          color: Color(0xFFF0C185),
          border: Border.all(color: Colors.grey[600]),
        ),
        child: TabBar(
          indicatorPadding: EdgeInsets.symmetric(horizontal: 40),
          indicatorSize: TabBarIndicatorSize.tab,
          indicatorColor: Colors.transparent,
          indicator: BoxDecoration(
            color: Color(0xFFD2A368),
          ),
          tabs: [
            Container(
              decoration: BoxDecoration(
                  border: Border(right: BorderSide(color: Colors.grey))
              ),
              child: Tab(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ImageIcon(AssetImage('assets/images/icon_ext/menu.png')),
                    SizedBox(
                      width: 5.0,
                    ),
                  ],
                ),
              ),
            ),
            Container(
              width: 150,
              decoration: BoxDecoration(
                  border: Border(right: BorderSide(color: Colors.grey))
              ),
              child: Tab(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ImageIcon(AssetImage('assets/images/icon_ext/image.png')),
                    SizedBox(
                      width: 5.0,
                    ),
                  ],
                ),
              ),
            ),
            Container(
              width: 150,
              child: Tab(
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ImageIcon(
                        AssetImage('assets/images/icon_ext/placeholder.png')),
                    SizedBox(
                      width: 5.0,
                    ),
             
                  ],
                ),
              ),
            )
          ],
          controller: tabController,
        ),
      ),
    ),

Answer 1

这是 flutter 的一个已知问题，尚未修复。 https://github.com/flutter/flutter/issues/63700

暂时可以通过添加

修复

labelPadding: EdgeInsets.only(left: 10),

我还建议让容器的宽度与屏幕大小除以选项卡数量相匹配，而不是硬编码。不定义宽度也可以

width: MediaQuery.of(context).size.width / 3,

在 Flutter Tab bar 中，选择的 tab bar 尺寸和 tab bar 尺寸不能对齐。如何对齐？

In Flutter Tab bar, selected tab bar size and tab bar size can't align. How to align?

flutter

tabbar