Flutter & multiple Flare animations

At Flutter Live, on Dec 4th. A company called 2dimensions demonstrated their product Flare. A web app to make animations. What’s more it could throw out a file that could then be directly used in a Flutter application.

The next day, I grabbed an SVG from flaticon and made a small animation. It worked just as advertised:

But, what I saw inside Flare intrigued me more. Multiple animations. So one flr file could could have 2,3,4+ animations inside. Each can be called from the Flutter widget.

I made a little animation, going from day to night and night to day, to test this out. Here’s the result:

Now, I’m no graphic designer, so you’ll have to excuse the linear interpolation etc. Here is the flare file: https://www.2dimensions.com/a/tunitowen/files/flare/xmas

Now onto Flutter:

Edit: Now available on pub… https://pub.dartlang.org/packages/flare_flutter so add it in the standard Flutter way

Next add the flr file:

From Flare, export for Flutter, and grab the FLR file. Put that into your assets folder. If you don’t have an assets folder, create one in the root folder.

Include assets:

In your pubspec.yaml again:

flutter:
  ...
  assets:
  - assets/

Now we can access any file inside the assets folder.

Now to use the Flare file:

So. Here we have a simple Material app, and you’ll see in my Column there is a FlareActor. In its simplest form, thats it. Just add the animation name defined in Flare, and it will automatically play.

What I wanted to do was use one file, with multiple animations. So I created:

day_to_night
night_to_day
& just_night

just_night is hacky, maybe there is a better way, but I don’t know it yet. just_night doesn’t animate at all, its just the night state.

day_to_night animates the sun down, the moon up, and the sky dark

night_to_day animated the moon down, the sun up, and the sky light

So now we can call any of those animations.

You’ll notice that I’m holding 2 variables currentAnimation and isAnimating . This is to stop the ability to animate to the wrong state, or start another animation when one is running.

isAnimating is set to true when the currentAnimation is changed, and then I use a callback on the FlareActor to set that back to false.

There’s also some logic to stop animating to day, when its already day etc… but that’s pretty straight forward.

I’ve seen some strange behaviour on hot restarts / reloads occasionally. Like the top of the tree became a rectangle. But sure there are just teething problems. All work out with a fresh build.

I’m super impressed with the ease of Flare, and the implementation is also very very easy.

It would be nice to get more docs on its usage. Especially around the controller. Hopefully they will come in time.

Great job 2Dimensions