Flutter Web：Lottie 动画在 Android Chrome 上被裁剪，但 Windows Chrome 没问题

Question

我使用 Lotie 动画，将 Flutter 编译并部署为 Web 应用程序。它在桌面 chrome 上运行良好，但在 android chrome 上运行不佳。有人知道问题所在吗？

(Flutter (Channel stable, 3.3.1, on Microsoft Windows [版本 10.0.22000.856], locale de-DE)) Android Chrome 105.0.5195.79，两者都应该是最新的。

main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: Lottie.asset("assets/lottie/94729-not-found.json"))));
  }
}

在 Chrome Windows/桌面上一切正常...

在 Chrome Android（也是 Android 模拟器）上 - 以某种方式裁剪

更新：实际上，我观察到所有 Lottie 动画的问题......这是一个 Lottie 错误吗？

谢谢！

Answer 1

我想，我从 lottie pub 页面找到了解决方案/解决方法：

使用 canvaskit 编译应用程序：

flutter build web --web-renderer canvaskit

或者

flutter run web --web-renderer canvaskit

如果您遇到同样的问题，也许会有所帮助