Animated Stepo in Flutter

When it comes to user experience , animations are one of the essential things that play a major role in enhancing it, making your application more interactive and makes your users excited to use the application.

I was just exploring animated components on dribble where I came across this design and found it quite interesting and useful. So, I thought of bringing this stepper design to code in flutter.

https://dribbble.com/shots/5687260-Stepper-XXII

Why I used Flutter?

Since I have been a flutter developer for almost an year now, I personally feel flutter has a great support for animations. We can achieve much more than expected with less effort and time.

If you are ready, let’s get started!

P.S: This article considers that you have a basic understanding about Flutter widgets and working environment.

Components and the Animations required

Background scaling animation (Button click effect)

To animate the effect of button click, I used the scale property of Transform widget to scale down and scale up the size of button for a given duration as follows:

Create an AnimationController and Animation object for scaling animation

Now wrap the container widget with Transform widget and use scale property for scaling the widget.

To start the animation, just call

scaleAnimationController.forward();

since we have added

scaleAnimationController.reverse();

in status listener of the animation, so it will rescale the widget back to its original scale thus giving it a bouncy effect.

Moving Text (Translation animation)

Now to move the text out from container and backwards in we will use translate feature of the Transform widget with animating the offsets.

Create an AnimationController and Animation object for translating animation

Now wrap the text widget which is to be translated inside Transform.translate and use the offset property:

This will make the text animate from center to right position. Now to start the animation just call :

textAnimationController.forward();

In order to move the text in opposite direction, just change the end value to negative. So, for animation to move in negative direction your text animation should be :

Moving Text (Translation animation)

As it is noticeable that travel distance for icon is half the text, So for icon animation the logic would be same, but the only difference is the end value for icon animation and duration would be half of the end value of text animation and text animation duration respectively.

So the animation and controller for icon would be :

Now wrap the text widget which is to be translated inside Transform.translate and use the offset property:

Syncing all the animations

Since now we have all the widgets ready, they are just to be added to stack and then on the button click the animations should work in a given series to achive our goal. I have created a method i.e. handleOnTap that does the magic:

To achieve the goal we need to implement this for both right side and left side. Right side is to increment the counter and left side is to decrement the counter.

Conclusion

Demo gif from flutter_stepo

Hurray..! , we have successfully converted the above design into code by observing the animations carefully and applying a few animations properties of flutter.

To use Stepo as a widget with customisations you can download the package from pub:

stepo | Flutter Package

or

You may checkout the full source code for the project on Github:

hd-motion/flutter_stepo

Thanks for reading the article. Feedbacks are always welcome. If you like it please hit the clap button and share the article.

You can connect with me on Github, LinkedIn & Twitter.

Thanks to Damanpreet Singh for help and support.