search

2d-inc / Flare-Flutter

Load and get full control of your Rive files in a Flutter project using this library.
https://rive.app/
MIT License
2.55k stars 470 forks source link

Web error weird drawings #248

Open LucasTejero opened 4 years ago

LucasTejero commented 4 years ago

In the editor and on ios and Android it work very well

RightColor

But when i deploy it to the web using flutter it starts to draw in a weird way.

ErrorColor

Flutter 1.17.0 • channel beta • https://github.com/flutter/flutter.git Framework • revision d3ed9ec945 (12 days ago) • 2020-04-06 14:07:34 -0700 Engine • revision c9506cb8e9 Tools • Dart 2.8.0 (build 2.8.0-dev.18.0 eea9717938)

Can you help me to solve this?

LucasTejero commented 4 years ago

This package is mark as supported in web but its useless with this type of error,nobody answer in 4 months

umberto-sonnino commented 4 years ago

Hey Lucas, sorry for the late reply! Unfortunately Flutter for Web supports for Trim Paths differently than it does everywhere else, it seems that this might be related to that. Can you share your rive file link so I can take a look?

LucasTejero commented 4 years ago

Yes,this is the link to that file

https://rive.app/a/tejerolucas/files/flare/bringt-loading-v1

tsinis commented 4 years ago

Hey @LucasTejero!

I can see a trim paths in your animation, it's no go for a Rive in Flutter Web ATM. You will have to expand strokes and animate them as normal paths, via edit vertices and translate tool. This is more sophisticated and will take a lot longer, but it will work. Also if you are not happy with rendering colors, effects etc. try to run your web with those flags:

--dart-define=FLUTTER_WEB_USE_SKIA=true --dart-define=FLUTTER_WEB_USE_EXPERIMENTAL_CANVAS_TEXT=true

Аlso avoid complicated clipping, masks, shadows in your animations and everything will work fine. I believe that the Flutter and Rive teams have been working together on this kind issues for some time now, as a lot has changed for the better on the web since package version 2.0.1. I guess we'll see a full-featured Rive on Flutter Web soon.