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 😜