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-

theboringdeveloper

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.

Credit Card Slider— Flutter

I got some great feedback. So I decided to create a package to make it easy for you to integrate it in your applications.

credit_card_slider | Flutter Package

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.

More flutter blogs-

Instagram like in-app notification — Flutter

Live templates — Flutter

Instagram stories swiper — Flutter

Update App — Flutter

Common bottom navigation bar made easy — Flutter

Twitter Spinner — Flutter

https://www.twitter.com/FlutterComm