Photo by RhondaK Native Florida Folk Artist on Unsplash

Slack is used in many tech companies for daily collaboration across teams and departments. If you have it’s app on your phone and open it, you will see a cool animation of on-boarding feature that shows user how the app works, how to use it and what you can do with it.

In today’s article, I will recreate this animation using animation APIs Flutter provides. So let’s get started.

Scope

For sake of the length of the article, we will recreate the animation of the first and second screen, as most of the implementation and it’s logic will be consumed by these screens. The last 2 screens will more or less have the same code as first 2.

Approach

Looking at the gif above, we notice that on the first screen, there are 3 different types of animations taking place, so we will use divide-and-implement approach by splitting the first screen into 3 sections (middle, top, and bottom), as shown below:

Middle section

When app launches, we see three images scaling-in one by one after the delay of the split of a second between them at the center of the screen.

2. Top section

The text appears out of screen at the top after all three images are rendered fully.

3. Bottom section

The page indicator, get started and sign in widgets appear simultaneously at one go.

Apart from the animation which is going to be our focus here, we will also make use of PageView and Page Indicator to help complete the screen.

Implementing the middle section

I took screenshots of the images that we are going to use from the original app and added into assets folder.

As we saw earlier, the images scale-in one after another. To achieve this, we will make use of Staggered Animation which helps us to animate sequentially using Interval that in turn is used to delay an animation. We will start by creating an AnimationController object.

AnimationController controller;

Then, we will create an animation object of type double for each image followed by creating Tween for each along with the interval.

Animation<double> firImgAnimation;

Animation<double> secImgAnimation;

Animation<double> thrImgAnimation; firImgAnimation = Tween<double>(

begin: 0.0,

end: 1.0,

).animate(

CurvedAnimation(

parent: controller,

curve: Interval(

0.050,

0.200,

curve: Curves.decelerate,



)

)

);

The begin and end values indicate that we want the image to render 100% and we will be using these values for all our animation objects. Since the first image’s animation doesn’t start immediately when the app launches, we’ll specify the start value of the interval from 0.05 and will last till 0.2. We will use curve type as decelerating (that starts quickly and end decelerating).