Animating the Login Screen

Home Screen Animation

On this screen, the animation starts when the user clicks the Sign In button. The animation in this screen can be broken down in the following parts:

Design the button

Login screen has this button component on it:

Note the width property of the Container widget. This property is going to play an important role in the button’s initial animation where it is squeezed into a circle.

Initial setup prior to building the animation.

We need to tell the app to start the animation only when the user has clicked the Sign In button. For that, we create an AnimationController class that is charged with management all of the Animations.

In simple words, AnimationController controls the animation. This class is one of the big actors of the animation framework in Flutter. It extends the Animation class and adds the bare minimum elements to make it usable. Despite its name, this class is not a controller of the animation object, but of the animation concept.

What AnimationController basically does is that it takes the animation from one double value to another in a specified time.

The basic constructor of an AnimationController looks like this:

AnimationController needs a TickerProvider to obtain their Ticker . If you are creating an AnimationController from a state, then you can use the TickerProviderStateMixin and SingleTickerProviderStateMixin classes to obtain a suitable TickerProvider . The widget test framework WidgetTester object can be used as a ticker provider in the context of tests.

We initialise this constructor inside a initState function:

The only thing we need to focus on here, is the Duration widget. This widget defines the total time which the animations of the Login screen have to occur.

The LoginScreenState is a stateful widget and creates the AnimationController specifying a 3000 milliseconds duration. It plays the animation and builds the non-animating portion of the widget tree. The animation begins when a tap of the button is detected on the screen. The animation runs forward, then backward.

Button Squeeze animation (slowed down)

I have used the Tween class along with the CurvedAnimation widget. Tween specifies the point at which the animation should begin and end . At the beginning of the animation, the width of the button is 320.0 pixels, by the end of the animation the button is reduced to the width of 70.0 pixels. The height of the button remains the same. Duration is defined by the Interval widget which is called inside the CurvedAnimation widget. Interval basically tells the app to squeeze the button into a circle within 250 milliseconds.

Once the button is squeezed into a circle, we need the Sign In text to disappear.

I have used a conditional statement to achieve this. If the width of the button is greater that 75.0 pixels, then the button should contain the Sign In text. Else, the button should contain a CircularProgressIndicator .

Loading Animation (slowed down)

Next, I want the button component to zoom out. To do this, simply create a Tween widget that will tell the button to grow from 70.0 pixels to 1000.0 pixels.

But the Tween in itself cannot animate the button. For that we need to use animate() to link the Tween with a CurvedAnimation widget, which contains an Interval widget which tells the app to complete the animation between 350 milliseconds.

Button Grow Animation (Slowed Down)

We also need to simultaneously remove the CircularProgressIndicator from the button. For that we again make use of conditional statements.

While the buttonZoomOut.value is equal to 70, the buttonSqueezeAnimation will work. And when the Interval from the above code snippet goes above 0.550, buttonSqueezeAnimation stops and the buttonZoomOut animation begins.

Similarly, if buttonZoomOut is still at 70.0 pixels, then the height is changed to 60.0 pixels. Else, the height is also made equal to buttonZoomOut’s value.

Now if the buttonZoomOut.value is less that 300.0, then we keep the CircularProgressIndicator inside the button. Else, we replace it with a null.

Here is the code for it:

Finally, we want the button container to grow and cover the entire screen. For this we will first remove the padding ( top and bottom ) of the whole page and radius of the container should also be negligible. The button should now grow and cover the entire screen with a color transition animation.

Cover Screen Animation (slowed down)

Once the animation is complete, the user is navigated to the home screen.