Flutter TabBar点击仅文字变色，图标及背景未生效问题排查

需求与问题 #

需求：点击TabBar选项卡时，需实现以下三个效果：

• 选项卡背景变为橙色
• 图标变为白色
• 图标下方文字变为橙色

当前问题：仅文字颜色随选中状态变化，背景色切换、图标变白的效果完全没生效。

相关代码 #

Tabs组件代码 #

return Tab(
      height: 90,
      child: Column(
        children: [
          Container(
            width: 71,
            height: 71,
            decoration: BoxDecoration(
                color: Colors.white,
                shape: BoxShape.circle
            ),
            child: IconButton(onPressed: () {}, icon: Icon(iconName, size: 26, color: configColors.homeIcon,)),
          ),
          FittedBox(
            child: Text(header, style: TextStyle(fontFamily: "Mark-Pro", fontWeight: FontWeight.w500, fontSize: 15),),
          )
        ],
      ),);

TabBar代码 #

TabBar(
                       isScrollable: true,
                       labelColor: configColors.orange,
                       unselectedLabelColor: configColors.darkBlue,
                       indicatorColor: Colors.transparent,
                       tabs:  const [
                         Tabs('Phones', Icons.phone_iphone),
                         Tabs('Computer', Icons.computer),
                         Tabs('Health', Icons.monitor_heart_outlined),
                         Tabs('Books', Icons.menu_book),
                         Tabs('Watch', Icons.watch_later_outlined),
                       ],
                     ),

完整代码 #

return Scaffold(
      backgroundColor: configColors.bgHome,
      body: Container(
        margin: EdgeInsets.fromLTRB(17, 50, 33, 0),
        child: SingleChildScrollView(
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  SizedBox(
                    width: 50,
                  ),
                  Row(
                    children: [
                      IconButton(onPressed: () {}, icon: Icon(Icons.place_outlined, color: configColors.orange, size: 17,)),
                      Text('Zihuatanejo, Gro', style: TextStyle(
                          color: configColors.darkBlue,
                          fontFamily: "Mark-Pro",
                          fontSize: 15,
                          fontWeight: FontWeight.w500
                      ),),
                      IconButton(onPressed: () {}, icon: Icon(Icons.expand_more, color: configColors.grey, size: 20,))
                    ],
                  ),
                  IconButton(onPressed: () {}, icon: Image.asset('assets/image/vector.png'))
                ],
              ),
              Container(
                margin: EdgeInsets.only(top: 18),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('Select Category', style: TextStyle(
                        color: configColors.darkBlue,
                        fontFamily: "Mark-Pro",
                        fontSize: 25,
                        fontWeight: FontWeight.w700
                    ),),
                    TextButton(onPressed: () {}, child: Text('view all', style: TextStyle(
                        color: configColors.orange,
                        fontFamily: "Mark-Pro",
                        fontSize: 15,
                        fontWeight: FontWeight.w400
                    ),))
                  ],
                ),
              ),
              Container(
                child:           DefaultTabController(
                    length: 5, // length of tabs
                    initialIndex: 0,

                    child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[
                      Container(
                        child: TabBar(
                          isScrollable: true,
                          labelColor: configColors.orange,
                          unselectedLabelColor: configColors.darkBlue,
                          indicatorColor: Colors.transparent,
                          tabs:  const [
                            Tabs('Phones', Icons.phone_iphone),
                            Tabs('Computer', Icons.computer),
                            Tabs('Health', Icons.monitor_heart_outlined),
                            Tabs('Books', Icons.menu_book),
                            Tabs('Watch', Icons.watch_later_outlined),
                          ],
                        ),
                      ),

                      Container(
                          height: 400, //height of TabBarView
                          decoration: BoxDecoration(
                              border: Border(top: BorderSide(color: Colors.grey, width: 0.5))
                          ),
                          child: TabBarView(children: <Widget>[
                            Container(
                              child: Center(
                                child: Text('Display Tab 1', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
                              ),
                            ),
                            Container(
                              child: Center(
                                child: Text('Display Tab 2', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
                              ),
                            ),
                            Container(
                              child: Center(
                                child: Text('Display Tab 3', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
                              ),
                            ),
                            Container(
                              child: Center(
                                child: Text('Display Tab 4', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
                              ),
                            ),
                            Container(
                              child: Center(
                                child: Text('Display Tab 5', style: TextStyle(
                                    fontSize: 22, fontWeight: FontWeight.bold)),
                              ),
                            )])
                      )
                    ])
                ),
              ),
            ],
          ),
        )

      ),
    );
  }
}

class Tabs extends StatelessWidget {
  final String header;
  final IconData iconName;
  const Tabs(this.header, this.iconName);
  @override
  Widget build(BuildContext context) {
    return Tab(
      height: 90,
      child: Column(
        children: [
          Container(
            width: 71,
            height: 71,
            decoration: BoxDecoration(
                color: Colors.white,
                shape: BoxShape.circle
            ),
            child: IconButton(onPressed: () {}, icon: Icon(iconName, size: 26, color: configColors.homeIcon,)),
          ),
          FittedBox(
            child: Text(header, style: TextStyle(fontFamily: "Mark-Pro", fontWeight: FontWeight.w500, fontSize: 15),),
          )
        ],
      ),);
  }
}

问题原因 #

1. 自定义组件未监听选中状态：你的Tabs是无状态组件，背景色、图标颜色都是写死的固定值（背景白色、图标用configColors.homeIcon），完全没和Tab的选中状态绑定，自然不会变化。
2. TabBar的样式属性范围有限：TabBar的labelColor只会自动作用于Tab内部默认的Text组件，你自定义的Container背景、Icon颜色不受这个属性控制，必须手动处理。

解决方案 #

1. 修改Tabs组件，支持判断选中状态 #

让组件能通过DefaultTabController获取当前选中的索引，对比自身索引判断是否选中，进而切换样式：

class Tabs extends StatelessWidget {
  final String header;
  final IconData iconName;
  final int index; // 新增索引参数，标记当前Tab的位置

  const Tabs(this.header, this.iconName, {required this.index, Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final tabController = DefaultTabController.of(context);
    bool isSelected = tabController?.index == index; // 判断当前Tab是否被选中

    return Tab(
      height: 90,
      child: Column(
        children: [
          Container(
            width: 71,
            height: 71,
            decoration: BoxDecoration(
              color: isSelected ? configColors.orange : Colors.white, // 选中时背景变橙色
              shape: BoxShape.circle,
            ),
            child: IconButton(
              onPressed: () {},
              icon: Icon(
                iconName,
                size: 26,
                color: isSelected ? Colors.white : configColors.homeIcon, // 选中时图标变白
              ),
            ),
          ),
          FittedBox(
            child: Text(
              header,
              style: TextStyle(
                fontFamily: "Mark-Pro",
                fontWeight: FontWeight.w500,
                fontSize: 15,
                color: isSelected ? configColors.orange : configColors.darkBlue, // 手动控制文字颜色，也可以保留TabBar的labelColor
              ),
            ),
          ),
        ],
      ),
    );
  }
}

2. 更新TabBar中Tabs的调用，传入索引 #

TabBar(
  isScrollable: true,
  labelColor: configColors.orange,
  unselectedLabelColor: configColors.darkBlue,
  indicatorColor: Colors.transparent,
  tabs: const [
    Tabs('Phones', Icons.phone_iphone, index: 0),
    Tabs('Computer', Icons.computer, index: 1),
    Tabs('Health', Icons.monitor_heart_outlined, index: 2),
    Tabs('Books', Icons.menu_book, index: 3),
    Tabs('Watch', Icons.watch_later_outlined, index: 4),
  ],
),

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