https://github.com/ponnamkarthik/flutterflaredemo
Flutter App Showing a Flare Animation Demo
https://github.com/ponnamkarthik/flutterflaredemo
flare flutter flutter-apps flutter-demo flutter-examples
Last synced: about 1 month ago
JSON representation
Flutter App Showing a Flare Animation Demo
- Host: GitHub
- URL: https://github.com/ponnamkarthik/flutterflaredemo
- Owner: ponnamkarthik
- Created: 2018-12-18T13:46:04.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-12-18T14:45:08.000Z (almost 7 years ago)
- Last Synced: 2025-04-09T20:05:19.103Z (6 months ago)
- Topics: flare, flutter, flutter-apps, flutter-demo, flutter-examples
- Language: Dart
- Size: 57.6 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Flutter Flare Demo
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
## Step 1 :
Import flare dependency into your flutter project
```yaml
flare_flutter: ^1.0.4
```
## Step 2:
Create a flare project [Here](https://www.2dimensions.com/) or use an existing one [Here](https://www.2dimensions.com/explore/popular/trending/all)
In this article i am using a minion from [here](https://www.2dimensions.com/a/tracygipson/files/flare/minion/preview)
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
## Step 3
Import flare inside your dart file
```dart
import 'package:flare_flutter/flare_actor.dart';
```
## Step 4
Inside pubspec.yaml file enable access to copied flare files
```yaml
assets:
- images/
```
## Step 5
Now lets create a `FlareActor` and pass the `.flr` file to it
```dart
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
## Step 6
Inside our dart file lets make bottons and add animtions to each one
```dart
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: [
//flare actor
Expanded(
child: FlareActor(
"images/minion.flr",
alignment: Alignment.center,
fit: BoxFit.contain,
animation: _animation,
),
),
//animations
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
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: [
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
```dart
void doAnimate(String anim) {
setState(() {
_animation = anim;
});
}
```
## Demo
## Step 7 (Optional) - Additional
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.
```dart
FlareActor(
"images/minion.flr",
alignment: Alignment.center,
fit: BoxFit.contain,
animation: _animation,
)
```
and we need to `override` few methods from the `FlareController`
```dart
@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
}
```