flutter credit card
a flutter package allows you to easily implement the credit card’s ui easily with the card detection.
preview
installing
- add dependency to
pubspec.yaml
get the latest version in the ‘installing’ tab on pub.dartlang.org
dependencies:
flutter_credit_card: <latest_version>
- import the package
import 'package:flutter_credit_card/flutter_credit_card.dart';
- adding creditcardwidget
with required parameters
creditcardwidget(
cardnumber: cardnumber,
expirydate: expirydate,
cardholdername: cardholdername,
cvvcode: cvvcode,
showbackview: iscvvfocused, //true when you want to show cvv(back) view
),
with optional parameters
creditcardwidget(
cardnumber: cardnumber,
expirydate: expirydate,
cardholdername: cardholdername,
cvvcode: cvvcode,
showbackview: iscvvfocused,
cardbgcolor: colors.black,
glassmorphismconfig: glassmorphism.defaultconfig(),
backgroundimage: 'assets/card_bg.png',
obscurecardnumber: true,
obscurecardcvv: true,
isholdernamevisible: false,
height: 175,
textstyle: textstyle(color: colors.yellowaccent),
width: mediaquery.of(context).size.width,
ischipvisible: true,
isswipegestureenabled: true,
animationduration: duration(milliseconds: 1000),
),
glassmorphism ui
- default configuration
creditcardwidget(
glassmorphismconfig: glassmorphism.defaultconfig(),
),
- custom configuration
creditcardwidget(
glassmorphismconfig: glassmorphism(
blurx: 10.0,
blury: 10.0,
gradient: lineargradient(
begin: alignment.topleft,
end: alignment.bottomright,
colors: <color>[
colors.grey.withalpha(20),
colors.white.withalpha(20),
],
stops: const <double>[
0.3,
0,
],
),
),
),
- adding creditcardform
creditcardform(
formkey: formkey, // required
oncreditcardmodelchange: (creditcardmodel data) {}, // required
themecolor: colors.red,
obscurecvv: true,
obscurenumber: true,
isholdernamevisible: false,
iscardnumbervisible: false,
isexpirydatevisible: false,
cardnumberdecoration: const inputdecoration(
border: outlineinputborder(),
labeltext: 'number',
hinttext: 'xxxx xxxx xxxx xxxx',
),
expirydatedecoration: const inputdecoration(
border: outlineinputborder(),
labeltext: 'expired date',
hinttext: 'xx/xx',
),
cvvcodedecoration: const inputdecoration(
border: outlineinputborder(),
labeltext: 'cvv',
hinttext: 'xxx',
),
cardholderdecoration: const inputdecoration(
border: outlineinputborder(),
labeltext: 'card holder',
),
),
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.
credit
this package’s animation is inspired from from this dribbble art.
license
bsd 2-clause license
copyright (c) 2019, simform solutions
all rights reserved.
Comments are closed.