flutter-credit-card-input-form
this package provides visually beautiful ux through animation of credit card information input form.
installing
- 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
- import the package
import 'package:credit_card_input_form/credit_card_input_form.dart';
- 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 |
---|---|
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 |
---|---|
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 |
|
Comments are closed.