Flutter Design Challenge : LogIn Concept
Building LogIn screen animation in Flutter.
I’ve been intrigued by different kinds of animations and macro-micro interactions that we see in apps, websites, games etc from very early on. Thus I started exploring animations with flutter coze of that liking. And building beautiful UIs and animations is the speciality of flutter and it makes this quite easy once you understand it.
Let’s Start!
Analysing Static Design :
- BlueBox + It’s childrens
- BlueBox: It is the very first major section of animation. If we pay attention then we can see that the logo and the bottom text row are always within it so it makes sense to assume them as part of blue container.
2. WhiteBox + Login Form:
- WhiteBox : It’s the second major section. It has the Login form inside of it.
Analysing Motion Design :
- BlueBox Animation : It has only one type of animation and that’s related to its dimension(height) and three phases .
- First is when it begins from bottom of screen and expands in height till it fills the screen completely.
- Second is when its height remains unchanged for a moment before it enters phase three.
- Third is when it reduces its height to half of the height of entire screen. - WhiteBox Animation : It starts from the bottom and expands till it fills the half of the screen height.
- Relation between Blue-White Box : If you look closely then you’ll realize that when the blue box enters its third phase ,at the same time, white box starts animating from bottom.
- Fade-Slide Transition Animation : The bottom row for Log In/Sign Up text and the form have a fade-in transition mixed with slide-in transition. Start-End time, duration and speed for both of them is the same so we can reuse the implementation for one of them for another.
Here’s a visual representation of intervals for different animations/transitions for our elements. It’s a good habit to visualize the intervals this way so it gets easier to manage those in code. We’ll be referring to the intervals drawn here in the code.
That’s a little bit theory, but understanding this little details will help us implement the design easily. Now , let’s dive into the implementation.
Implementation :
- Base Code: We’ll start with this base code.
Here we declare the _animationController and initialize it in the initState().
We are using AnimatedBuilder which will rebuild the widgets whenever the animation value of the animation object passed down to it changes.
AnimationController is also extended to animation object itself so we can pass it to AnimatedBuilder.
2. BlueBox Animation:
As discussed above we need to have an animation that would determine the height of the BlueBox for three different phases it has.
We are using TweenSequence to create the height animation. Why? Coze the height animation doesn’t have a single starting and end value for entire duration of animation. It has 3 different transitions(or phases of BlueBox) for height. The below graph explains it nicely.
- .chain(): We use “.chain()” method to chain typical Tween with CurvedTween to give it its own transition curve.
- weight: An arbitrary value that indicates the relative percentage of a [TweenSequence] animation’s duration when [tween] will be used.
- .animate(): Returns a new [Animation] that is driven by the animation passed to it but that takes on values determined by the object on whom the “.animate()” is called.
- Interval : We also set the height animation interval to start from 0 and end at 0.75(exactly 3 seconds) of the total animation duration that is 1.0(4s).
Result :
Looks good, but not the desired effect that we want. Right now the BlueBox is aligned to the bottom of column. But we want it start from bottom and align at top for rest of animation.
This is actually not a problem at all, once we add the WhiteBox from bottom, you’ll see that it gets aligned properly at the top as the WhiteBox pushes it to the top from bottom as it acquires the bottom portion.
3. Logo Animation : Wasn’t able to get the original logo so we’ll just use a simple Icon. The logo has two kinds of transitions.
- Fade Transition : When the phase one for BlueBox finishes, it fades in. The duration is somewhere around 300ms for fade transition.
- Scale Transition : When the phase three for BlueBox starts, you can see that the size of logo also decreases as size of BlueBox decreases.
Let’s create two animation objects for this two transitions and pass them to the Logo to animate it.
We are using Opacity widget to change opacity of logo by getting value from “logoOpacityAnimation”. Also update the child size depending on value from “logoSizeAnimation”.
4. Fade-Slide Transition Animation : There are two elements that are using this animation, one is the row of LogIn and SingUp text and other is the Login form.
We can use the combination of Opacity and Transform.translate widget to achieve this.
First we declare and initialize the “commonFadeSlideAnimation” object which we’ll use to animate the row and the form.
Then we create the “SlideFadeWidget” which takes in the animation object and the child and applies the Slide-Fade transition to the child.
We’ll have initial offset equal to device width in X-axis then it would offset to center as the animation progresses.
Final Result :
That looks sweet. We got the first major section done nicely. We are almost there :)
Take a little break now, it was lot to consume. You can go through this section once again before we move to implementing the WhiteBox section.
5. WhiteBox Animation : We’ll be creating another animation object that will control the height of WhiteBox.We already have the interval for the WhiteBox animation decided in the “Analysing Motion Design” section.
So we animate the height of the SizedBox according to the value from animation object.
We also passed the LoginForm wrapped with SlideFadeWidget which will give that nice Slide-Fade Transition to it.
Finally calling “_animationController.forward()” to start the animation.
Let’s see how it looks now!😁
Final Result :
That looks wonderful. We did it 🙌
Summary :
- We were able to implement the design properly. All the transitions and animations for different elements were implemented successfully. Some minor details like the transition timings might be slightly off though we can always adjust them as our need.
- We used Explicit animations to achieve this. Learned about tweens, sequenceTweens, and some interesting methods like “.chain()” which can be used to chain different animations with each other.
- Also we learned to visualize the whole process, different intervals for transitions before coding so it made easy for us to implement the design.
Hope you enjoyed this Flutter Design challenge. I’m hoping to do more such design challenges in upcoming articles.
You can find the source code here.
👏 Enjoyed the article! Would appreciate the clap :)
🚀 More such articles coming where we explore flutter and other interesting stuff in app development.
👋 Follow up for upcoming articles if you enjoyed reading and learning from what I write.
💬 Let me know what you liked and what you would like to read in upcoming articles.
