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)
