Flutter — Password validation animation
A good way to get to grips with a framework, I think, is to try and make strange UI.
I found this playful password validation concept on Dribbble:
This design forces me to try and understand Flutter animations a bit more, as well as rotation, text input watching etc..
TL;DR … here’s the code on GitHub.
I set about this in a simplistic way.
Basics
I wanted to get the basics working first, so that was a simple Card with a list of 4 requirements. A TextField and a FlatButton .
Validation
Add a TextEditingController , add a Listener and compare the String to a few Regular Expressions. When they meet, then add a strike through to the TextStyle . That gave me the basic requirement.
Rotation
The card need to be rotated. Luckily we can just wrap the Card in a Transform.rotate widget, apply an angle and we’re done.
Prettify
To get the paper effect, take a look at the code, it involves a few Rows inside Columns with coloured separators and SizedBox ‘s for spacing. The validation items are also in a fixed width font, so I added UbuntoMono from Google Fonts.
As for the views underneath the card, I added a semi transparent black circle, a lock icon (from Icons ) and a Yellow Card slightly rotated. Many magic numbers were used in the creation of this code (sorry, not sorry) 😂
The Animation
Here’s why I attempted this design, the animation is playful. The text jumps right, and returns and then an animated strike through. On the way back a jump right, return and the strike is removed.
I created a StatefulWidget as it’s going to need to handle the animation, and passed in the title, and whether it was validated. (will update that parameter from the TextEditingController .
You will see in the ValidationItem that I have 2 AnimationControllers and 2 Animation values. One value for the jump, and one for the strike through.
The jump right
For this I decided to animate a SizedBox ‘s width between the margin line and the Text widget. So I animate from 8 to 12, and then reverse.
The strikethrough
To animate the strikethrough I had to create a CustomPainter , see the StrikeThroughPainter at the bottom of the ValidationItem class. This paints a thin rectangle through the middle of the Text widget, it takes a percentage and then only paints to the width*percent.
I thought this would be enough, but I had to listen to didUpdateWidget so that I could start, reverse the animations.
Conclusion
I found animation a bit tricky, but I think that’s just because it is so much different to how it would be done in Android development.
I love the animation, it looks great and it’s very clear to the user.
Don’t judge the code to much, it was a quick hack when I was bored 😜
