credit_card_slider

Description:

credit card slider

Credit Card Slider - Flutter #
This project provides a credit card slider
Author: theboringdeveloper
Medium
Instagram
Screenshots #

Creating Credit Cards #
Basic Credit card #
CreditCard(
cardBackground: SolidColorCardBackground(Colors.red),
cardNetworkType: CardNetworkType.visaBasic,
cardHolderName: 'The boring developer',
),
copied to clipboard


Creates a credit card with a solid background of red color
Credit card of type visa
Shows a card holder name

Creating Card Slider #
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: CreditCardSlider(
_creditCards, //List of credit cards
),
),
);
}
copied to clipboard
Changing percent of upper card shown #
Use field percentOfUpperCard of CreditCardSlider
NOTE: Value must lie between 0 and pi / 2
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: CreditCardSlider(
_creditCards,
percentOfUpperCard: pi / 2,
),
),
);
}
copied to clipboard

Specify initial card #
NOTE: Added in 1.0.1
You can also specify initial card index to appear in slider


initialCard is 0 index based


If not specified, initialCard is 0
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: CreditCardSlider(
_creditCards,
initialCard: 2,
),
),
);
}
copied to clipboard


Repeat cards #
NOTE: Added in 1.0.1
You can also repeat cards in down or both direction (up and down)
Repeat in down direction only #
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: CreditCardSlider(
_creditCards,
repeatCards: RepeatCards.down,
),
),
);
}
copied to clipboard

Repeat in both direction #
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: CreditCardSlider(
_creditCards,
repeatCards: RepeatCards.bothDirection,
),
),
);
}
copied to clipboard

Card click listener #
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: CreditCardSlider(
_creditCards,
onCardClicked: (index) {
print('Clicked at index: $index');
},
),
),
);
}
copied to clipboard

Added in 1.0.0+2

Card Background Types #

Solid Color
Gradient
Image

Credit card with Gradient background #
CreditCard(
cardBackground: GradientCardBackground(LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [Color(0xFF4AA3F2), Color(0xFFAF92FB)],
stops: [0.3, 0.95],
)),
cardNetworkType: CardNetworkType.visaBasic,
cardHolderName: 'The boring developer',
)
copied to clipboard

Credit card with Image background #
CreditCard(
cardBackground:
ImageCardBackground(AssetImage('images/background_sample.jpg')),
cardNetworkType: CardNetworkType.rupay,
cardHolderName: 'The boring developer',
)
copied to clipboard

Adding Credit card number #
cardNumber field of type string
CreditCard(
cardBackground: SolidColorCardBackground(Colors.black.withOpacity(0.6)),
cardNetworkType: CardNetworkType.visaBasic,
cardHolderName: 'The boring developer',
cardNumber: '1234 1234 1234 1234',
)
copied to clipboard

CreditCard(
cardBackground: SolidColorCardBackground(Colors.black.withOpacity(0.6)),
cardNetworkType: CardNetworkType.visaBasic,
cardHolderName: 'The boring developer',
cardNumber: '1234 **** **** ****',
)
copied to clipboard

Adding a credit card company #
CreditCard(
cardBackground: SolidColorCardBackground(Colors.black.withOpacity(0.6)),
cardNetworkType: CardNetworkType.visaBasic,
cardHolderName: 'The boring developer',
cardNumber: '1234 **** **** ****',
company: CardCompany.hdfc,
)
copied to clipboard

Creating a custom company card #
CreditCard(
cardBackground: SolidColorCardBackground(Colors.black.withOpacity(0.6)),
cardNetworkType: CardNetworkType.visaBasic,
cardHolderName: 'The boring developer',
cardNumber: '1234 **** **** ****',
company: CardCompany(Image.asset(imagePath)),
)
copied to clipboard
NOTE: - List of companies available at end
Adding Valid Till #
NOTE: If Validity is added, valid thru must be added. Valid from is optional
CreditCard(
cardBackground: SolidColorCardBackground(Colors.purple),
cardNetworkType: CardNetworkType.visaBasic,
cardHolderName: 'The boring developer',
cardNumber: '1234 **** **** ****',
company: CardCompany.sbi,
validity: Validity(
validThruMonth: 1,
validThruYear: 21,
),
),
copied to clipboard

Adding Valid From and Valid Till #
CreditCard(
cardBackground: SolidColorCardBackground(Colors.purple),
cardNetworkType: CardNetworkType.visaBasic,
cardHolderName: 'The boring developer',
cardNumber: '1234 **** **** ****',
company: CardCompany.sbi,
validity: Validity(
validThruMonth: 1,
validThruYear: 21,
validFromMonth: 1,
validFromYear: 16,
),
),
copied to clipboard

Hiding chip #
Set showChip to false
CreditCard(
cardBackground: SolidColorCardBackground(Colors.purple),
cardNetworkType: CardNetworkType.visaBasic,
cardHolderName: 'The boring developer',
cardNumber: '1234 **** **** ****',
company: CardCompany.sbi,
showChip: false,
validity: Validity(
validThruMonth: 1,
validThruYear: 21,
validFromMonth: 1,
validFromYear: 16,
),
),
copied to clipboard

Changing Text color #
CreditCard(
cardBackground: SolidColorCardBackground(Colors.white),
cardNetworkType: CardNetworkType.visaBasic,
cardHolderName: 'The boring developer',
cardNumber: '1234 **** **** ****',
company: CardCompany.sbi,
validity: Validity(
validThruMonth: 1,
validThruYear: 21,
validFromMonth: 1,
validFromYear: 16,
),
numberColor: Colors.black,
validityColor: Colors.black,
cardHolderNameColor: Colors.black,
),
copied to clipboard

List of companies #


American Express
company: CardCompany.americanExpress
copied to clipboard





AxisBank
company: CardCompany.axisBank
copied to clipboard



company: CardCompany.axisBankWhite
copied to clipboard



Citi Bank
company: CardCompany.citiBank
copied to clipboard





HDFC


HSBC
company: CardCompany.hsbc
copied to clipboard





ICICI
company: CardCompany.icici
copied to clipboard





INDUSLAND
company: CardCompany.indusland
copied to clipboard





Kotak
company: CardCompany.kotak
copied to clipboard





SBI
company: CardCompany.sbi
copied to clipboard





Virgin
company: CardCompany.virgin
copied to clipboard





YESBANK
company: CardCompany.yesBank
copied to clipboard