Flare is a website that can quickly animate Flutter SVG. It provides a dedicated Flutter Weight hosting site’s exported animation file, which is the equivalent of Lottie on Android. Flare’s first appearance was amazing. It was at the launch of the Flutter, and it went viral. This article should not have been written, there are many articles on Flare on the web, but for the purpose of learning, this article should be written to introduce the integrated use of Flare animation on The Flutter

Understand the Flare

Flare is a site: 2Dimensions, which has a large number of fully open source designed animations, many of which are free to use

Each one here is a very beautiful SVG animation, let’s open one, here I will record the screen

Click open in Flare on the right to see the design source code for the animation

Flare works much like Android does with SVG Animations. You can animate a given view. Under the Animations TAB is the name of each animation, Demo is the overall animation, Idle is the style before playing, start is loading the animation after clicking the button. Complete is how the animation will play out. We can specify which animation to play on the Flare Weight by using the name of each animation. Designing animations on Flare is much easier than after Effects. Even simple animations like scale button clicking can be done by ourselves without having to look at the UI’s face

Here is what the animation looks like on the Flutter. I played the Demo to show the interaction. The buttons were white, which was very ugly, so I added a blue contrast

Flare Production Learning

Flare is relatively easy to learn, but it’s for design, and I don’t have time for it myself, so here are 2 simple tutorials, both simple examples, for development:

  • Making and using Flare of Flutter animation
  • Flutter uses Flare to animate

Flare Project Export

Flare manages and creates animated projects as projects. Flare currently supports two types of projects:

  • Flare– Build real-time, fast animations for App and Web
  • Nima– Mainly building 2D animations for game engines and applications

Therefore, we usually use Flare type projects, but Nima is not impossible, in fact, the essence is the same, which is designed to do the same

  1. If you want to export a Flare project, you need to check the icon in the upper right corner to see if it can be exported. If you want to export a Flare project, you need to check if it can be exported. If you want to export a Flare project, you need to check if it can be exported

  2. To export Nima project, find the Settings icon in the lower right corner, click export, select Generic engine, export two files: one is PNG, one is.nma file, manually change.nma to.nima, put these two files into asste resource file

NimaAnimation using

  1. Import the Flutter plugin:nima
name: flutter_app4
description: A new Flutter application.

version: 1.0. 0+ 1

environment:
  sdk: "> = 2.1.0 < 3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^ 0.1.2
  nima: ^ 1.0.5
Copy the code

  1. Place animation resources into the asset, as shown in the two Robot files below

  2. use

class EE extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 300,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.blue, width: 3),
      ),
      child: NimaActor(
        "assets/animations/Robot.nima",
        alignment: Alignment.center,
        fit: BoxFit.contain,
        animation: "Flight",),); }}Copy the code

FlareAnimation using

The GIF is the one that started, and I’m not going to show it anymore

  1. Import the Flutter plugin:flare_flutter
name: flutter_app4
description: A new Flutter application.

version: 1.0. 0+ 1

environment:
  sdk: "> = 2.1.0 < 3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^ 0.1.2
  flare_flutter: ^ 1.5.8
Copy the code

  1. To place an animation resource into an asset, Flare has only a.flr file

  2. use

class FF extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Container(
          width: 300,
          height: 300,
          decoration: BoxDecoration(
            border: Border.all(color: Colors.red, width: 3),
          ),
          child: FlareActor(
            "assets/animations/Download.flr",
            animation: "Demo", alignment: Alignment.center, fit: BoxFit.contain, ), ), ], ); }}Copy the code

The last

Flare feels great, GIF doesn’t show performance, real is very silky, much better than Android Lottie, not many Flare widgets have to be manually sized to get an error