Platform Awesome Flutter

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

Preview

Installing

  1. Add dependency to pubspec.yaml

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

dependencies:
    credit_card_input_form: ^2.1.3
  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,
),

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

implement a new feature to add an initial value when creating a widget

Code Preview
CreditCardInputForm(
  ....
  cardCVV: '222',
  cardName: 'Jeongtae Kim',
  cardNumber: '1111111111111111',
  cardValid: '12/12',
  intialCardState: InputState.DONE,
),

ezgif com-gif-maker

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
  • x add box decoration param

Libraries

back_card_view
captions
card_cvv
card_cvv_provider
card_info
card_name
card_name_provider
card_number
card_number_provider
card_sign
card_valid
card_valid_provider
constanst
credit_card_input_form
front_card_view
input_view_pager
my_appbar
reset_button
round_button
state_provider
util
yellow_border