如何在Flutter应用注册完成后添加JSON动画

1. 引入Lottie依赖 #

Flutter中加载JSON格式动画最常用的是lottie包，先在项目的pubspec.yaml里添加依赖：

dependencies:
  flutter:
    sdk: flutter
  lottie: ^2.7.0 # 可替换为最新版本

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

2. 准备JSON动画资源 #

找一个“感谢注册”主题的Lottie JSON动画（可通过After Effects制作导出，或使用免费的Lottie资源），将JSON文件放到项目的assets/lottie/目录下，然后在pubspec.yaml中声明资源路径：

flutter:
  assets:
    - assets/lottie/thank_you.json

3. 修改页面代码实现状态切换 #

把注册页面改为StatefulWidget，通过状态变量控制注册按钮和动画的显示切换，完整代码示例：

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

class SignUpPage extends StatefulWidget {
  const SignUpPage({super.key});

  @override
  State<SignUpPage> createState() => _SignUpPageState();
}

class _SignUpPageState extends State<SignUpPage> {
  bool _showSuccessAnim = false;

  // 模拟注册接口请求
  Future<void> signUp() async {
    // 替换为你的真实注册逻辑
    await Future.delayed(const Duration(seconds: 2));

    // 注册成功后切换状态，显示动画
    setState(() {
      _showSuccessAnim = true;
    });

    // 可选：动画播放完成后跳转页面
    await Future.delayed(const Duration(seconds: 3));
    // Navigator.pushReplacement(context, MaterialPageRoute(builder: (ctx) => const HomePage()));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('注册')),
      body: Center(
        child: _showSuccessAnim
            ? // 显示感谢注册的JSON动画
            Lottie.asset(
                'assets/lottie/thank_you.json',
                width: 200,
                height: 200,
                fit: BoxFit.contain,
                repeat: false, // 仅播放一次
              )
            : // 原注册按钮
            Padding(
                padding: const EdgeInsets.symmetric(horizontal: 25.0),
                child: GestureDetector(
                  onTap: signUp,
                  child: Container(
                    padding: const EdgeInsets.all(20),
                    decoration: BoxDecoration(
                      color: Colors.lightBlueAccent,
                      borderRadius: BorderRadius.circular(12),
                    ),
                    child: const Center(
                      child: Text(
                        'Sign Up',
                        style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 18,
                        ),
                      ),
                    ),
                  ),
                ),
              ),
      ),
    );
  }
}

关键细节说明 #

• _showSuccessAnim状态变量负责切换按钮与动画的显示，注册成功后更新状态即可触发界面切换。
• 设置repeat: false让动画仅播放一次，符合注册成功提示的场景需求。
• 若需要在动画播放完成后执行特定操作（如页面跳转），除了示例中的延时等待，也可以使用Lottie.asset的onLoaded回调监听动画加载完成事件。

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