The animation is the word that always fills joy in users as well as in developers when it comes to experiencing better user-friendly UI designs. here in Flutter, there are some inbuilt animations provided by flutter but when we need to show something better than this and then we use Flare.
So here I am going to give a little introduction of Flare, Flare is basically used for animations and it helps to get a better UI experience to the user.
for Flare we use 2Dimensions and here you have to create your account if you have not created it before then you start working on it.
In this tool, there are two options Design and Animate, in design first you choose design patterns or images and then you animate all these things, you can also import images like png and SVG according to your choice, in design part, there are many options here you can choose shapes of designs, can rotate, can set scale can also add other features,
while you are designing the basic layout you mainly focus on the position of components and when you want to move your components at different position you have to fill that x and y value with clicking that box beside it and you will observe it is moving with its respective position,
after this we come in animation section here by clicking on each component which you added in a design you can move it according to your choice by giving positions in X-axis and Y-axis when you enter the position of a particular component and click on the box next to it, it automatically moves into the next place.
you can observe it in a video added below where every component is taking place of the component next to it.
This was the basic overview of the tool and we have to move in the next section where we would add it in our App.
How to use flare in Flutter:
As we know that flutter does not have the support of flare so we can implement it by using a plugin.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec.yaml file.
Dependencies:
flare_flutter: any
after adding this dependency you have to add your flare file in assets
assets:
- assets/flutter_flare_new.flr
How to implement in dart file:
Now after adding dependency and asset, you need to implement it in your code respectively
https://gist.github.com/shivanchalpandey/af45eb9e87812cb47ff6105814d9265e#file-flare_demo-dart
In the above code library of flare has been imported and here a widget FlareFactor has been used to implement the flare. and it is wrapped with Inkwell that makes it interactive when you tap on it, it starts again.
here in the video posted below, you will see how fonts are moving around a button and when you tap anywhere in that circle it starts again, but flutter also provides the functionality by which you can allocate a specific area for tap. It means in different parts of animation you can perform different actions.
So this was the basic introduction of Flare where we did a simple example and you can learn at least how it can be started?
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
