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:
Ever got annoyed by the 'high standards' of password you are bound to set these days? Here is a concept of a small…dribbble.com
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.
I wanted to get the basics working first, so that was a simple
Card with a list of 4 requirements. A
TextField and 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.
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.
To get the paper effect, take a look at the code, it involves a few
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) 😂
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
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.
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.
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 😜
The latest Tweets from Tony Owen (@tunitowen). Android & iOS Developer. Now Flutter enthusiast 😀. Leeds, UKtwitter.com