in Cards, Input

A beautiful UX through the animation of credit card information input form with flutter

2k Views

Flutter-Credit-Card-Input-Form

If you’re looking for a credit card for your own way, consider our credit card information input forms with Flutter. This is obviously a beautiful UX through an animation of credit card information input form with flutter
See this detailed tutorial to get an idea of how this animated credit card fill looks like.

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

For more detailed information, see this guide below:

Installing

  1. Add dependency to pubspec.yamlGet the latest version in the ‘Installing’ tab on pub.dartlang.org
dependencies:
    credit_card_input_form: ^1.3.1
  1. Import the package
import 'package:credit_card_input_form/credit_card_input_form.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)
),

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

DefaultCustom
89704240-1e49f180-d98d-11ea-9305-5938f038625189704237-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,
  ),

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 this Dribbble art

TODO List

  • [x] add RESET button

GitHub

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

Written by James

A Dart package that detects credit card types based on their prefixes

A Flutter app demonstrating how to validate the payment card number