Flutter中Lottie动画渲染异常问题求助

问题描述 #

预期渲染效果：

实际渲染效果：

使用的代码：

Center(child: Lottie.asset('assets/lottie/glow.json'))

尝试过多个.json和.lottie格式的本地动画文件，均出现相同异常，未尝试网络加载方式。

排查与解决步骤 #

• 检查pubspec.yaml配置
  确保已在pubspec.yaml中正确声明Lottie依赖及本地资源路径：

  dependencies:
    lottie: ^latest_version # 替换为当前最新版本
  
  assets:
    - assets/lottie/
  

  注意缩进格式，assets路径需覆盖动画文件所在目录，配置完成后执行flutter pub get刷新依赖。

• 显式指定动画尺寸
  部分Lottie动画未定义默认尺寸，需手动设置宽高：

  Center(
    child: Lottie.asset(
      'assets/lottie/glow.json',
      width: 200,
      height: 200,
      fit: BoxFit.contain,
    ),
  )
  

• 清除缓存并重建项目
  依次执行以下命令清理缓存后重新构建：

  flutter clean
  flutter pub get
  flutter run
  

• 验证动画文件完整性
  将本地动画文件上传至Lottie官方预览工具（本地上传）检查是否能正常播放，若工具中也无法播放，说明文件本身损坏，需重新获取完整的动画文件。

• 改用LottieBuilder加载
  尝试使用LottieBuilder.asset替代，部分场景下兼容性更好：

  Center(
    child: LottieBuilder.asset('assets/lottie/glow.json'),
  )
  

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