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

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?

We will create a flare file and export it, then use it in the flutter in our project.

1. Create the flare file.

Before we use it, we must know where and how to create it.

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.

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.

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.

2. Export flare file

Then you can create your own animation. If you do know how to create, you can reference my work with solar animation file.

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.

3. How to use flare file?

When you export file right, you can use it now.

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.

Conclusion

Today, we have learned how to create a flare file, and how to use it in the flutter. That’s wonderful so that we can create some more complex animation with flare, but it also has some limitations with it, if the animation depends on the data, you should use the original animation in the flutter.

The flare file of this project.

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

Facebook page: #Flutter Open

Facebook group: Flutter Open

Github of Developer: NieBin.