Flutter如何使用Lottie动画

在Flutter项目中想要使用Lottie动画，但不太清楚具体步骤。我已经通过LottieFiles下载了JSON格式的动画文件，但不知道如何集成到Flutter应用中。请问：

  1. 需要添加哪些依赖包？
  2. JSON文件应该放在哪个目录？
  3. 有没有控制动画播放/暂停的代码示例？
  4. 如何调整动画的大小和位置？ 遇到加载动画时黑屏的情况该如何排查？希望能得到详细的实现步骤说明。
2 回复

在Flutter中使用Lottie动画，需先添加依赖：lottie: ^2.0.0。然后在代码中导入包，使用Lottie.asset或Lottie.network加载动画文件。支持控制播放、循环等属性。

更多关于Flutter如何使用Lottie动画的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中使用Lottie动画非常简单，主要通过lottie包实现。以下是详细步骤：

1. 添加依赖

在 pubspec.yaml 文件中添加依赖：

dependencies:
  lottie: ^2.7.0

运行 flutter pub get 安装包。

2. 引入Lottie文件

将Lottie JSON文件（例如 animation.json）放在项目目录中，如 assets/lottie/ 文件夹。

在 pubspec.yaml 中声明资源：

flutter:
  assets:
    - assets/lottie/

3. 基本用法

在代码中导入包并使用 Lottie.asset 加载动画：

import 'package:lottie/lottie.dart';

Lottie.asset(
  'assets/lottie/animation.json',
  width: 200,
  height: 200,
);

4. 常用属性

  • repeat：控制重复播放（true 循环，false 播放一次）。
  • controller：通过 AnimationController 控制动画进度。
  • animate：设置是否自动播放（默认为 true）。

5. 进阶控制示例

结合 AnimationController 实现暂停、播放等交互：

AnimationController controller;

@override
void initState() {
  super.initState();
  controller = AnimationController(vsync: this);
}

Lottie.asset(
  'assets/lottie/animation.json',
  controller: controller,
  onLoaded: (composition) {
    controller.duration = composition.duration;
    controller.forward(); // 开始播放
  },
);

// 暂停：controller.stop();
// 重置：controller.reset();

注意事项

  • 确保JSON文件路径正确。
  • 可在线生成或从LottieFiles下载免费动画。
  • 测试动画在不同设备上的性能。

通过以上步骤，即可快速在Flutter应用中集成流畅的Lottie动画效果。

回到顶部