Flutter — Bouncing button animation

How many times in your experience as a user have you clicked a non-animated button multiple times because you didn’t know if it actually had sent the action you requested? How many times did you do the same thing if the button had even a slight animation telling you it was actually clicked?

What is an animation and why do we use them?

When it comes to creating a good user experience for your app, adding well made and fluid animations is crucial. They work as a visual feedback for the user’s actions and can also provide meaning of interaction and reassurance.

Animating buttons is what this article is about, specifically we’ll build a small bouncing animation that is triggered when the user clicks a button.

First of all, the button layout

The button layout is based on a simple container with a text widget in its center.

Let’s get to the animation

We will need to use the setState() and dispose() function, therefore we will extends a StatefulWidget.

We’re all set to start working on our animation.

Lets implement SingleTickerProviderStateMixin and define the only two properties which we’ll need to create the animation.

It’s now time to initialize our _controller by overriding initState() and dispose of it by overriding the dispose() function

Next, we’re defining two functions, one for when the button is tapped down, and the other for when the button is released, the former will tell our controller to go forward, and the latter to go in reverse

Finally, in our build function we set our scale variable and let a GestureDetector handle the tapDown and tapUp properties and then scale using the Transform widget

And this is the final result

Where can I find the code?

The code written in this article is available at the following GitHub Repo

Conclusion

That’s all folks! This was a quick article on how to create a simple yet effective animation, that I hope will help you improve your app UX.

About the author

You can find me on

- Instagram: Daniele Cambi
- Twitter: @dancamdev
- Email: dancam.dev@gmail.com

Daniele Cambi (@dancamdev)