Flutter中Widget加载后如何按顺序播放多控制器动画？

问题根源 #

你之前的方案失败核心原因是使用了sleep()——这是同步阻塞主线程的方法，会导致：

• 主线程被占用时，UI无法完成渲染（空白屏幕）、动画帧无法更新
• 所有动画启动的调用在阻塞期间被积压，等sleep()结束后一次性执行，造成"同时播放"的效果

正确实现方案 #

利用Dart的async/await结合Future.delayed()（非阻塞式延迟），确保主线程能正常处理UI渲染和动画，同时按顺序执行动画流程。

步骤1：确保按钮Widget的playAnimation()可等待动画完成

如果你的按钮Widget的playAnimation()只是启动动画而不等待结束，需要修改它返回Future，直到动画完成：

// 按钮Widget内部代码
class AnimatedButton extends StatefulWidget {
  // ... 其他代码
  late final AnimationController animationController;
  
  // 暴露给父Widget的方法，返回Future直到动画完成
  Future<void> playAnimation() async {
    await animationController.forward();
    // 若需要动画循环或反向，可在此添加逻辑，否则直接返回
  }
}

步骤2：在父Widget中按顺序执行动画

在initState中使用addPostFrameCallback确保Widget渲染完成后启动流程，结合async/await实现顺序执行：

@override
void initState() {
  super.initState();
  // 等待第一帧渲染完成后执行
  WidgetsBinding.instance.addPostFrameCallback((_) async {
    // 播放按钮1动画，等待完成
    await button1.playAnimation();
    // 暂停1秒
    await Future.delayed(const Duration(milliseconds: 1000));
    
    // 播放按钮2动画，等待完成
    await button2.playAnimation();
    await Future.delayed(const Duration(milliseconds: 1000));
    
    // 播放按钮3动画
    await button3.playAnimation();
  });
}

备选方案：不修改按钮Widget的情况

如果无法修改按钮Widget的playAnimation()，可以直接监听其AnimationController的状态，等待动画完成：

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) async {
    // 启动按钮1动画
    button1.playAnimation();
    // 等待动画完成
    await button1.animationController.forward().asStream().firstWhere(
      (status) => status == AnimationStatus.completed
    );
    await Future.delayed(const Duration(milliseconds: 1000));
    
    button2.playAnimation();
    await button2.animationController.forward().asStream().firstWhere(
      (status) => status == AnimationStatus.completed
    );
    await Future.delayed(const Duration(milliseconds: 1000));
    
    button3.playAnimation();
  });
}

关键原理 #

• addPostFrameCallback：确保代码在Widget完成第一帧渲染后执行，避免UI未加载就启动动画
• async/await + Future.delayed：非阻塞式延迟，主线程可以继续处理UI和动画帧，不会出现空白屏幕或动画同步执行的问题

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