in Cards

Flutter Credit Card Input form

1.3k Views

Flutter-Credit-Card-Input-Form

Input cards represent data objects. Each card represents one data object, which is defined as a particular type. 

Currently, we’re showing Flutter the credit card input form, you will be provided a package that has a visually beautiful UX through the animation of the credit card information input form. As we work on getting this operational, we’d appreciate any feedback you have 

credit card

See detailed instructions below for information and documentation on installation steps, usage, and so on. 

Installing

  1. Add dependency to pubspec.yamlGet the latest version in the ‘Installing’ tab on pub.dartlang.org
dependencies:
    credit_card_input_form: ^2.3.0
  1. Import the package
import 'package:credit_card_input_form/credit_card_input_form.dart';
  1. Adding CreditCardInputForm

With optional parameters

 CreditCardInputForm(
   cardHeight: 170,
   showResetButton : true,
   onStateChange: (currentState, cardInfo) {
     print(currentState);
     print(cardInfo);
   },
   customCaptions: {...}, 
   frontCardDecoration: cardDecoration,
   backCardDecoration: cardDecoration,
   prevButtonDecoration: buttonStyle,
   nextButtonDecoration: buttonStyle,
   resetButtonDecoration : buttonStyle,
   prevButtonTextStyle: buttonTextStyle,
   nextButtonTextStyle: buttonTextStyle,
   resetButtonTextStyle: buttonTextStyle,
   initialAutoFocus: true, // optional

),

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
defaultcustom
final buttonDecoration = 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(
    prevButtonDecoration: buttonDecoration,
    nextButtonDecoration: buttonDecoration,
    prevButtonTextStyle: buttonTextStyle,
    nextButtonTextStyle: buttonTextStyle,
    resetButtonTextStyle: buttonTextStyle,
  ),

v2.0.0

It provides more options using boxdecoration that can only change the color of the card.

DefaultCustom
imageimage
  final cardDecoration = BoxDecoration(
    boxShadow: <BoxShadow>[
      BoxShadow(color: Colors.black54, blurRadius: 15.0, offset: Offset(0, 8))
    ],
    gradient: LinearGradient(
        colors: [
          Colors.red,
          Colors.blue,
        ],
        begin: const FractionalOffset(0.0, 0.0),
        end: const FractionalOffset(1.0, 0.0),
        stops: [0.0, 1.0],
        tileMode: TileMode.clamp),
    borderRadius: BorderRadius.all(Radius.circular(15)));


    CreditCardInputForm(
      frontCardDecoration: cardDecoration,
      backCardDecoration: cardDecoration,
    ),
  ]),

v2.1.0

When creating a widget, add a new feature to add an initial value.

CodePreview
CreditCardInputForm( .... cardCVV: '222', cardName: 'Jeongtae Kim', cardNumber: '1111111111111111', cardValid: '12/12', intialCardState: InputState.DONE, ), Dartezgif com-gif-maker

GitHub

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

Written by James

A widget for stacking cards with beautiful animations for flutter

Flutterwave landing page animated card deck implemented with Flutter