在 flutter web 中运行 flare/rive animation 时出错

Question

I have developed an app now using the same animation in the flutter web. But its throwing error. I have downloaded the binary file of flutter and provided it to the flare but it doesn't work. The same code works well in android but throwing error in flutter web Plzz help. Error:

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

Code:

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

There is an open Github issue on Flare animations working on iOS and Android but breaking on web here .

A member of the Flare/Rive team has said the following about the issue:

"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."

You could follow the Github issue for any specific updates on this.

While this doesn't help much there is a workaround you could try using RepaintBoundary for Stack and Flare issues. You can check the StackOverflow answer here .

Answer 2

I was facing the same problem, i found out that if you use any images within your animation, it doesn't work well with flutter web, so instead of using your images as.png. convert all images to paths using illustrator to.svg file format