Animations In Flutter

Animations are one of the essential things that enhances the user experience, makes your application more interactive and makes your users excited to use the application.

This is My First Article in Medium and I thought of starting with a Cool animation example and Try to Cover the Basics of Animation in Flutter

Recommended Youtube Tuts (Flutter and Dart):

For Advanced:

OK, STOP

And Here is the Final Animation:

I call this an Elevation Animation…

why? You’ll Understand at the end of the tutorial

Nextly,

Here’s the Basic Code:

The Above code Generates an app with UI theme as light(SystemUiOverlayStyle.light) and Creates a Scaffold Widget with an Appbar Titled as ‘Animation’ and a Container as a child.

These Give access Ticker objects, The ticker objects listen to refresh rate and return numbers Which are Then provided to AnimationController for Further Animation

Ok, Now Create a Card with an elevation of value 30.0 inside a Container of a Center Widget

code:

We gave the Container width as “MediaQuery.of(context).size.width-100"

The MediaQuery.of(context).size.width returns a value Dynamic Width Based on Your Device and (-100) makes it looks Good we subtract it by 100.

Your Output Should be like this if you Run The app:

Ok, Now let's Create Animation and AnimationController Components in the Main HomePageState

In Order to Initialize the Animation, We need to override the initState() method and we need to initialize the AnimationController and Animation and provide Animation Values To it.

We providedvsync which prevents offscreen animations from consuming unnecessary resources and setting the duration as 1000millisecs(1 sec)

and we set animation values as Tween Component which begins with values 30.0 and ends with value “0.0” and {.animate(animationController)} and setState is to do change the animation State.

animation.forward() Begins the animation.

To Repeat the Animation Over and Over Again we Need to Listen For animation to Complete and reverse it and again. For that, we need a StatusListener and here it Goes:

Now your Output Should Look Like this:

Now Our {Future} Work is Going to be more Simpler, You may guess it by now!

We just need to add a card inside this card and Stack upon them Like this:

We Actually set the Values of Elevation to animation.value and We set the Padding in Order to Look Good.

And Looks like this:

And In Order to Start the Animation only when we Tap on the Center Card we need to add a Button as a child to the topmost card and set it's to onPressed value to start the animation when pressed. and Remove the Animation.forward() on the initState() method.

we need to do one more thing, which is to get that Beautiful animation in order to get that we need Couple of more aminationControllers and Animation value in which the AnimationControllers should begin the animation whenever the animation of the before Card finishes its Animation and reverse it as per its Card behind it.

Just Add Couple of more Animation, AnimationControllers with different names.

and the logic is Pretty Simple and will be Explained below:

Basically, what we have done here is “addStatusListener” to all the Animation Components and if the Last Card Finishes its Animation we want the Respective AnimationController of the previous to Start its Animation!

and Vice Versa!!!

Here’s the Final Code:

The Duration of Each Animation Can be Increased and Decreased by Changing the Duration of the AnimationController.

Glad! You Gave me a couple of Claps!😊😊

Related posts:

Yoga has its roots in the timeless Vedantic and Tantric Traditions of the Himalayan Masters. It’s a science designed to awaken each practitioner to their True nature through the healing, alignment…

The mysteries behind Agulu lake has been told as stories to new generations for decades. Some said that during the war the crocodile transformed into beautiful ladies and lured the enemies into the…

Musicians playing someone else’s song have to strike a balance between respecting the original and providing their own unique perspective. Truly great artists make interesting covers possible because…