如何在App中实现点击按钮先显示Lottie加载动画再跳转页面？

你给出的代码目前存在问题：Lottie设置了repeat: true会无限循环，对话框无法自动关闭，也就触发不了后续的页面跳转。下面是修正后的可行方案：

步骤1：配置依赖 #

先在pubspec.yaml中添加lottie依赖：

dependencies:
  flutter:
    sdk: flutter
  lottie: ^2.7.0 # 建议使用最新版本

执行flutter pub get完成依赖安装。

步骤2：修改点击事件逻辑 #

通过监听Lottie动画的加载与播放状态，让动画完整播放后自动关闭对话框，再执行页面跳转：

InkWell(
  onTap: () async {
    // 弹出加载对话框
    await showDialog(
      context: context,
      barrierDismissible: false, // 禁止点击空白关闭对话框
      builder: (context) => Center(
        child: Lottie.asset(
          'assets/lotties/rocket.json',
          repeat: false, // 仅播放一次动画
          animate: true,
          onLoaded: (composition) {
            // 动画加载完成后，延迟到播放结束再关闭对话框
            Future.delayed(composition.duration, () {
              Navigator.of(context).pop();
            });
          },
        ),
      ),
    );
    // 对话框关闭后执行页面跳转
    Navigator.of(context).push(MaterialPageRoute(
      builder: (context) => SecondScreen(),
    ));
  },
  child: // 这里放你的按钮UI组件
)

关键逻辑说明 #

• barrierDismissible: false：避免用户在加载过程中误触关闭对话框，保证流程完整。
• repeat: false：让动画只播放一次，防止无限循环无法触发后续操作。
• onLoaded回调：获取动画总时长，延迟对应时间后关闭对话框，确保动画完整展示。
• await关键字：等待对话框完全关闭后，再执行页面跳转逻辑。

内容的提问来源于stack exchange，提问作者Buğra Aykan