flutter_credit_card 0.1.4
flutter_credit_card: ^0.1.4 copied to clipboard

Flutter Android iOS web

A Credit Card widget package, support entering card details, card flip animation.

Flutter Credit Card #

A Flutter package allows you to easily implement the Credit card's UI easily with the Card detection.

Codacy Badge

Preview #

The example app running in Android

Installing #

  1. Add dependency to pubspec.yaml

    Get the latest version in the 'Installing' tab on pub.dartlang.org

dependencies:
    flutter_credit_card: 0.1.4
  1. Import the package
import 'package:flutter_credit_card/flutter_credit_card.dart';
  1. Adding CreditCardWidget

With required parameters


    CreditCardWidget(
        cardNumber: cardNumber,
        expiryDate: expiryDate, 
        cardHolderName: cardHolderName,
        cvvCode: cvvCode,
        showBackView: isCvvFocused, //true when you want to show cvv(back) view
    ),

With optional parameters

    CreditCardWidget(
        cardNumber: cardNumber,
        expiryDate: expiryDate,
        cardHolderName: cardHolderName,
        cvvCode: cvvCode,
        showBackView: isCvvFocused,
        cardbgColor: Colors.black,
        obscureCardNumber: true,
        obscureCardCvv: true,
        height: 175,
        textStyle: TextStyle(color: Colors.yellowAccent),
        width: MediaQuery.of(context).size.width,
        animationDuration: Duration(milliseconds: 1000),
    ),
  1. Adding CreditCardForm
    CreditCardForm(
      formKey: formKey, // Required 
      onCreditCardModelChange: (CreditCardModel data) {}, // Required
      themeColor: Colors.red,
      obscureCvv: true, 
      obscureNumber: true,
      cardNumberDecoration: const InputDecoration(
        border: OutlineInputBorder(),
        labelText: 'Number',
        hintText: 'XXXX XXXX XXXX XXXX',
      ),
      expiryDateDecoration: const InputDecoration(
        border: OutlineInputBorder(),
        labelText: 'Expired Date',
        hintText: 'XX/XX',
      ),
      cvvCodeDecoration: const InputDecoration(
        border: OutlineInputBorder(),
        labelText: 'CVV',
        hintText: 'XXX',
      ),
      cardHolderDecoration: const InputDecoration(
        border: OutlineInputBorder(),
        labelText: 'Card Holder',
      ),
    ),

How to use #

Check out the example app in the example directory or the 'Example' tab on pub.dartlang.org for a more complete example.

Credit #

This package's animation is inspired from from this Dribbble art.

97
likes
90
pub points
97%
popularity

Publisher

simform.com

A Credit Card widget package, support entering card details, card flip animation.

Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD (LICENSE)

Dependencies

flutter

More

Packages that depend on flutter_credit_card