使用flutter_animate实现按钮点击触发文本动画的问题排查

核心问题分析 #

1. AnimationController初始化位置错误：在build方法中初始化控制器，每次组件重建（包括首次构建）都会创建新的控制器，导致动画被意外触发。
2. Animate组件默认自动播放：flutter_animate的Animate组件默认autoPlay: true，即使绑定了自定义控制器，也会在组件构建完成后自动启动动画。
3. 多余的setState调用：按钮点击时调用setState()会触发组件重建，不仅无意义还会加重问题。

修复后完整代码 #

class MainApp extends StatefulWidget {
  MainApp({super.key});

  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> with TickerProviderStateMixin {
  late AnimationController _animationCtrl;

  @override
  void initState() {
    super.initState();
    // 初始化控制器，确保仅创建一次
    _animationCtrl = AnimationController(vsync: this, duration: 700.ms);
  }

  @override
  void dispose() {
    // 销毁控制器，避免内存泄漏
    _animationCtrl.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
              child: animateText(_animationCtrl),
            ),
            FloatingActionButton(onPressed: () {
              // 重置后启动动画，支持重复点击触发
              _animationCtrl.reset();
              _animationCtrl.forward();
            })
          ],
        ),
      ),
    );
  }

  Animate animateText(AnimationController animationCtrl) {
    return Animate(
      // 禁用自动播放
      autoPlay: false,
      child: Text("text")
          .animate(controller: animationCtrl)
          .moveX(end: 300, duration: 700.ms),
    );
  }
}

关键修改说明 #

• 将_animationCtrl的初始化移至initState，确保控制器仅创建一次，并在dispose中销毁以避免内存泄漏。
• 给Animate组件添加autoPlay: false，彻底禁用自动播放行为。
• 按钮点击时先调用_animationCtrl.reset()再执行forward()，支持重复点击触发动画。
• 移除了无意义的setState()调用。

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