Flutter Credit/Debit Card Form
Preview
Usage
CreditCardForm(
theme: CreditCardLightTheme(),
onChanged: (CreditCardResult result) {
print(result.cardNumber);
print(result.cardHolderName);
print(result.expirationMonth);
print(result.expirationYear);
print(result.cardType);
print(result.cvc);
},
),
| Param | Description |
|---|---|
theme |
card theme CreditCardLightTheme() or CreditCardDarkTheme |
onChanged required |
listen for input values changed |
cardNumberLabel |
label for card number input |
cardHolderLabel |
label for card holder name input |
hideCardHolder |
default (false) |
expiredDateLabel |
label for expired date input |
cvcLabel |
label for security code |
cardNumberLength |
length for card number. default (16) |
cvcLength |
length for security code. default (4) |
cvcIcon |
Icon widget for security code. |
fontSize |
font size for all inputs and labels. default (16) |
controller |
CreditCardController() to set initial value to inputs |
Set Credit Card Value Initially
CreditCardController controller = CreditCardController();
CreditCardForm(
controller: controller,
onChanged: (CreditCardResult result) {
},
),
controller.setValue(CreditCardValue(
cardNumber: '4242 4242 4242 4242',
cardHolderName: 'John Wick',
expiryDate: '08/25',
));
How to create custom theme
class CustomCardTheme implements CreditCardTheme {
@override
Color backgroundColor = Colors.white;
@override
Color textColor = Colors.black;
@override
Color borderColor = Colors.black45;
@override
Color labelColor = Colors.black45;
}
CreditCardForm(
theme: CustomCardTheme(),
onChanged: (CreditCardResult result) {
},
),
Development
Want to contribute? Great! Fork the repo and create PR to us.