Flutter TabBar样式问题：选中项背景未填充整个Tab

问题原因 #

选中项的白色背景仅包裹文字，核心原因有两点：

• Tab内容未填充整个Tab区域：默认Tab组件自带内边距，且直接用Text作为子组件时，Text只会占据自身文本的空间，没有扩展填充Tab分配的全部区域。
• TabBar指示器尺寸未匹配Tab区域：默认的TabBar指示器会根据Tab内容的尺寸绘制，而非Tab的实际可用空间。

修复步骤 #

1. 让Tab内容填充整个Tab区域 #

将每个Tab的Text包裹在Container中，设置width: double.infinity和height: double.infinity，通过alignment让文本居中，确保Container占满整个Tab的空间。

2. 调整TabBar的内边距与指示器匹配 #

设置TabBar的labelPadding: EdgeInsets.zero，移除Tab内部的默认内边距，让内容完全填充Tab区域，保证指示器能覆盖整个Tab的可用空间。

修改后的完整代码 #

return Container(
  padding: const EdgeInsets.symmetric(horizontal: 5),
  decoration: customDecorationsObject.getCustomContainer(
      containerColor: AppColors.mediumBlackColor, borderRadius: 12),
  child: TabBar(
    enableFeedback: true,
    dividerColor: Colors.transparent,
    onTap: homePageController.changeFeedTab,
    // 移除Tab内部默认内边距
    labelPadding: EdgeInsets.zero,
    indicator: BoxDecoration(
      color: AppColors.whiteColor,
      borderRadius: BorderRadius.circular(12),
    ),
    tabs: [
      Tab(
        child: Container(
          width: double.infinity,
          height: double.infinity,
          alignment: Alignment.center,
          child: Text(
            "All",
            style: AppTextStyle.regular.copyWith(
                color: homePageController.feedTabIndex.value == 0
                    ? AppColors.blackColor
                    : AppColors.whiteColor),
          ),
        ),
      ),
      Tab(
        child: Container(
          width: double.infinity,
          height: double.infinity,
          alignment: Alignment.center,
          child: Text(
            "Business",
            style: AppTextStyle.regular.copyWith(
                color: homePageController.feedTabIndex.value == 1
                    ? AppColors.blackColor
                    : AppColors.whiteColor),
          ),
        ),
      ),
      Tab(
        child: Container(
          width: double.infinity,
          height: double.infinity,
          alignment: Alignment.center,
          child: Text(
            "My Posts",
            style: AppTextStyle.regular.copyWith(
                color: homePageController.feedTabIndex.value == 2
                    ? AppColors.blackColor
                    : AppColors.whiteColor),
          ),
        ),
      ),
    ],
  ),
);

额外优化提示 #

如果希望指示器圆角和外层Container圆角完全贴合，可给TabBar的indicator添加margin: EdgeInsets.symmetric(vertical: 2)，让指示器和外层容器之间保留少量空隙，视觉效果更协调。

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