Credit Card View in Flutter App

In this article, we are going to create credit card view in flutter application. You can also check out flutter card view related articles.

We are using flutter_credit_card package to integrate credit card view in flutter app. Credit Card View is mostly used in shopping and payment mobile applications. Using flutter_credit_card package, we can easily credit card UI in our flutter application. Using this package, we can also validate credit card details.

In this flutter example, four types of credit card details users can submit such as credit card number, expiration date, cvv number, card holder name. CreditCardWidget has this four required parameters. This four fields can not be null. showBackView property is used to display or hide cvv number.

We can also change background color of credit card using cardbgColor property. onCreditCardModelChange callback is used to get credit card details when user can enter. We can also customize four required fields such as credit card number, expiration date, cvv number, card holder name using cardNumberDecoration, expiryDateDecoration, cvvCodeDecoration, cardHolderDecoration respectively.


Add required package in your pubspec.yaml file

flutter_credit_card: ^0.1.4

Flutter Credit Card View UI

String cardNumber = ”;
String expiryDate = ”;
String cardHolderName = ”;
String cvvCode = ”;
bool isCvvFocused = false;
final GlobalKey<FormState> formKey = GlobalKey<FormState>();

Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Flutter Credit Card View Sample’)),
body: SafeArea(
child: Column(
children: <Widget>[
    cardBgColor: Colors.orangeAccent,
    cardNumber: cardNumber,
    expiryDate: expiryDate,
    cardHolderName: cardHolderName,
    cvvCode: cvvCode,
    showBackView: isCvvFocused,
    obscureCardNumber: true,
    obscureCardCvv: true,
child: SingleChildScrollView(
child: Column(
children: [
formKey: formKey,
onCreditCardModelChange: onCreditCardModelChange,
obscureCvv: true,
obscureNumber: true,
cardNumberDecoration: const InputDecoration(
    hintText: ‘XXXX XXXX XXXX XXXX’,
    labelText: ‘Number’,
    border: OutlineInputBorder(),
expiryDateDecoration: const InputDecoration(
    hintText: ‘XX/XX’,
    labelText: ‘Expired Date’,
    border: OutlineInputBorder(),
cvvCodeDecoration: const InputDecoration(
    hintText: ‘XXX’,
    labelText: ‘CVV’,
    border: OutlineInputBorder(),
cardHolderDecoration: const InputDecoration(
    labelText: ‘Card Holder Name’,
    border: OutlineInputBorder(),
SizedBox(height: 20),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
child: Container(
margin: EdgeInsets.all(8),
child: Text(
style: TextStyle(
color: Colors.white,
fontSize: 18,
color: Colors.deepOrangeAccent,
onPressed: () {
if (formKey.currentState.validate()) {
    validCreditCardAlertDialog(context,”Valid”,”Your card is successfully valid!”);
} else {


Get Credit Card Details for Android & iOS

void onCreditCardModelChange(CreditCardModel creditCardModel) {
setState(() {
    cardNumber = creditCardModel.cardNumber;
    expiryDate = creditCardModel.expiryDate;
    cardHolderName = creditCardModel.cardHolderName;
    cvvCode = creditCardModel.cvvCode;
    isCvvFocused = creditCardModel.isCvvFocused;

Check Credit Card is valid or not

Future <AlertDialog> validCreditCardAlertDialog(BuildContext context, String title, String content) {
return showDialog<AlertDialog>(
context: context,
builder: (BuildContext context) {
return AlertDialog(
backgroundColor: Colors.white,
title: Text(title),
content: Text(content),
actions: [
    child: Text(“OK”, style: TextStyle(fontSize: 18,color: Colors.deepOrangeAccent),
onPressed: () {
credit card view
credit card view

One thought on “Credit Card View in Flutter App

Leave a Reply