How to create a beautiful hover effect on a card in Flutter
In this tutorial, I will expand a card with AnimatedContainer to make it look better.
Introduction
Writing Dart/Flutter articles is a great way to become a better software engineer and is often seen as a skill for senior developers. Writing articles it’s important because you are contributing to the community by sharing your learnings with other developers. Also, you can revisit the article whenever you want.
For this reason in 2021 I decided to write some articles while studying Flutter and share some basic knowledge on some Flutter widgets.
On this basis, in this tutorial, I decided to combine my interests (coding and football) and create this interactive hover effect on this card.
In this tutorial, I will use MouseRegion widget to understand when the mouse enters or exits in the region and use AnimatedContainer widget to animate the change of the container, expand the card and show more info about the player.
And then when the mouse enters the region, the card expands and shows the other info.
What you’ll learn
The tutorial cover the following material:
AnimatedContainer
AnimatedOpacity
MouseRegion
AnimatedContainer
AnimatedContainer is an implicit animation integrated into the FlutterSDK that will automatically animate between the old and new values of properties when they change using the provided curve and duration.
