Flutter Animation Using Flare

Hello Everyone

In Flutter Live 2018 few important announcements are

• Flare
• Square
• PlatformViews (To know how to use click here).

Build your Own Plugin using (PlatformViews) — Flutter

• HummingBird

Here in this article, you will learn about and How to use it in.

Lets Start

Step 1 :

Import flare dependency into your flutter project

Step 2:

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

Build your Own Plugin using (PlatformViews) — Flutter

Flutter 1.0 announced PlatformViews
medium.com

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

Step 4

Inside pubspec.yaml file enable access to copied flare files

Step 5

Now lets create a FlareActor and pass the .flr file to it

In the above code, animation takes a String i.e., the name of the animation as shown in Step 2

Step 6

Inside our dart file, let's make buttons and add animations to each one

https://gist.github.com/2371aa09e140c7eda652e35c02c02757

In the above code we declare a variable _animation and assign it value idle as an initial state and when we click on a button we change_animation to a suitable animation

Our animation function

Demo

Step 7 (Optional) — Additional

In order to get full control of the animation we need to use FlareController

we need to make our stateful widget to implement FlareController and our FlareActor will be like this.

and we need to override few methods from the FlareController

Njoy make your app feel real

Thanks for your time.

Hope you like it, if yes clap & share.