Flutter-Credit-Card-Input-Form

This package provides visually beautiful UX through animation of credit card information input form.

76590756-8c4ed180-6531-11ea-89f5-382a9553541e

82177030-5bb15c80-9913-11ea-83bf-d6bfdf858f04

Installing

  1. Add dependency to pubspec.yaml

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

dependencies:
    credit_card_input_form: ^1.3.1
Dart
  1. Import the package
import 'package:credit_card_input_form/credit_card_input_form.dart';
Dart
  1. Adding CreditCardInputForm

With optional parameters

 CreditCardInputForm(
   cardHeight: 170,
   frontCardColor: Colors.red,
   backCardColor: Colors.blueAccent,
   showResetButton : true,
   onStateChange: (currentState, cardInfo) {
     print(currentState);
     print(cardInfo);
   },
   customCaptions: {...},  // translate and customize captions (see Example)
),
Dart

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.

New Feature

v1.3.0

added custom button style feature

Default Custom
89704240-1e49f180-d98d-11ea-9305-5938f0386251 89704237-1d18c480-d98d-11ea-9557-36a8519da301 
final buttonStyle = BoxDecoration(
    borderRadius: BorderRadius.circular(30.0),
    gradient: LinearGradient(
        colors: [
          const Color(0xfffcdf8a),
          const Color(0xfff38381),
        ],
        begin: const FractionalOffset(0.0, 0.0),
        end: const FractionalOffset(1.0, 0.0),
        stops: [0.0, 1.0],
        tileMode: TileMode.clamp),
  );

  final buttonTextStyle =
      TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 18);

  CreditCardInputForm(
    showResetButton: true,
    onStateChange: (currentState, cardInfo) {
      print(currentState);
      print(cardInfo);
    },
    customCaptions: customCaptions,
    prevButtonStyle: buttonStyle,
    nextButtonStyle: buttonStyle,
    prevButtonTextStyle: buttonTextStyle,
    nextButtonTextStyle: buttonTextStyle,
    resetButtonTextStyle: buttonTextStyle,
  ),
Dart

3rd party library

Flip card

https://pub.dev/packages/flip_card

For use card flip animation

Provider

https://pub.dev/packages/provider

For use state management

Reference

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

TODO List

  • [x] add RESET button

GitHub

https://github.com/Origogi/Flutter-Credit-Card-Input-Form