Flare-flutter: Flare for flutter_web

[asjqkkkk]

Is there any plan to support Flutter for web? 😊

[MSchmack]

With the latest master build of flutter you can display FlareActors with flutter for web.

Color changing and fading seems to run with decent or great performance. Drawing something isn't quite animated and just jumps from 0 to 100 after the delay.

I got a github page I'm using to debug and try flutter for web, it has a flare tic tac toe field which showcases the issue pretty well... among other issues ..uff.

[JHBitencourt]

It is not fully supported though. Some animations doesn't work properly.
+1 to the issue

[racknoris]

@JHBitencourt is there something in common for those animations that don't work properly?

[MathiasYde]

@racknoris With my short time of experimenting with it, I can say that masked objects usually don't render well in my experience. (See examples)


Rive link: https://rive.app/a/mathiasyde/files/flare/phone-feed-refresh

[racknoris]

@MathiasYde Were you able to find a workaround?

[MathiasYde]

@racknoris Unfortunately not, my speculation is that Rive has updated some data structure on their website, but not their runtime yet. I can't know for sure.

[luigi-rosso]

There are some Flutter features that haven't yet been ported to the web runtime, one of them is PathMetrics which we use for trim paths (one of the features used by the linked file). There's an issue in the Flutter repo tracking this: https://github.com/flutter/flutter/issues/41395

[racknoris]

@MathiasYde sorry for the late response- Thank you very much for the detailed answer!

[crystaldonut]

Just tested some Rive files on the flutter master channel, pathmetrics is working :)

[MathiasYde]

@crystaldonut Even for web?

[MSchmack]

Gave it a try and updated my trial web app. Some seem to run smooth while some.. are funny.

The X on the Tic Tac Toe field draws smooth, the circle draws something odd first then pops into a circle (Animation is supposed to just draw a circle).

https://mschmack.github.io/#/