How to make a Flip Card animation with Flutter
Intro
As developers, we have all had that one project where we had to find a solution on how to implement some seemingly hard UI features. In the case of my app, Drinkly, that was making a set of cards that swipe Tinder’s, and that flip on tap. My solution to this problem was the flip_card package. This package is very popular by the Flutter community, with over 400 likes on pub.dev, and is currently being maintained by me.
Getting started
As with using any package, first, we have to add the package to our project;
After doing this, we can start using the code in our app. At this point you can also manually import the package to your file, or let your IDE do that for you automatically when you first use the package.
We can create a simple flip card widget like from the image at the start of this article with a very small amount of boilerplate code.
And poof, that’s it. This package makes it simple to create such an animation, that would usually take a lot more time to make. There is also a lot of possible configuration for tweaking the functionality of the package’s behavior, for example increasing how fast the cards flip when touched, animation style (see image below), and more!
Finishing thoughts
This package is very powerful and lightweight, while also super easy to implement and with a lot of possible configuration options. It will also soon be updated to add more flipping styles and also fine-tune the animation. If you also want to add something to the package, you can make a pull request at the package’s repo. Thanks for reading and have a nice day!
