在颤振网络中运行flare / rive动画时出错答案

【问题标题】：Error running flare/ rive animation in flutter web在颤振网络中运行flare / rive动画时出错
【发布时间】：2020-09-02 14:09:37
【问题描述】：

我已经开发了一个应用程序，现在在 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";
            },
          );
        },
      ),
    );
  }
}

【问题讨论】：

标签： flutter dart flare rive

【解决方案1】：

在 iOS 和 Android 上运行但在网络上中断的 Flare 动画存在一个开放的 Github 问题here。

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

“这里有两个问题，但基本的一个是 Flutter Web 不支持三角形网格的图像着色器，这是 Flare 渲染图像的方式。不幸的是，这意味着 Flare 图像在 Flutter Web 中不起作用现在。我们能做的就是禁止它们绘制，这样你就不会出现异常。”

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

虽然这没有多大帮助，但您可以尝试使用RepaintBoundary 解决堆栈和耀斑问题。你可以查看 StackOverflow 的答案here。

【讨论】：

我知道这不是空间，但是由于耀斑社区有点小而且您对此了解很多，请您看看这个问题吗？ stackoverflow.com/questions/64282216/…

【解决方案2】：

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

【讨论】：