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.
2. Flutter Project and Module
Create a Flutter project and create a new module with a name for example flarecode. Follow the gif below —
You must be able to get the following structure in the project, where project is flaredemo and module is flarecode
3. Use Flare Flutter for Flare Code
Paste the three files copied before from the repository in the lib folder of the fluttercode module
4. Update dependencies
Update pubspec.yaml by adding dependency for fluttercode
dependencies:
flutter:
sdk: flutter
flarecode:
path: flarecodeAnd 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.
6. Save Flare file in Flutter project
Store the file in the images folder in the project, update pubspec.yaml and update dependencies.
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.
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 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.
