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',
),

• 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
        ),
      ),
    );
}

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,
        ),
      ),
    );
}

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,
        ),
      ),
    );
  }
  

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,
        ),
      ),
    );
  }

Repeat in both direction

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CreditCardSlider(
          _creditCards,
          repeatCards: RepeatCards.bothDirection,
        ),
      ),
    );
  }

Card click listener

@override
Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: CreditCardSlider(
                _creditCards,
                onCardClicked: (index) {
                    print('Clicked at index: $index');
                },
            ),
        ),
    );
}

• 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',
)

Credit card with Image background

CreditCard(
    cardBackground:
        ImageCardBackground(AssetImage('images/background_sample.jpg')),
    cardNetworkType: CardNetworkType.rupay,
    cardHolderName: 'The boring developer',
)

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',
)

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

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,
)

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)),
)

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,      
    ),
  ),

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,
    ),
  ),

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,
    ),
  ),

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,
  ),

List of companies

• American Express

    company: CardCompany.americanExpress
  

• AxisBank

    company: CardCompany.axisBank
  

    company: CardCompany.axisBankWhite

• Citi Bank

    company: CardCompany.citiBank
  

• HDFC

• HSBC

    company: CardCompany.hsbc
  

• ICICI

    company: CardCompany.icici
  

• INDUSLAND

    company: CardCompany.indusland
  

• Kotak

    company: CardCompany.kotak
  

• SBI

    company: CardCompany.sbi
  

• Virgin

    company: CardCompany.virgin
  

• YESBANK

    company: CardCompany.yesBank