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 469 forks source link

Dynamically load image into Flare animation at runtime #183

Closed jkurtw closed 4 years ago

jkurtw commented 4 years ago

We want to generate an image at run time, and then use it in an animation.

With Lottie, we can run time compose the image, then drop it into the Lottie animation. Another example is to just populate it with images that are downloaded from the network.

Is this possible?

It looks like this might be the same question as https://github.com/2d-inc/Flare-Flutter/issues/63

luigi-rosso commented 4 years ago

We've added support for this in flare_flutter: ^1.7.0.

In order to use this you'll need to mark the image you want to swap as dynamic in Flare. The gist below has a full example for how to do this using a custom controller. https://gist.github.com/luigi-rosso/c50277341bd2681be072a575acbeb1fc#file-dynamic_image_swapping-dart-L60

jkurtw commented 4 years ago

Awesome! Thank you.

luigi-rosso commented 4 years ago

Np! Note that we were testing this on master. I’m getting some reports of errors, there may be some breaking change on other channels..

jkurtw commented 4 years ago

Sounds good

luigi-rosso commented 4 years ago

I'm backing out the changeImageFromNetwork(String url) method until some breaking changes in dev/master land all the way in stable. I'll make it available as a utility function in a gist for anyone who wants to use it.

Note that you'll still be able to call changeImage(Image image) and acquire that image from the network with the utility function above.

luigi-rosso commented 4 years ago

flare_flutter: 1.7.1 is up without changeImageFromNetwork.

Here's the changeImageFromNetwork implemented as an extension method for dev/stable: https://gist.github.com/luigi-rosso/c50277341bd2681be072a575acbeb1fc#file-dynamic_image_swapping-dart-L100

luigi-rosso commented 4 years ago

Can we close this @jkurtw?

jkurtw commented 4 years ago

LGTM!