Download this source code for
5 USD


Download this source code for
5 USD


Download this source code for
5 USD


Download this source code for
5 USD

flutter-credit-card-input-form

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

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: ^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

default custom
default custom
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.

default custom
image image
  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

Download this source code for
5 USD


Download this source code for
5 USD


Download this source code for
5 USD


Download this source code for
5 USD

Comments are closed.