Credit card slider made easy— Flutter
Welcome! Today we will learn how to create an awesome credit card slider the easy way.
Recently I have been blogging more on Instagram-
Lets begin
So about 4 months ago, I posted a blog on medium about how to create a credit card slider on medium and also posted on reddit.
I got some great feedback. So I decided to create a package to make it easy for you to integrate it in your applications.
Lets use it to create an awesome credit card slider
0. Add credit_card_slider package to pubspec.yaml
1. Create a basic credit card
Here is how it looks like-
2. Create a credit card with gradient background
Here is how it looks like-
3. Create a credit card with image background
Here is how it looks like-
4. Now lets add the above credit cards to CreditCardSlider
Lets check the output
Easy and cool right?
Lets move up a level
0. Create a credit card with card number
Here is how it looks like-
1. Create a credit card with a company logo
Here is how it looks like-
NOTE: List of available company logos here
You can also add a custom company logo
2. Create a credit card with valid from and valid till
Here is how it looks like-
3. Now lets add the above credit cards to CreditCardSlider but this time change the percentage of upper card visible
Lets check the output
Cool right? :)
Some other things you can also do-
0. Hide the chip
Set showChip to false
1. Change text color
Feel free to contribute your ideas to the package.
Thank you for staying till the end. Don’t forget to clap if you liked it.