credit_card_slider 1.0.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 77

Credit Card Slider - Flutter #

This project provides a credit card slider

Author: theboringdeveloper

Medium

Instagram

Screenshots #

Demo 1

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

Demo 1

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

Demo 1

Repeat in both direction #

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

Demo 1

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

Gradient card

Credit card with Image background #

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

Image card

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

Image card

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

Image card

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

Image card

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

Image card

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

Image card

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

Image card

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

Image card

List of companies #

  • American Express

      company: CardCompany.americanExpress
    

Image card

  • AxisBank

      company: CardCompany.axisBank
    

Image card

    company: CardCompany.axisBankWhite

Image card

  • Citi Bank

      company: CardCompany.citiBank
    

Image card

  • HDFC

  • HSBC

      company: CardCompany.hsbc
    

Image card

  • ICICI

      company: CardCompany.icici
    

Image card

  • INDUSLAND

      company: CardCompany.indusland
    

Image card

  • Kotak

      company: CardCompany.kotak
    

Image card

  • SBI

      company: CardCompany.sbi
    

Image card

  • Virgin

      company: CardCompany.virgin
    

Image card

  • YESBANK

      company: CardCompany.yesBank
    

Image card

1.0.0 - 27 May 2020 #

  • Basic card slider

1.0.0+1 - 27 May 2020 #

  • Updating Description

1.0.0+2 - 27 May 2020 #

  • On card click listener added

1.0.0+3 - 3 June 2020 #

  • Fixing README images

1.0.0+4 - 3 June 2020 #

  • Fixing README images

1.0.1 - 10 July 2020 #

  • Repeat cards added
  • Specify initial card added
  • Fixed display when loading cards for first time

example/lib/main.dart

import 'package:credit_card_slider/card_background.dart';
import 'package:credit_card_slider/card_company.dart';
import 'package:credit_card_slider/card_network_type.dart';
import 'package:credit_card_slider/credit_card_slider.dart';
import 'package:credit_card_slider/credit_card_widget.dart';
import 'package:credit_card_slider/validity.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.symmetric(horizontal: 24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            RaisedButton(
              color: kBlue,
              child: Text('Simple card slider',
                  style: TextStyle(color: Colors.white)),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => SimpleCreditCardSlider(),
                  ),
                );
              },
            ),
            RaisedButton(
              color: kBlue,
              child: Text('Credit card slider with repeating down cards',
                  style: TextStyle(color: Colors.white)),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => CreditCardSliderRepeatDown(),
                  ),
                );
              },
            ),
            RaisedButton(
              color: kBlue,
              padding: EdgeInsets.all(8),
              child: Text(
                  'Credit card slider with repeating cards in both direction',
                  style: TextStyle(color: Colors.white)),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => CreditCardSliderRepeatBothSides(),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

Color kPink = Color(0xFFEE4CBF);
Color kRed = Color(0xFFFA3754);
Color kBlue = Color(0xFF4AA3F2);
Color kPurple = Color(0xFFAF92FB);

var _creditCards = [
  CreditCard(
    cardBackground: SolidColorCardBackground(Colors.black.withOpacity(0.6)),
    cardNetworkType: CardNetworkType.visaBasic,
    cardHolderName: 'The boring developer',
    cardNumber: '1234 1234 1234 1234',
    company: CardCompany.yesBank,
    validity: Validity(
      validThruMonth: 1,
      validThruYear: 21,
      validFromMonth: 1,
      validFromYear: 16,
    ),
  ),
  CreditCard(
    cardBackground: SolidColorCardBackground(kRed.withOpacity(0.4)),
    cardNetworkType: CardNetworkType.mastercard,
    cardHolderName: 'Gursheesh Singh',
    cardNumber: '2434 2434 **** ****',
    company: CardCompany.kotak,
    validity: Validity(
      validThruMonth: 1,
      validThruYear: 21,
    ),
  ),
  CreditCard(
    cardBackground: GradientCardBackground(LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [kBlue, kPurple],
      stops: [0.3, 0.95],
    )),
    cardNetworkType: CardNetworkType.mastercard,
    cardHolderName: 'Very Very very boring devloper',
    cardNumber: '4567',
    company: CardCompany.sbiCard,
    validity: Validity(
      validThruMonth: 2,
      validThruYear: 2021,
    ),
  ),
  CreditCard(
    cardBackground:
        ImageCardBackground(AssetImage('images/background_sample.jpg')),
    cardNetworkType: CardNetworkType.mastercard,
    cardHolderName: 'John Doe',
    cardNumber: '2434 2434 **** ****',
    company: CardCompany.virgin,
    validity: Validity(
      validThruMonth: 1,
      validThruYear: 20,
    ),
  ),
  CreditCard(
    cardNetworkType: CardNetworkType.rupay,
    cardHolderName: 'THE BORING DEVELOPER',
    cardNumber: '2434 2434 **** ****',
    company: CardCompany.sbi,
  ),
];

//Opens a credit card slider with initial card as 2

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

class CreditCardSliderRepeatDown extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CreditCardSlider(
          _creditCards,
          repeatCards: RepeatCards.down,
        ),
      ),
    );
  }
}

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

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  credit_card_slider: ^1.0.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:credit_card_slider/credit_card_slider.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
55
Health:
Code health derived from static analysis. [more]
99
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
77
Learn more about scoring.

We analyzed this package on Jul 9, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • credit_card_slider that is a package requiring null.

Health suggestions

Fix lib/credit_card_slider.dart. (-0.50 points)

Analysis of lib/credit_card_slider.dart reported 1 hint:

line 17 col 7: This class (or a class that this class inherits from) is marked as '@immutable', but one or more of its instance fields aren't final: CreditCardSlider._pageController, CreditCardSlider.initialCard

Fix lib/page_slider.dart. (-0.50 points)

Analysis of lib/page_slider.dart reported 1 hint:

line 5 col 7: This class (or a class that this class inherits from) is marked as '@immutable', but one or more of its instance fields aren't final: PageSlider._pageController

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
auto_size_text ^2.1.0 2.1.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test