Hello All
In Flutter Live 2018 few important announcement's are
- Flare
- Square
- PlatformViews (To know how to use click here).
- HummingBird
Here in this article you will learn about Flare
and How to use it in.
Lets Start
Import flare dependency into your flutter project
flare_flutter: ^1.0.4
Create a flare project Here or use an existing one Here
In this article i am using a minion from here
Inside flare editor we will a list of animations avialable with the minion design
Now click on export on the top Right > Export
Now select Flutter, Select Binary Click on Export
Now Copy the download file and paste it in project_dir/images/
folder
Import flare inside your dart file
import 'package:flare_flutter/flare_actor.dart';
Inside pubspec.yaml file enable access to copied flare files
assets:
- images/
Now lets create a FlareActor
and pass the .flr
file to it
FlareActor(
"images/minion.flr",
alignment: Alignment.center,
fit: BoxFit.contain,
animation: "Look",
)
In the above code animation takes a String i.e., the name of the animation as shown in the Step 2
Inside our dart file lets make bottons and add animtions to each one
String _animation = "idle";
void doAnimate(String anim) {
setState(() {
_animation = anim;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
children: <Widget>[
//flare actor
Expanded(
child: FlareActor(
"images/minion.flr",
alignment: Alignment.center,
fit: BoxFit.contain,
animation: _animation,
),
),
//animations
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
RaisedButton(
child: Text("Look"),
onPressed: () {
doAnimate("Look");
},
),
RaisedButton(
child: Text("Dance"),
onPressed: () {
doAnimate("Dance");
},
),
RaisedButton(
child: Text("Stand"),
onPressed: () {
doAnimate("Stand");
},
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
RaisedButton(
child: Text("Jump"),
onPressed: () {
doAnimate("Jump");
},
),
RaisedButton(
child: Text("Wave"),
onPressed: () {
doAnimate("Wave");
},
)
],
)
],
),
);
}
In the above code we declare a varibale _animation
and assign it a value idle
as inital state and when we click on a button we change the _animation
to a sutiable animation
Our animation function
void doAnimate(String anim) {
setState(() {
_animation = anim;
});
}
![Flare Demo Output](https://i.imgur.com/Vsz6EhH.gif =250x)
Inorder to get full control of the animation we need to use FlareController
we need to make our statefull widget to implement FlareController
and our FlareActor
will become like this.
FlareActor(
"images/minion.flr",
alignment: Alignment.center,
fit: BoxFit.contain,
animation: _animation,
)
and we need to override
few methods from the FlareController
@override
bool advance(FlutterActorArtboard artboard, double elapsed) {
// TODO: implement advance
return null;
}
@override
void initialize(FlutterActorArtboard artboard) {
// TODO: implement initialize
}
@override
void setViewTransform(Mat2D viewTransform) {
// TODO: implement setViewTransform
}