Flutter自定义Loader动画触发生命周期异常警告问题咨询

异常原因解析 #

这个异常的核心是：Widget已从组件树中移除（进入defunct失效状态），但关联的AnimationController仍在持续触发状态更新回调。你的Loader动画在页面显示时能正常运行，但当组件被销毁（比如跳转页面、弹窗关闭）后，未停止的动画控制器还在尝试调用已失效的State对象的setState，触发了Flutter的生命周期断言检查。

你的代码问题点 #

你在initState中调用controller.repeat()让动画无限循环，但未在组件生命周期结束时清理控制器资源：

• 未重写dispose方法停止并销毁AnimationController，导致组件销毁后控制器仍在后台运行
• 监听器里的if (mounted)判断只能规避部分即时错误，无法彻底解决控制器资源泄漏的问题

解决方案 #

1. 强制清理动画控制器（必做） #

在_LoaderState中重写dispose方法，停止动画并释放控制器资源：

@override
void dispose() {
  controller.stop();
  controller.dispose();
  super.dispose();
}

这是Flutter使用动画控制器的标准流程，确保组件销毁时所有动画资源被正确回收。

2. 优化动画更新逻辑（推荐） #

当前通过setState维护distance变量的方式不够高效，建议用AnimatedBuilder替代，它会自动管理动画监听，避免不必要的整树重建，同时天然适配组件生命周期：

@override
Widget build(BuildContext context) {
  return AnimatedBuilder(
    animation: controller,
    builder: (context, child) {
      double currentDistance = 0;
      if (controller.value >= 0.75 && controller.value <= 1.0) {
        currentDistance = animation_Radius_in.value * idistance;
      } else if (controller.value >= 0.0 && controller.value <= 0.25) {
        currentDistance = animation_Radius_out.value * idistance;
      }

      // 替换为你的Loader具体UI实现
      return Transform.rotate(
        angle: animation_rotation.value * 2 * 3.14159,
        child: Container(
          width: currentDistance,
          height: currentDistance,
          decoration: const BoxDecoration(
            color: Colors.blue,
            shape: BoxShape.circle,
          ),
        ),
      );
    },
  );
}

使用AnimatedBuilder后，你可以移除原来的controller.addListener逻辑，它会在动画值变化时自动重建builder内的子组件，无需手动调用setState。

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