credit_card_minimalist

Description:

credit card minimalist

credit_card #
Credit card widget, a beautiful election for adding cards to your app, can be used as a good complement
for store apps, gives a minimalist style.
Now implementing prepay cards #
Dependencies used #
This package uses 2 extern dependencies:


Flare Flutter #

flare_flutter : any

reference: https://pub.dev/packages/flare_flutter




Credit_Card_number_validator #

credit_card_number_validator: ^1.0.4

reference: https://pub.dev/packages/credit_card_number_validator




Include this in your own pubspec.yaml to get the assets (Current fix) #
- packages/credit_card_minimalist/cardIcons/visa.flr
- packages/credit_card_minimalist/cardIcons/mastercard.flr
- packages/credit_card_minimalist/cardIcons/amex.flr
- packages/credit_card_minimalist/cardIcons/credit_card.flr
- packages/credit_card_minimalist/cardIcons/PayPal.flr
- packages/credit_card_minimalist/cardIcons/Prepay.flr
copied to clipboard
Using cards #
** Now you can put 'es' or 'en' in your CreditCard() or CreditForm() language **
For using this widget we need to have a CreditCardInfo component created like in the example
CreditCardInfo card = new CreditCardInfo(
color: mainBlack,
id: 1,
cardHoldname: "User Name",
creditNumber: "4040 5050 4400 4040",
cvv: "123",
expiryDate: "12/22",
type: 1, //1: Mastercard, 2 Visa,3 Mastercard
cardtype: CardType.credit
);
copied to clipboard
Or an empty card
CreditCardInfo card = new CreditCardInfo.empty();
copied to clipboard
It also can be a prepay card
CreditCardInfo card = new CreditCardInfo(
color: mainblack,
id: 1,
cardHoldname: "Prepay Card",
credit: "\$50.0",
cardtype: CardType.prepay,
expiryDate: "02/20"
)
copied to clipboard
Soon including PayPal !!
Note #

This isnt just a simple class, this is a ChangeNotifier Class, which means we are creating a Provider for our card, this Provider help us to change at realtime the information inside our CreditCard Widget. In order to use this in correct way, we have to make the parent of this Widget be a ChangeNotifierProvider, in this way, all children of this will now absorb information and will have complete control.

Then we need to create a CreditCard widget for displaying this info (Remember using notifier):
return ChangeNotifierProvider.value(
value: card,
child: CreditCard(
creditCardInfo: card,
onChangeCard(CreditCardInfo info) {
//Do whatever you want to new information of card
},
//language: 'en'
)
);
copied to clipboard
Creating cards #
To create new cards we can use a simple button to trigger a showDialog, and this will push us to a new screen or use a Navigator.pop and call CreditForm widget inside a new Screen, up to your taste.


First way #


FlatButton(
child: Text("Press me"),
onPressed(){
CreditCardInfo card = new CreditCardInfo.empty();
showDialog(
context: context,
child: ChangeNotifierProvider.value(
value: card,
child: CreditForm(
//Method to update card object
(info) {
card = info;
},
//Method to discard any changes if card was created
(info) {
card = null;
},
language: 'en'
//values if we want to create a prepay card
validateCode: (String code){
/*Validate code here*/
},
codeLength: 12
)
)
);
}
)
copied to clipboard


Second way #


FlatButton(
child: Text("Press me"),
onPressed(){
CreditCardInfo card = new CreditCardInfo.empty();
Navigator.of(context).pushNamed("/createCard"), {card});

}
)

// In other screen

return ChangeNotifierProvider.value(
value: card,
child: CreditForm(
//Method to update card object
(info) {
card = info;
},
//Method to discard any changes if card was created
(info) {
card = null;
},
//language: 'en'
)
);
copied to clipboard
This project is a starting point for a Dart
package,
a library module containing code that can be shared easily across
multiple Flutter or Dart projects.
For help getting started with Flutter, view our
online documentation, which offers tutorials,
samples, guidance on mobile development, and a full API reference.