Animation 02 | Use the flare 2dimesion animation in the flutter?

NieBin
NieBin
Jan 10, 2019 · 4 min read

In this tutorial, I will tell you how to create and use flare animation in the flutter.

If we just create the animation in our program, when the animation is very complex, the implement with the code will be difficult. So we will consider using the flare animation, which is developed by 2Dimension. You can create a flare file with their tool and use in the flutter.

0. What we will implement?

Image for post
Image for post

1. Create the flare file.

First, you must go to the 2Dimension and register your own account, when you complete registration and go to the main page, touch the Your File,you can see some like this, then click the New Flare and you can create your flare file now.

Image for post
Image for post

Be careful that 2Dimension has two types of file, do not create wrong, flare file has the suffix of flr and the logo is below, some beginners often wrong with start and waste much time.

Image for post
Image for post

When you create a file, it will be like this, it is blank now. If you want to change the size, you can just click the #Artboard, then the param will show you on the right side, this time I will set(600,600). Other params in the right will be retained to you for research. We just see the SETUP and ANIMATE , SETUP is as the common state, just before the animation, what we do. And the ANIMATE is used to set the animation param, if you change the param in this page, it will be connected with time.

Image for post
Image for post

2. Export flare file

Image for post
Image for post

And click the button as I circle it with red paint, then click Export , it will show you as below, you should choose the flutterand Binary , then you can export it. When download, the file suffix is flr , if your file isn’t this, you could check.

Image for post
Image for post

3. How to use flare file?

First, we should configure the pubspec.yaml to import the flare package. As this, the current version is 1.0.11, but you can check it whether or not is an up-to-date version with this link. When you configure it, you should get and update your packages.

flare_flutter: ^1.0.11

Then, configure your flare file as an image asset, I rename my file name with `solar.flr` and put in the assets/images folder. I set as below.

assets:
- assets/images/

Finally, we use it in the code. Input `flare_actor` and use the `FlareActor` as a common widget.

import "package:flutter/material.dart";
import 'package:flare_flutter/flare_actor.dart';
import 'package:flutter_animation/constant/_constant.dart';

class FlarePage extends StatefulWidget {
@override
_FlareState createState() => _FlareState();
}

class _FlareState extends State<FlarePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flare Animation"),
),
body: Container(
color: Color(0xff18222c),
child: Center(
child: Center(
child: FlareActor(
// ImagePath.SOLAR_FLARE,
"assets/images/solar.flr",
animation: "solar_run",
),
),
),
),
);
}
}

You should be careful about the animation param, the solar_run is the name of our animation, we can find in our animation editor of 2Dimension, I have circled it with a red pen as following picture.

Image for post
Image for post

Conclusion

Image for post
Image for post
The flare file of this project.

The whole project in the GitHub, star to support, thanks.

Facebook group: Flutter Open

Github of Developer: NieBin.

flutteropen

Focus on flutter open source project and Help flutter…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store