Flutter TabBar选中指示器显示异常：无法填充父容器求助

问题现象 #

此前代码运行正常，现在TabBar无法填满父容器宽度，选中状态的指示器仅显示一个小圆圈，无法覆盖整个Tab区域，效果如下：

问题代码 #

DefaultTabController(
   length: 2,
   child: Column(
       children: <Widget>[
           Container(
              padding: const EdgeInsets.all(5),
              margin: EdgeInsets.symmetric(horizontal: 16.w),
              width: SizeConfig.screenWidth,
              decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(40),
              color: AppColor.grey3,
            ),
              child: TabBar(
                splashBorderRadius: BorderRadius.circular(50),
                physics: const NeverScrollableScrollPhysics(),
                indicator: BoxDecoration(
                borderRadius: BorderRadius.circular(50),
                color: AppColor.white2,
              ),
                unselectedLabelStyle: AppStyle.body1,
                labelColor: AppColor.primaryDark,
                labelStyle: AppStyle.body1,
                tabs: const [
                    Tab(text: 'Active'),
                    Tab(text: 'Past'),
               ],
             ),
         )

修复方案 #

修改TabBar的3个关键属性即可解决问题：

• 添加isScrollable: false：强制两个Tab平分父容器宽度，填满整个可用空间
• 添加indicatorPadding: EdgeInsets.zero：移除指示器的默认内边距，让它完全覆盖Tab区域
• 添加indicatorSize: TabBarIndicatorSize.tab：设置指示器大小与Tab一致，替代默认仅围绕文字的小范围指示器

修复后代码 #

DefaultTabController(
   length: 2,
   child: Column(
       children: <Widget>[
           Container(
              padding: const EdgeInsets.all(5),
              margin: EdgeInsets.symmetric(horizontal: 16.w),
              width: SizeConfig.screenWidth,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(40),
                color: AppColor.grey3,
              ),
              child: TabBar(
                isScrollable: false,
                splashBorderRadius: BorderRadius.circular(50),
                physics: const NeverScrollableScrollPhysics(),
                indicatorPadding: EdgeInsets.zero,
                indicatorSize: TabBarIndicatorSize.tab,
                indicator: BoxDecoration(
                  borderRadius: BorderRadius.circular(50),
                  color: AppColor.white2,
                ),
                unselectedLabelStyle: AppStyle.body1,
                labelColor: AppColor.primaryDark,
                labelStyle: AppStyle.body1,
                tabs: const [
                  Tab(text: 'Active'),
                  Tab(text: 'Past'),
                ],
              ),
         )

内容的提问来源于stack exchange，提问作者Noah