Animation breaks in web, but works in ios/android

[BrainRayChristensen]

I've been digging for awhile to find the root of the problem and after reporting this issue in a couple different libraries I think I've finally traced the problem back to here (maybe).

Steps to recreate:

1. Create a generic flutter project with web enabled.
2. Add following .flr file to assets folder and pubspec.yaml logo.flr.zip or can be found here https://rive.app/a/BrianChristensen/files/flare/logo
3. Replace _MyHomePageState with the following:

   class _MyHomePageState extends State<MyHomePage> {
   @override
   Widget build(BuildContext context) {
   return new FlareActor("assets/logo.flr",
       alignment: Alignment.center, fit: BoxFit.contain, animation: "scale");
   }
   }

Error message

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════

The following JSNoSuchMethodError was thrown during paint():

NoSuchMethodError: invalid member on null: 'withOpacity'

The relevant error-causing widget was:

  FlareActor file:///Users/BrianChristensen/Desktop/testing123/flutter_app/lib/main.dart:69:16

When the exception was thrown, this was the stack:

packages/flare_flutter/flare.dart 1225:22             draw

packages/flare_flutter/flare.dart 826:20              draw

packages/flare_flutter/flare_actor.dart 483:15        paintFlare

packages/flare_flutter/flare_render_box.dart 215:7    paint

packages/flutter/src/rendering/object.dart 2264:7     [_paintWithContext]

packages/flutter/src/rendering/object.dart 184:12     paintChild

packages/flutter/src/rendering/proxy_box.dart 129:14  paint

packages/flutter/src/rendering/object.dart 2264:7     [_paintWithContext]

packages/flutter/src/rendering/object.dart 184:12     paintChild

packages/flutter/src/rendering/proxy_box.dart 129:14  paint

packages/flutter/src/rendering/object.dart 2264:7     [_paintWithContext]

packages/flutter/src/rendering/object.dart 135:10     _repaintCompositedChild

packages/flutter/src/rendering/object.dart 95:5       repaintCompositedChild

packages/flutter/src/rendering/object.dart 980:29     flushPaint

packages/flutter/src/rendering/binding.dart 404:19    drawFrame

packages/flutter/src/widgets/binding.dart 884:13      drawFrame

packages/flutter/src/rendering/binding.dart 284:5     [_handlePersistentFrameCallback]

packages/flutter/src/scheduler/binding.dart 1113:15   [_invokeFrameCallback]

packages/flutter/src/scheduler/binding.dart 1052:9    handleDrawFrame

packages/flutter/src/scheduler/binding.dart 968:5     [_handleDrawFrame]

lib/_engine/engine/window.dart 576:13                 _invoke

lib/_engine/engine/window.dart 222:5                  invokeOnDrawFrame

lib/_engine/engine.dart 199:18                        <fn>

The following RenderObject was being processed when the exception was fired: FlareActorRenderObject#ce28d:

  creator: FlareActor ← MyHomePage ← Semantics ← Builder ← RepaintBoundary-[GlobalKey#2d441] ←

    IgnorePointer ← AnimatedBuilder ← FadeTransition ← FractionalTranslation ← SlideTransition ←

    _FadeUpwardsPageTransition ← AnimatedBuilder ← ⋯

  parentData: <none> (can use size)

  constraints: BoxConstraints(w=1200.0, h=957.0)

  size: Size(1200.0, 957.0)

This RenderObject has no descendants.

════════════════════════════════════════════════════════════════════════════════════════════════════

Another exception was thrown: NoSuchMethodError: invalid member on null: 'withOpacity'

Another exception was thrown: NoSuchMethodError: invalid member on null: 'withOpacity'

Another exception was thrown: NoSuchMethodError: invalid member on null: 'withOpacity'

Another exception was thrown: NoSuchMethodError: invalid member on null: 'withOpacity'

Another exception was thrown: NoSuchMethodError: invalid member on null: 'withOpacity'

Another exception was thrown: NoSuchMethodError: invalid member on null: 'withOpacity'

Another exception was thrown: NoSuchMethodError: invalid member on null: 'withOpacity'

Another exception was thrown: NoSuchMethodError: invalid member on null: 'withOpacity'

Another exception was thrown: NoSuchMethodError: invalid member on null: 'withOpacity'

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following JSNoSuchMethodError was thrown during paint():
NoSuchMethodError: invalid member on null: 'withOpacity'

The relevant error-causing widget was: 
  FlareActor file:///Users/BrianChristensen/Desktop/testing123/flutter_app/lib/main.dart:69:16
When the exception was thrown, this was the stack: 
packages/flare_flutter/flare.dart 1225:22             draw
packages/flare_flutter/flare.dart 826:20              draw
packages/flare_flutter/flare_actor.dart 483:15        paintFlare
packages/flare_flutter/flare_render_box.dart 215:7    paint
packages/flutter/src/rendering/object.dart 2264:7     [_paintWithContext]
...
The following RenderObject was being processed when the exception was fired: FlareActorRenderObject#ce28d
...  parentData: <none> (can use size)
...  constraints: BoxConstraints(w=1200.0, h=957.0)
...  size: Size(1200.0, 957.0)
RenderObject: FlareActorRenderObject#ce28d
  parentData: <none> (can use size)
  constraints: BoxConstraints(w=1200.0, h=957.0)
  size: Size(1200.0, 957.0)
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (2) Exception caught by rendering library ═════════════════════════════════════════════════
NoSuchMethodError: invalid member on null: 'withOpacity'
The relevant error-causing widget was: 
  FlareActor file:///Users/BrianChristensen/Desktop/testing123/flutter_app/lib/main.dart:69:16
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (3) Exception caught by rendering library ═════════════════════════════════════════════════
NoSuchMethodError: invalid member on null: 'withOpacity'
The relevant error-causing widget was: 
  FlareActor file:///Users/BrianChristensen/Desktop/testing123/flutter_app/lib/main.dart:69:16
════════════════════════════════════════════════════════════════════════════════════════════════════

The last error message just gets repeated until the project is stopped.

[BrainRayChristensen]

As a side note, if this isn't an issue with your library, it would be awesome if you could point me towards where you think the problem is. And if there is anything else I can post to help with debugging, please let me know.

[luigi-rosso]

Thanks for reporting this. 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.

Here's the line in the Flutter engine: https://github.com/flutter/engine/blob/56fe6d2550bb5b4ffb7c8ecff4acbda5bb6ed0c7/lib/web_ui/lib/src/engine/bitmap_canvas.dart#L745

Unfortunately this also won't work with Flutter Web with the CanvasKit backend as that currently doesn't support decoding images for the image shader: https://github.com/flutter/engine/pull/17984/files

We're working closely with the Flutter team to try to resolve these. We'll keep this issue open and report as progress is made.

[BrainRayChristensen]

In the meantime, do you know if there are there specific animations that cause this error, or is it all?

[tsinis]

In the meantime, do you know if there are there specific animations that cause this error, or is it all?

As i wrote before — simplify your animations and you are good to go in Flutter Web, even in it’s actual state. Don’t use trim paths, blur, shadows, opacity in gradient animations etc. I have one pretty complex animation without all that things, additionally with controller on mouse hover events — everything runs butter-smooth, on all platforms including web. If you can tolerate this certain visual aesthetic then you are good to go in web until Rive team will fix remaining flaws.

[eduardotd]

Only writing to receive updates on the progress of this issue...

[abid-shaon-3r]

Following

[Puspharaj]

Bump!

Any update on this?. Look like almost a year to resolve this?

[hamidbir]

I had the same Issue: I used the following command to run:

flutter run -d chrome --web-renderer canvaskit

But the photos I received from the server in my project had trouble displaying. So I converted all the photos (png) in the flr file to SVG, re-created the flr file, and this time I run the project with the following command and it worked fine.

flutter run -d chrome --web-renderer html

Web renderers