Flare-Flutter

Flare-Flutter copied to clipboard

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, )

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.

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

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

https://github.com/2d-inc/Flare-Flutter/issues/248

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.

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.

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 ?

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

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