Flutter WEB not display flr artboard and animation

[m1n093]

On android work perfect, but on flutter web Chrome, Firefox is invisible.

https://rive.app/a/m1n0/files/flare/human-body

`name: splendor_app
description: A new Flutter application.

version: 1.0.0+1

environment:
sdk: ">=2.1.0 <3.0.0"

dependencies:
flutter:
sdk: flutter

cupertino_icons: ^0.1.2
flare_flutter: ^2.0.1

dev_dependencies:
flutter_test:
sdk: flutter

flutter:
uses-material-design: true
assets:

• assets/human.flr
  `

Widget

child: FlareActor( "assets/human.flr", animation: 'timer_animation', artboard: 'Front', isPaused: !mounted, )

[tsinis]

Hey! It's dependent on few factors, actually shadows, blur etc. effects are not fully supported in Flutter Web, as far as I know. You can try to simplify your animations, with removing effects or just wait for Rive Team to fix this. They haven't made made any huge updates in last month, so I believe something big is prepared.

[m1n093]

its even work on desktop Windows but not on web :(

[LucasTejero]

Im having the same issue,even on 2.0.3 and my animation is quite simple.

#248

[gabber235]

I'm having the same issue. I also use a png image in my animation but I don't use something else complicated. But I still get this error:

Error: [object Event]


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

I get this error on all channels of flutter (master, dev and beta). If this is different from your case I will make a separate issue.

[digitalrbnz]

I'm having the same issue. I also use a png image in my animation but I don't use something else complicated. But I still get this error:

Error: [object Event]


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

I get this error on all channels of flutter (master, dev and beta). If this is different from your case I will make a separate issue.

Did you solve this? Same issue with me on Web.

[imcoffeefreak]

I'm having the same issue. I also use a png image in my animation but I don't use something else complicated. But I still get this error:

Error: [object Event]


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

I get this error on all channels of flutter (master, dev and beta). If this is different from your case I will make a separate issue.

Any workaround ?

[umberto-sonnino]

Unfortunately images are not supported yet in Flutter for Web.
Only workaround for now is to recreate those assets as vector shapes.

[umberto-sonnino]

Actually, the latest Flutter master with CanvasKit should support images -- just flutter run your app with the flag: --dart-define=FLUTTER_WEB_USE_SKIA=true