Building Credit Card Entry Form Using Flutter
Few days ago I was browsing on Twitter when I came across a nice Credit Card Entry Form for web and mobile devices. I decided to take that it as a challenge and implement it using Flutter. The complete source is available here.
The app consists of three main widgets as defined below:
- CreditCard — The main widget, which contains the user entry TextFields
- CreditCardFront — The front of the credit card
- CreditCardBack — The back of the credit card
The app also uses flip_card package to perform the flip animation between the front and back widgets.
Credit Card Front
When the app is loaded the user is presented with the empty credit card placeholder. The CreditCardFront widget is responsible for this interface. The interface for CreditCardFront widget comprises of Stack widget and Positioned widgets as shown in the implementation below:
We have used the ClipRRect function to clip a circular region to make the Container rounded corners. We also used a blur background for the container by providing an image with BoxFit.cover fitting.
The CreditCardFront constructor takes in credit card number and name as arguments which are later injected into the widget.
Credit Card Back
The back of the credit card is just a leaner version of the front. The only difference is that it does not display the company logo, credit card number and the name.
The CreditCardBack constructor takes security code as an argument which is later displayed on the back of the card.
Credit Card
The CreditCard widget is the parent widget for the CreditCardFront and CreditCardBack. The CreditCard widget also hosts the FlipCard widget which is responsible for flipping from front to back and vice versa.
The FlipCard flips based on the value of the cardKey. We can toggle cardKey value based on custom conditions. Below you can see how we toggle cardKey based on whether the user has clicked on the security code.
Currently Flutter does not support bindings. It would be great if Flutter team can invest time adding two-way binding to the Flutter framework as it will greatly reduce the overall code.
You can find the final animation below:
If you liked this article and want to support my work then check out my courses on Udemy. I am currently working on an intermediate course on Flutter which will be available in the future.
Please don’t use the credit card number in the above video, it is my real credit card. Thanks!
