Flutter：解决滑动切换TabBar时SVG图标颜色延迟问题

在Flutter项目中使用TabBar时，Tab内的SVG图标在点击切换时颜色正常变化，但滑动切换时颜色变更存在明显延迟。即使通过TabController.index判断设置图标颜色，也无法解决该问题。

问题代码 #

TabBar实现代码

TabBar(
  controller: tabController,
  indicatorSize: TabBarIndicatorSize.label,
  indicatorWeight: 0.2,
  labelStyle: TextStyle(
    fontSize: 12,
    backgroundColor: Colors.transparent,
    fontWeight: FontWeight.w500,
  ),
  indicator: BoxDecoration(
    boxShadow: [BoxShadow(color: Colors.white, blurRadius: 1)],
    color: Colors.green[300],
    borderRadius: BorderRadius.circular(15.0),
  ),
  labelColor: Colors.white,
  labelPadding: EdgeInsets.only(left: 8, right: 8),
  unselectedLabelColor: Colors.black,
  tabs: [
    TabBarBlock(
        tabName: "Tractors",
        tabIcon: "assets/images/othericons/tractor.svg",
        iconColor: tabController.index == 0
            ? Colors.white
            : Colors.black),
    TabBarBlock(
        tabName: "Implements",
        tabIcon: "assets/images/othericons/implement.svg",
        iconColor: tabController.index == 1
            ? Colors.white
            : Colors.black),
    TabBarBlock(
        tabName: "Harvesters",
        tabIcon: "assets/images/othericons/harvester.svg",
        iconColor: tabController.index == 2
            ? Colors.white
            : Colors.black),
  ],
)

TabBarBlock组件代码

class TabBarBlock extends StatelessWidget {
  late String tabIcon;
  late String tabName;
  late Color iconColor;
  TabBarBlock(
      {required this.tabName, required this.tabIcon, required this.iconColor});
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 70,
      width: 150,
      decoration: BoxDecoration(
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.2),
            spreadRadius: 1,
            blurRadius: 1,
          ),
        ],
        borderRadius: BorderRadius.circular(15),
      ),
      child: Tab(
          text: tabName,
          icon: SvgPicture.asset(
            tabIcon,
            width: 25,
            color: iconColor,
          )),
    );
  }
}

核心原因 #

滑动切换Tab时，tabController.index仅在滑动完全结束后才会更新，滑动过程中不会实时变化，导致SVG图标颜色无法同步更新，产生视觉延迟。必须利用tabController.animation获取实时滑动进度，动态调整图标颜色。

解决方案 #

修改TabBar中TabBarBlock的iconColor赋值逻辑，通过tabController.animation.value实时计算颜色：

平滑过渡版本（推荐）

该版本会在滑动过程中让图标颜色逐渐渐变，视觉效果更自然：

TabBar(
  controller: tabController,
  // 其他属性保持不变
  tabs: [
    TabBarBlock(
      tabName: "Tractors",
      tabIcon: "assets/images/othericons/tractor.svg",
      // 滑动范围0~1，从白色渐变到黑色
      iconColor: Color.lerp(Colors.white, Colors.black, tabController.animation.value.clamp(0.0, 1.0)),
    ),
    TabBarBlock(
      tabName: "Implements",
      tabIcon: "assets/images/othericons/implement.svg",
      // 滑动范围1~2，从黑色渐变到白色再回到黑色
      iconColor: Color.lerp(Colors.black, Colors.white, (tabController.animation.value - 1).clamp(0.0, 1.0)),
    ),
    TabBarBlock(
      tabName: "Harvesters",
      tabIcon: "assets/images/othericons/harvester.svg",
      // 滑动范围2~3，从黑色渐变到白色
      iconColor: Color.lerp(Colors.black, Colors.white, (tabController.animation.value - 2).clamp(0.0, 1.0)),
    ),
  ],
)

即时切换版本

如果不需要渐变效果，希望在滑动到一半时立即切换颜色：

TabBar(
  controller: tabController,
  // 其他属性保持不变
  tabs: [
    TabBarBlock(
      tabName: "Tractors",
      tabIcon: "assets/images/othericons/tractor.svg",
      iconColor: tabController.animation.value <= 0.5 ? Colors.white : Colors.black,
    ),
    TabBarBlock(
      tabName: "Implements",
      tabIcon: "assets/images/othericons/implement.svg",
      iconColor: (tabController.animation.value >= 0.5 && tabController.animation.value <= 1.5) ? Colors.white : Colors.black,
    ),
    TabBarBlock(
      tabName: "Harvesters",
      tabIcon: "assets/images/othericons/harvester.svg",
      iconColor: tabController.animation.value >= 1.5 ? Colors.white : Colors.black,
    ),
  ],
)

注意事项 #

确保父组件是StatefulWidget，并正确初始化和销毁TabController：

class _ParentPageState extends State<ParentPage> with SingleTickerProviderStateMixin {
  late TabController tabController;

  @override
  void initState() {
    super.initState();
    tabController = TabController(length: 3, vsync: this);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(/* 修改后的TabBar代码 */),
      ),
      body: TabBarView(
        controller: tabController,
        children: [/* 对应Tab页面 */],
      ),
    );
  }
}

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