flutter web 中的错误运行 flare/rive 动画

Question

我现在开发了一个应用程序，在 flutter web 中使用相同的动画。但它的投掷错误。我已经下载了flutter的二进制文件并提供给flare但是没有用。相同的代码在 android 中运行良好，但在 flutter web 中抛出错误 Plzz 帮助。错误：

Error: [object Event]


    at Object.createErrorWithStack (http://localhost:62576/dart_sdk.js:4789:12)
    at Object._rethrow (http://localhost:62576/dart_sdk.js:35903:16)
    at async._AsyncCallbackEntry.new.callback
    (http://localhost:62576/dart_sdk.js:35899:13)
    at Object._microtaskLoop (http://localhost:62576/dart_sdk.js:35759:13)
    at _startMicrotaskLoop (http://localhost:62576/dart_sdk.js:35765:13)
    at http://localhost:62576/dart_sdk.js:31707:9

代码：


class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  String animationName = "forward";
  bool paused;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    animationName = "forward";
    paused = false;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: FlareActor(
        "flare_truck.flr",
        animation: animationName,
        fit: BoxFit.fitHeight,
        alignment: Alignment(0, 0),
        callback: (str) {
          setState(
            () {
              animationName = "upDown";
            },
          );
        },
      ),
    );
  }
}

Answer 1

在 iOS 和 Android 上运行的 Flare 动画有一个未解决的 Github 问题，但在网络 here 上出现问题。

Flare/Rive 团队的一名成员就此问题发表了以下看法：

"There are two issues here but the fundamental one is that Flutter Web does not support image shaders for triangle meshes, which is how Flare renders images. Unfortunately, that means that Flare images won't work in Flutter Web right now. What we can do on our side is disable them from drawing so you don't get exceptions."

您可以关注 Github 问题以获得关于此的任何特定更新。

虽然这没有太大帮助，但您可以尝试使用 RepaintBoundary 解决 Stack 和 Flare 问题。您可以查看 Whosebug 答案 .

Answer 2

我遇到了同样的问题，我发现如果你在动画中使用任何图像，它在 flutter web 上效果不佳，所以不要将图像用作 .png 。使用 illustrator 将所有图像转换为 .svg 文件格式的路径

flutter web 中的错误 运行 flare/rive 动画

Error running flare/ rive animation in flutter web

flare

dart

flutter

rive

flutter web 中的错误运行 flare/rive 动画