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

flutter-credit-card-input-form

the card input form package provides visually beautiful ux through animation of credit card information input form.

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

2. import the package

import 'package:credit_card_input_form/credit_card_input_form.dart';

3. 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

default	custom

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 from this dribbble art

todo list

• [x] add reset button