Flare Integration in Flutter

Hello everyone,

Important Note

As per recent update, flare_flutter package has been released in packages library. If you don’t want to use flare_flutter package, you can continue using this article. You can skip steps 1–4 and just add a dependency in pubspec.yaml by name flare_flutter .
dependencies: flare_flutter: ^1.0.0 and run flutter packages upgrade to update the dependencies.
Follow 5–7 steps then.

Flutter Live is now gone and has left us with a lot of work to do. No doubt dart has touched every field’s developers heart. Thanks to its openness in mobile, web, desktop, IoT devices.

Few things which were announced yesterday in Flutter Live and are in their own world — a great achievement. Be it Flare or CodeMagic or Square, etc.. and in the coming future 🐦HummingBird, everything is very crucial and play a very important role in mobile app development life cycle.

As an effect of that, I thought of giving a shout out on how to use the beautiful vector animations created in Flare in Flutter in 7 clean steps —

1. Download Flare for Flutter Code

Download code for Flare-Flutter from Github and separate out the flare directory, flare_actor.dart, flare.dart from the repository.

The path for Flare Flutter Code in the repository

2. Flutter Project and Module

Create a Flutter project and create a new module with a name for example flarecode. Follow the gif below —

The process to add a module in Flutter application

You must be able to get the following structure in the project, where project is flaredemo and module is flarecode

Project structure after adding a module fluttercode

3. Use Flare Flutter for Flare Code

Paste the three files copied before from the repository in the lib folder of the fluttercode module

Paste flare code in the lib folder

4. Update dependencies

Update pubspec.yaml by adding dependency for fluttercode

dependencies:
flutter:
sdk: flutter
flarecode:
path: flarecode

And run flutter packages upgrade to update the dependencies.


5. Use/Create Flare File from 2dimensions.com

Head on to any file in 2dimensions.com that can be forked and export the flare file.

Exporting flare file from 2dimensions

6. Save Flare file in Flutter project

Store the file in the images folder in the project, update pubspec.yaml and update dependencies.

Project structure after adding flare file

Put it in pubspec.yaml

assets:
- images/

7. FlareActor to load Flare file

Use below code in main.dart in the Flutter Code. Open main.dart and use following code

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

void main() => runApp(
MaterialApp(
home: Scaffold(
body: FlareActor(
"images/flareintro.flr",
animation: "Build and Fade Out",
),
),
),
);
Key point here is string in animation. Basically a flare file has many types of animation and each one is labeled by unique strings. If you look carefully in the 2dimensions website, you could find many labels under animation. You can run one animation at a time by specifying its name.
Multiple animations in a flare file

Changing the code to use both the animations on a button click. Changing the animation when one of the two buttons is clicked. Using a column with 3 children FlareActor, RaisedButton, RaisedButton

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

void main() => runApp(
MaterialApp(
home: Scaffold(
body: SafeArea(child: Demo()),
),
),
);

class Demo extends StatefulWidget {
@override
_DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
String _animation = "Build";

@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Expanded(
child: FlareActor(
"images/flareintro.flr",
animation: _animation,
),
),
RaisedButton(
child: Text("Build"),
onPressed: () {
setState(() {
_animation = "Build";
});
},
),
RaisedButton(
child: Text("Build and Fade Out"),
onPressed: () {
setState(() {
_animation = "Build and Fade Out";
});
},
),
],
);
}
}

Final Output

Build only animates the Flare logo.

Build and Fade Out animates the twin of the man.

Complete Project link (Github)

The output of using Flare in Flutter
The journey is not over yet. I have shown you the way to use already created animations in flare. But anyone can go to 2dimensions.com and create account and build their own cool stuffs. Happy Flaring everyone.