Interactive password validation UX in Flutter using Flare (2Dimensions)
Building a creative password animation entry with Flutter and Flare || Flutter level: Intermediate, Flare level: Beginner
Hello people! This article will tell you how to build a cool and simple password entry animation in Flare and consume it in Flutter!
If you want to directly jump to code, you can clone it from here:
Here is the link to Flare project:
This article will cover a single animation object, you can then copy the same method to build multiple objects and manipulate their animations in Flutter.
So, we are going to build something like this:
This article will have two parts, first will be building a single object animation in Flare. The second will be the consumption of Flare export in Flutter and manipulating animations to create something like above.
PART I — The Flare thing!
Step 1
Open 2dimensions.com and create a new Flare file. If you don’t have an account, you can create one.
Step 2
After creating a new file, import an asset from the bottom left corner of the Flare studio. You can import images as well, just as I did.
Flare has two tabbed windows majorly, which you will find in the top left corner (something like this)
The design is majorly used to create assets and import them while the animate is used to create animations.
By default there is an artboard placed in Flare, in which you can place your assets so that they can be animated.
Step 3
Now, drag the asset you imported, to the artboard and you will see something like this:
Step 4 — Let’s animate this!
Click on the animate tab. You will see a timeline in the bottom, here you will put animation frames!
Step 5 — Follow the GIF below!
Look at the 2-minute GIF below once or twice to understand some simple steps to create a single object animation. All the steps that are performed in the gif, are separately explained further in this article.
Visual tutorial makes it easy to follow and test whether you are going in the right direction or not.
Explanation of steps in the GIF
The first thing is to reduce the timeline space in order to get it zoomed enough to work in a span of 1 second.
Second, bring the timeline cursor to the beginning so that our first frame starts at zeroth second.
Press shift, click and hold the little red square affixed with your picture, and very slightly drag it outside or inside. As soon as you move it slightly, you will find a rhombus keyframe added in the timeline. This shows that your animation will start with this image size. Release the click-hold and the shift button now.
You can jump to the code repo any time you want!
Move the timeline cursor a few milliseconds ahead of the start. This is the place where your image will zoom in bigger. Now, do the same thing, press and hold shift, click and hold the little red square and drag it outside and the image will start to expand.
Expand the image as much as you would like to. This will also create a new keyframe on the timeline. Now copy this keyframe and paste it a few milliseconds further on the timeline. We did this so that our image expands and stays expanded for a few milliseconds in order to create an inertia effect.
Now copy the first zeroth time keyframe and paste it at the end of the timeline as shown in the GIF. This is because we want our image to come back to its original state at the end.
I adjusted the timeline as well because 1 second was too much for the animation.
Creating ease effect in the animation
Add interpolation to all the keyframes in order to create an ease effect in the zooming in and out of the image.
Select each keyframe one by one and set the interpolation to cubic from the bottom right corner of the Flare web. You can set the cubic curve as per your wishes, just check and see which curve brings what kind of ease in your animation.
Last important thing
The last most important thing is to set the animation name in the animations area at the bottom left corner. This name is the one which will let you trigger the animation from your Flutter code.
After all of this, you are ready to export the file to be used in Flutter. You will get an flr file after you export it.
PART II — Let’s jump to Flutter code!
I have used a different exported file for each validation animation because my business requirement had the chance of getting more than one animation triggered at the same time. You can use different approaches as well.
Flutter code is pretty simple. First you need to add the Flare package in your pubspec.yaml.
FlareActor(
'assets/exported.flr',
alignment: Alignment.center,
fit: BoxFit.contain,
animation: 'animate',
)The first argument is the Flare exported file placed in your assets folder just like normal image files that you keep and declare in pubspec.yaml.
Animation property takes a string, which is the same string which we declared as our last step in Flare web. The name of that animation is to be placed here.
The green check circle is created in Flutter code and not through Flare.
In my code, which you can find here, I have created a row and declared five FlareActor widgets each with different file name and different animation strings.
Initially all the animation strings are set to empty so that the animations don’t run as the page loads.
And I have placed a TextFormField with a textChanged function which handles all the conditions and checks whether the string is now validated based on my conditions. As soon as the validation occurs, I am setting the corresponding animation string to the one which I assigned in Flare web.
I have used validators package to validate upperCase, lowerCase and numeric strings. I have also created a string of special characters to check if the typed letter lies in that string. You can use your own style of validation.
Here is the complete code. You can always create pull requests in order to make this better and generic. Ideas always welcomed!
Cheers!
