Flutter中Lottie动画异常：Lottie播放器正常但Flutter端无法显示

问题背景 #

某Lottie动画在官方播放器中显示正常，但通过LottieBuilder.network加载到Flutter Web和Android端时显示异常，效果如下：

排查与解决步骤 #

• 升级lottie依赖版本
  部分高版本Lottie动画的特性需要最新版Flutter lottie插件支持。打开pubspec.yaml，将lottie依赖更新至最新稳定版，执行flutter pub get后重新运行项目。

• 开启Android硬件加速
  进入项目的android/app/src/main/AndroidManifest.xml，在<application>标签中添加android:hardwareAccelerated="true"，部分复杂动画依赖硬件加速才能正确渲染。

• 改用本地资源加载
  将Lottie JSON文件下载到项目本地（比如放置在assets/lottie/目录下），修改代码使用LottieBuilder.asset加载，排除网络加载时的编码或解析问题：

  LottieBuilder.asset(
    "assets/lottie/sad_character.json",
    controller: lottieController,
    fit: BoxFit.contain,
  )
  

  同时要在pubspec.yaml中声明assets路径：

  assets:
    - assets/lottie/
  

• 检查控制器初始化
  确保AnimationController正确初始化并绑定播放逻辑，示例代码如下：

  late final AnimationController lottieController;
  
  @override
  void initState() {
    super.initState();
    lottieController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 2), // 匹配动画时长
    )..repeat(); // 循环播放
  }
  
  @override
  void dispose() {
    lottieController.dispose(); // 释放资源
    super.dispose();
  }
  

• 显式设置尺寸与适配
  给LottieBuilder添加width、height属性或指定fit参数，避免因尺寸适配问题导致显示异常：

  LottieBuilder.network(
    "https://assets4.lottiefiles.com/packages/lf20_7gs6bvae.json",
    controller: lottieController,
    width: 200,
    height: 200,
    fit: BoxFit.contain,
  )
  

内容的提问来源于stack exchange，提问作者Raj Dhakad