Flutter – Delayed Animations

Hi Friends,

Hope you are all well. This is a sequel to my previous post on animations here. In that post we were talking about how to do basic animations in your flutter apps. In this post we’ll see how to add a delay between two or more animations so that they happen in a nice fashion in your app.

To learn the basics of flutter get my course – Click here.

Other flutter courses – here. (Affliate link)

Let’s begin.

A screencast of this post.

 

We’ll be doing an offset & delay animation in this post. In other words you’ll be doing something like this.

Webp.net-gifmaker (6)

As you can see the elements of the screen all appear in the same style of animation but there is a smooth delay in their order of easing in which enhances the effect. This is called an offset & delay animation.

Alright, now that we know what we are about to do, how do we do it.. ?

Simple, we already wrote code here to do a simple ease-in animation here right ? Let’s have a look at the code

Alright, this code is for a simple ease-in animation right ? Now simply introduce delays to get our desired affect.

Wow, that’s too much code (and too much brackets, ikr)

Let’s break this down.

As you can see from the above snippet, I have created a couple of animations that include a small delay. That is when the animationController.forward() is called. i.e., the animation is triggered, these 2 animations will get called with a small delay.

And inside the build function.

I have three Transform widgets, that help us in moving the animation along the x axis. And if you notice the Login heading it’s transform moves based on the value of the animation whereas the other two Transform widgets move along with the values of delayedAnimation and muchDelayedAnimation respectively. In other words, each and every ease-in will happen at a small interval of time thereby giving that smooth fly-in effect.

Now run the app and see the effect.

Hope this helped you guys. In our forth-coming videos let’s see different variations of animations. If you found this helpful kindly share it with someone and help them too.

Donate to keep this site alive – https://www.paypal.me/RajaYogan

Join our flutter community – https://discord.gg/bCSDgVG

Thanks for reading.. Peace.. :)

Liked it? Take a second to support admin on Patreon!