Flutter中Lottie动画显示异常，出现画面错乱问题求助

问题场景 #

近期在Flutter应用中遇到Lottie动画完全无法渲染的问题，iOS和Android实体设备测试结果一致，显示效果如下：

使用的是一款明暗模式切换的免费Lottie动画，当前实现代码：

Lottie.asset(
  'assets/lottie/anim_test.json',
  frameRate: FrameRate.max,
),

排查与解决步骤 #

• 校验资源配置
  确认pubspec.yaml中已正确注册该Lottie资源，路径需与代码中完全匹配（iOS系统对路径大小写敏感）：

  assets:
    - assets/lottie/anim_test.json
  

  修改配置后执行flutter pub get刷新资源。

• 检查动画文件完整性
  重新下载原始动画JSON文件替换本地文件，避免因下载过程中文件损坏、格式不兼容导致渲染失败。

• 更新依赖版本
  确保pubspec.yaml中使用最新版的lottie依赖，旧版本可能存在Flutter版本兼容问题：

  dependencies:
    lottie: ^2.7.0 # 替换为最新版本号
  

  执行flutter pub upgrade lottie更新依赖。

• 添加布局尺寸约束
  尝试给Lottie组件指定明确的宽高，避免因父布局无尺寸限制导致动画无法渲染：

  Lottie.asset(
    'assets/lottie/anim_test.json',
    frameRate: FrameRate.max,
    width: 180,
    height: 180,
    fit: BoxFit.contain,
  ),
  

• 排除路径/文件问题
  使用网络资源测试基础渲染能力，替换代码为官方示例动画：

  Lottie.network('https://assets9.lottiefiles.com/packages/lf20_9j0c8w.json'),
  

  如果该动画能正常显示，说明问题出在本地资源文件或路径配置上。

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