How to create button animation with Flare in Flutter? Part 3: Implement animation in Flutter project

Hi everyone! 👋

In today’s article we’ll continue a series in which we’re going through the process of creating animation in Flutter using Flare. This series is split into three parts and you can check all of them here:

• Part 1: Create your first animation!
• Part 2: Animations with TrimPath
• Part 3: Implement animation in Flutter project

This is the last part. In this article we’ll go through the final step: integrating animation with our Flutter project to achieve this result:

If you haven’t read previous articles, you can read them all (I encourage you!) or you can fork this Flare project and start from this point.

Step 1: Create a Flutter project

We’ll start with the empty Flutter project. You can omit this step if you’ll integrate animation into an existing app. If you don’t have one, follow these steps from the guide on Flutter site.

Step 2: Add flare_flutter package

To have the ability to use flare in your Flutter project, you need to add proper library. This library is called flare_flutter and you can check it on the pub packages site. Here you’ll find also instructions on how to install and use it. Basically, all you need to do is:

a) Add this to your pubspec.yaml file:

dependencies:   
  flare_flutter: ^1.5.0

b) Run flutter packages get to update packages in your project.

Now you’re ready to use it!

Step 3: Add animation code

When we have a library ready, we can run with the actual part of this article: coding. We’ll start by modifying main.dart file:

import 'package:flare_flutter/flare_actor.dart';
import 'package:flutter/material.dart';

void main() => runApp(FlareButtonApp());

class FlareButtonApp extends StatefulWidget {
  @override
  _FlareButtonAppState createState() => _FlareButtonAppState();
}

class _FlareButtonAppState extends State<FlareButtonApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SizedBox(
            width: 500,
            height: 75,
            child: FlareActor(
              'assets/Button.flr',
              animation: 'Loading',
              fit: BoxFit.fitWidth,
            ),
          ),
        ),
      ),
    );
  }
}

The most interesting widget here is FlareActor . This widget is reponsible for showing animation. As you can notice, I wrapped this widget inside SizedBox widget — I’ve done it to make sure that my widget’s size will be exactly 500x75 pixels.

FlareActor has few parameters. First one, ‘assets/Button.flr’, is the file path to our animation. To make it work, we need to export our Flare file and put this file into assets:

Step 3.1: Add Flare asset

To add Flare asset, you need to open your Flare file (like this one), tap on the Export icon on the right, choose Export and confirm it. The generated file will have *.flr extension and you need to put it inside some folder in Flutter project. In my case it’s assets in the project root:

To make this file visible for Flutter, you need to declare assets folder in pubspec.yaml file:

flutter:
  assets:
    - assets/

And that’s all! Now let’s go back to FlareActor widget.

Step 3: Add animation code (continuation)

The next parameter in FlareActor widget is animation: ‘Loading’ . That’s the name of our animation. You can change the name of the animation in Flare project, from the menu on the left visible after switching to Animate tab:

Next parameter is fit: BoxFit.fitWidth, which describes the way animation is shown (just as with images), in this case, we’d like to make sure the full width is visible.

That’s it! You can run your app and check the animation! Right now it should look like this:

But there is more…

Bonus: Adding idle and restart animations

If you saw the animation from the beginning of the article, you may notice that it was slightly different. This is because we can add multiple animations in Flare project to have multiple states of our Flare objects. And right now we only have one state (Loading).

I added the missing states to the file here. You can notice there are two more animations: Idle and Restart. The first one is not really an animation, rather an initial state of the button. The second one is the animation that happens after we click on the button.

To make them work you need to add few lines in the code I presented above:

class _FlareButtonAppState extends State<FlareButtonApp> {
  String _animationName = 'Idle';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SizedBox(
            width: 500,
            height: 75,
            child: GestureDetector(
              onTap: _onButtonTap,
              child: FlareActor(
                'assets/Button.flr',
                animation: _animationName,
                fit: BoxFit.fitWidth,
              ),
            ),
          ),
        ),
      ),
    );
  }

  void _onButtonTap() {
    setState(() {
      if (_animationName == 'Idle' || _animationName == 'Restart') {
        _animationName = 'Loading';
      } else {
        _animationName = 'Restart';
      }
    });
  }
}

Voilà! Now our animation works like a charm:

You can check this Flare project here on 2dimensions.com.

You can check also code for the repository from today’s article here:

pszklarska/flutter_flare_button

Summary

That’s all! It’s the end of this series. Through all the articles we completed the full process of creating fancy animation using Flare and integrating this animation into Flutter project. If you’d like to check previous posts, you can do it here:

• Part 1: Create your first animation!
• Part 2: Animations with TrimPath
• Part 3: Implement animation in Flutter project

Thanks for reading, comments, and feedback! 🙌 If you liked this article, don’t hesitate to clap it!