Flutter中如何修改TabBar选中Tab项的背景颜色

方案1：自定义Tab组件（灵活度最高，支持单独设置指定Tab样式） #

直接替换默认的Tab widget，自己构建每个Tab的布局，通过TabController监听选中状态动态切换背景：

• 核心实现逻辑：

// 1. 先创建TabController
late TabController _tabController;

@override
void initState() {
  super.initState();
  _tabController = TabController(length: 3, vsync: this);
  _tabController.addListener(() {
    setState(() {}); // 选中状态变化时刷新UI
  });
}

// 2. 构建TabBar
TabBar(
  controller: _tabController,
  tabs: [
    _buildTabItem(0, "首页"),
    _buildTabItem(1, "分类"),
    _buildTabItem(2, "我的"),
  ],
  // 取消默认指示器，避免和自定义背景冲突
  indicator: const BoxDecoration(),
)

// 3. 自定义Tab项构建方法
Widget _buildTabItem(int index, String text) {
  bool isSelected = _tabController.index == index;
  return Container(
    // 可单独设置选中/未选中背景，也可给指定index设置特殊样式
    decoration: BoxDecoration(
      color: isSelected ? Colors.blue : Colors.white,
      borderRadius: BorderRadius.circular(20),
    ),
    padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
    child: Text(
      text,
      style: TextStyle(
        color: isSelected ? Colors.white : Colors.grey,
      ),
    ),
  );
}

该方案支持任意自定义样式，甚至可以给某个固定index的Tab单独设置专属背景、圆角等效果，完全不受默认Tab属性限制。

方案2：自定义TabBar indicator（无需自定义Tab，改动最小） #

如果不需要单独设置特殊Tab的样式，可以把indicator属性设置为填满Tab的装饰，直接作为选中背景：

TabBar(
  controller: _tabController,
  tabs: const [
    Tab(text: "首页"),
    Tab(text: "分类"),
    Tab(text: "我的"),
  ],
  // 把指示器设置为背景样式
  indicator: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(20),
  ),
  // 调整指示器内边距，让背景和Tab边界匹配
  indicatorPadding: const EdgeInsets.all(4),
  labelColor: Colors.white,
  unselectedLabelColor: Colors.grey,
)

该方案改动量最小，适合所有选中Tab背景样式统一的场景。

注意事项 #

• 使用TabController时记得在dispose方法中释放资源，避免内存泄漏：

@override
void dispose() {
  _tabController.dispose();
  super.dispose();
}

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