Flutter — Bouncing button animation

Daniele Cambi
May 24, 2019 · 2 min read

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)

Flutter Community

Articles and Stories from the Flutter Community

Daniele Cambi

Written by

A native android developer, that is on it’s way to learn Flutter while sharing his journey with the community.

Flutter Community

Articles and Stories from the Flutter Community

More From Medium

More from Flutter Community

More from Flutter Community

More from Flutter Community

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade