This is a credit card customizable widget and validation package by Flutterme.
The credit card package has support for the majority of the credit cards available with automatic detection and validations. This detection and validation can be disabled in cases where not needed. Below are they list of supported card validations.
Note: Supported cards are updated and will be more in future updates.
No: | Card Type | Support |
---|---|---|
1 | American Express | true |
2 | Diners Club | true |
3 | Discover | true |
4 | Elo | true |
5 | Hiper/Hipercard | true |
6 | JCB | true |
7 | Maestro | true |
8 | Mastercard | true |
9 | Mir | true |
10 | Union Pay | true |
11 | Visa | true |
11 | Verve | false |
Screenshot 1 | Screenshot 2 |
---|---|
-
This controls the width of the credit card. Note that the width can be your device width, however know that width restriction has been set between [300]-[430].
-
This controls the height of the credit card. Note that the height can be your device height, however know that height restriction has been set between [200]-[250].
-
Creates an inner space [padding] between the credit card border and the inner widgets.
-
Creates an outer space [margin] between the credit card border and the outside layouts.
-
To set the background color of the card. This can not be a gradient. To set a gradient background color use the
backgroundGradient
.backgroundColor
andbackgroundGradient
can't be set at the same time. -
This is to set a background image for the card. When set,
backgroundColor
andbackgroundGradient
have no effects. -
Adjustment of card border.
-
Adjustment of card border radius.
-
Allows the controls of card elevation and shadow directions.
-
This is to set a background gradient color for the card.
backgroundColor
andbackgroundGradient
can't be set at the same time. -
This is the card title placement area.
-
This is to style the card title name placement area.
-
This is the card number placement area.
-
This is to style the card number placement area.
-
To mask the card number for security reasons. This accepts all Mask Types.
-
This is the card valid thur placement area.
-
This is to style the card valid thur placement area.
-
To mask the Valid Thur for security reasons. This only accepts the
full
andnone
Mask Types. If any other type is passed it will return "****". -
This is the CVV placement area.
-
This is to style the CVV placement area.
-
To mask the CVV for security reasons. This only accepts the
full
andnone
Mask Types. If any other type is passed it will return "***". -
This is the card holder name placement area.
-
This is to style the card holder name placement area.
-
This allows you to choose how your card number is been masked for privacy reasons from a list of options which are:
full
- This display non of the characters of your card number. E.g**** **** **** ****
first4Last4
- This display only the first 4 and last 4 characters of your card number. E.g1234 **** **** 5678
first6last2
- This display only the first 6 and last 2 characters of your card number. E.g1234 56** **** **76
first2last6
- This display only the first 2 and last 6 characters of your card number. E.g12** **** **68 9876
none
- This display all the characters of your card number. E.g1234 5678 9876 5633
-
This allows you to choose how your card is valid thru the date is been masked:
full
- This display non of the characters of your card CVV. E.g****
none
- This display all the characters of your card number. E.g1234
-
This allows you to choose how your card CVV number is been masked:
full
- This display non of the characters of your card CVV. E.g***
none
- This display all the characters of your card number. E.g123
To use the "Flutterme's Credit Card" card
, follow the sample below:
FMCreditCard(
number: number.text,
numberMaskType: FMMaskType.first6last2,
cvv: cvv.text,
cvvMaskType: FMMaskType.full,
validThru: validThru.text,
validThruMaskType: FMMaskType.none,
holder: holder.text,
)
To use the "Flutterme's Credit Card" fields
with Form
, follow the sample below:
Form(
key: formKey,
child: Column(
children: [
FMHolderField(
controller: holder,
cursorColor: const Color(0xFF49B7AE),
decoration: inputDecoration(
labelText: "Card Holder",
hintText: "John Doe",
),
),
const SizedBox(height: 30),
FMNumberField(
controller: number,
cursorColor: const Color(0xFF49B7AE),
decoration: inputDecoration(
labelText: "Card Number",
hintText: "0000 0000 0000 0000",
),
),
const SizedBox(height: 30),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: FMValidThruField(
controller: validThru,
cursorColor: const Color(0xFF49B7AE),
decoration: const InputDecoration(
border: OutlineInputBorder(),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xFF49B7AE),
),
),
labelStyle: TextStyle(color: Color(0xFF49B7AE)),
labelText: "Valid Thru",
hintText: "****",
),
),
),
const SizedBox(width: 10),
Flexible(
child: FMCvvField(
controller: cvv,
cursorColor: const Color(0xFF49B7AE),
decoration: inputDecoration(
labelText: "CVV",
hintText: "***",
),
),
),
],
)
],
),
)
Any issue(s) discovered should be reported at issues Any contribution(s) should be submitted at contributions Checkout flutterme for more