In this blog we will learn that how to Implement Credit Card View in Flutter. With the help of the flutter_credit_card package, we’ll show how to quickly integrate a credit card UI with card recognition into your Flutter projects.
You may also check our flutter app development company page.
Introduction:-
A credit card widget package that supports inputting card information and has card flip animation. You can quickly implement the Credit card’s UI with a Flutter package thanks to Card detection.
Implementation:-
First we need to create a new flutter project and add the following dependencies in the pubspec.yaml file.
dependencies:
flutter
sdk: flutter
flutter_credit_card: ^3.0.6
Now, run the command “flutter pub get” to add the dependencies.
Add the following package to your class.
import 'package:flutter_credit_card/flutter_credit_card.dart';
We will first create CreditCardWidget():
Some essential fields in CreditCardWidget(), creating cardNumber, which enables the user to enter their card number for card identification, must be null. cardHolderName, which enables the user to enter our name as the name written on the front of the credit card, expiryDate, which allows the user to enter our card’s expiration date in month and year format, and cvv Code, which allows the user to enter our cvv number, a three-digit code printed on.
CreditCardWidget(
cardNumber: cardNumber,
expiryDate: expiryDate,
cardHolderName: cardHolderName,
cvvCode: cvvCode,
bankName: 'Axis Bank',
showBackView: isCvvFocused,
obscureCardNumber: true,
obscureCardCvv: true,
isHolderNameVisible: true,
cardBgColor: Colors.blueGrey.shade700,
isSwipeGestureEnabled: true,
onCreditCardWidgetChange:
(CreditCardBrand creditCardBrand) {},
customCardTypeIcons: <CustomCardTypeIcon>[
CustomCardTypeIcon(
cardType: CardType.mastercard,
cardImage: Image.asset(
'assets/images.png',
height: 48,
width: 48,
),
),
],
),
The formkey will be added to this CreditCardForm(). The ultimate globalkey is user-created.
final GlobalKey<FormState> formKey = GlobalKey<FormState>();
We’ll create onCreditCardModel now. The cardNumber, expiryDate, cvv, and other Strings are available for addition in this method.
void onCreditCardModel(CreditCardModel? creditCardModel) {
setState(() {
cardNumber = creditCardModel!.cardNumber;
expiryDate = creditCardModel.expiryDate;
cardHolderName = creditCardModel.cardHolderName;
cvvCode = creditCardModel.cvvCode;
isCvvFocused = creditCardModel.isCvvFocused;
});
}
We’ll include a card.Customers may design a box with their credit card number using NumberDecoration, which they can subsequently display. Users may write an expiration date on this decoration box and display it on their credit card by using the expiryDateDecoration term. Users may enter a CVV code in this decoration box using the cvv Code Decoration command, and the card will display the code on our credit card in an animated reversal. CardHolderDecoration allows users to decorate their credit cards by writing a person’s name on the front and displaying it.
complete code:-
import 'package:flutter/material.dart';
import 'package:flutter_credit_card/credit_card_brand.dart';
import 'package:flutter_credit_card/flutter_credit_card.dart';
class CreditCard extends StatefulWidget {
const CreditCard({super.key});
@override
State<StatefulWidget> createState() {
return CreditCardView();
}
}
class CreditCardView extends State<CreditCard> {
String cardNumber = '';
String expiryDate = '';
String cardHolderName = '';
String cvvCode = '';
bool isCvvFocused = false;
OutlineInputBorder? border;
final GlobalKey<FormState> formKey = GlobalKey<FormState>();
@override
void initState() {
border = const OutlineInputBorder(
borderSide: BorderSide(
color: Colors.black,
),
);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
body: SafeArea(
child: Column(
children: <Widget>[
const SizedBox(
height: 30,
),
CreditCardWidget(
cardNumber: cardNumber,
expiryDate: expiryDate,
cardHolderName: cardHolderName,
cvvCode: cvvCode,
bankName: 'Axis Bank',
showBackView: isCvvFocused,
obscureCardNumber: true,
obscureCardCvv: true,
isHolderNameVisible: true,
cardBgColor: Colors.blueGrey.shade700,
isSwipeGestureEnabled: true,
onCreditCardWidgetChange: (CreditCardBrand creditCardBrand) {},
customCardTypeIcons: <CustomCardTypeIcon>[
CustomCardTypeIcon(
cardType: CardType.mastercard,
cardImage: Image.asset(
'assets/images.png',
height: 48,
width: 48,
),
),
],
),
Expanded(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
CreditCardForm(
formKey: formKey,
obscureCvv: true,
obscureNumber: true,
cardNumber: cardNumber,
cvvCode: cvvCode,
isHolderNameVisible: true,
isCardNumberVisible: true,
isExpiryDateVisible: true,
cardHolderName: cardHolderName,
expiryDate: expiryDate,
themeColor: Colors.blue,
textColor: Colors.black,
cardNumberDecoration: InputDecoration(
labelText: 'Number',
hintText: 'XXXX XXXX XXXX XXXX',
hintStyle: const TextStyle(color: Colors.black),
labelStyle: const TextStyle(color: Colors.black),
focusedBorder: border,
enabledBorder: border,
errorBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Colors.red,
),
)),
expiryDateDecoration: InputDecoration(
hintStyle: const TextStyle(color: Colors.black),
labelStyle: const TextStyle(color: Colors.black),
focusedBorder: border,
enabledBorder: border,
errorBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Colors.red,
),
),
labelText: 'Expired Date',
hintText: 'XX/XX',
),
cvvCodeDecoration: InputDecoration(
hintStyle: const TextStyle(color: Colors.black),
labelStyle: const TextStyle(color: Colors.black),
focusedBorder: border,
enabledBorder: border,
errorBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Colors.red,
),
),
labelText: 'CVV',
hintText: 'XXX',
),
cardHolderDecoration: InputDecoration(
hintStyle: const TextStyle(color: Colors.black),
labelStyle: const TextStyle(color: Colors.black),
focusedBorder: border,
enabledBorder: border,
labelText: 'Card Holder',
),
onCreditCardModelChange: onCreditCardModel,
),
const SizedBox(
height: 20,
),
const SizedBox(
height: 20,
),
GestureDetector(
onTap: () {
if (formKey.currentState!.validate()) {
_showValidDialog(context);
print('valid!');
} else {
print('invalid!');
}
},
child: Container(
margin: const EdgeInsets.symmetric(
horizontal: 16, vertical: 8),
decoration: BoxDecoration(
color: Colors.black87,
borderRadius: BorderRadius.circular(8),
),
padding: const EdgeInsets.symmetric(vertical: 15),
width: double.infinity,
alignment: Alignment.center,
child: const Text(
'Validate',
style: TextStyle(
color: Colors.white,
fontFamily: 'halter',
fontSize: 14,
package: 'flutter_credit_card',
),
),
),
),
],
),
),
),
],
),
),
);
}
_showValidDialog(
BuildContext context,
) {
return showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: const Text(
"Valid",
),
content: const Text("Your card successfully valid !!!"),
actions: [
TextButton(
child: const Text(
"Ok",
style: TextStyle(fontSize: 18, color: Colors.black),
),
onPressed: () {
Navigator.of(context).pop();
}),
],
);
},
);
}
void onCreditCardModel(CreditCardModel? creditCardModel) {
setState(() {
cardNumber = creditCardModel!.cardNumber;
expiryDate = creditCardModel.expiryDate;
cardHolderName = creditCardModel.cardHolderName;
cvvCode = creditCardModel.cvvCode;
isCvvFocused = creditCardModel.isCvvFocused;
});
}
}
Output:-
The Flutter package allows you to effectively implement a credit card UI easily with card recognition.
Conclusion:-
We have done with the implementation how to create Credit Card View In Flutter.Implement Credit Card View In Flutter.
Check here for more interesting blogs –https://mobikul.com/blog/.
Hope this blog helped you to better understand the Implement Credit Card View In Flutter.
Thanks for reading this blog.
References:-
https://pub.dev/packages/flutter_credit_card
https://medium.flutterdevs.com/credit-card-view-in-flutter-f415f9578e03
Be the first to comment.