Flutterexperts

A couple of days prior, I was perusing LinkedIn when I ran over a pleasant Credit Card Entry Form for web and mobile devices. I chose to accept that as a test and implement it utilizing Flutter.

With accommodation at the forefront, numerous mobile applications are integrating a payment alternative, and a large portion of them uphold credit or debit card payment. So we think of a package that permits you to add a CreditCard UI to your application effortlessly.

In this blog, we will explore the Credit Card View In Flutter. We will see how to implement the Credit cards UI easily with the Card detection using the flutter_credit_card package in your flutter applications.

flutter_credit_card | Flutter Package
A Flutter package allows you to easily implement the Credit card’s UI with the Card detection.pub.dev.

Table Of Contents::

Flutter Credit Card

Implementation

Code Implement

Code File

Conclusion

---

---

Flutter Credit Card:

A Credit Card widget package, uphold entering card details, card flip animation. A Flutter package permits you to effectively implement the Credit card’s UI easily with Card detection.

Demo Module :

This demo video shows how to create a credit card in a flutter. It shows how the credit card will work using the flutter_credit_card package in your flutter applications. It shows card detection, validation, animation, and dialog box. It will be shown on your device.

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies:

flutter_credit_card: 

Step 2: Import

import 'package:flutter_credit_card/flutter_credit_card.dart';

Step 3: Run flutter packages get in the root directory of your app.

Step 4: Enable AndriodX

Add this to your gradle.properties file:

org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true

How to implement code in dart file :

You need to implement it in your code respectively:

Create a new dart file called credit_card_page.dart inside the lib folder.

First, we will add CreditCardWidget():

CreditCardWidget(
  cardNumber: cardNumber,
  expiryDate: expiryDate,
  cardHolderName: cardHolderName,
  cvvCode: cvvCode,
  showBackView: isCvvFocused,
),

In CreditCardWidget() has some required fields that cannot be null, such as cardNumber means the user can add our card number for card detecting, expiryDate means the user can add our card expiry date in a month and year format, cardHolderName means the user can add our name of the person on the front of the credit card, cvvCode means the user can add our cvv number is a 3-digit code printed at the back of a credit or a debit card, showBackView means true when you want to show cvv(back) view.

CreditCardWidget(
        cardNumber: cardNumber,
        expiryDate: expiryDate,
        cardHolderName: cardHolderName,
        cvvCode: cvvCode,
        showBackView: isCvvFocused,
        cardbgColor: Colors.black,
        obscureCardNumber: true,
        obscureCardCvv: true,
        height: 175,
        textStyle: TextStyle(color: Colors.yellowAccent),
        width: MediaQuery.of(context).size.width,
        animationDuration: Duration(milliseconds: 1000),
    ),

CreditCardWidget() also has some optional parameters that let you modify this widget as per your need. Like add a cardbgColor means the user add any color, height, width, obscureCardNumber, obscureCardCvvanimation-duration, etc.

Now, we will be adding a CreditCardWidget()

CreditCardForm(
  formKey: formKey,
  onCreditCardModelChange: onCreditCardModelChange,
  obscureCvv: true,
  obscureNumber: true,
  cardNumberDecoration: const InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'Number',
    hintText: 'XXXX XXXX XXXX XXXX',
  ),
  expiryDateDecoration: const InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'Expired Date',
    hintText: 'XX/XX',

  ),
  cvvCodeDecoration: const InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'CVV',
    hintText: 'XXX',
  ),
  cardHolderDecoration: const InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'Card Holder Name',
  ),
),

In this CreditCardForm(), we will add a formkey. Users can create the final globalkey.

final GlobalKey<FormState> formKey = GlobalKey<FormState>();

We will add onCreditCardModelChange. In this function, the user can add Strings of cardNumber, expiryDate, cvv, etc.

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

We will add a cardNumberDecoration means users can write a card number on this decoration box and show it on our credit card. expiryDateDecoration means users can write an expiry date on this decoration box and show it on our credit card. cvvCodeDecoration means users can write a cvv code on this decoration box, and then the card will allow animated reverse and show it on our credit card. cardHolderDecoration means users can write the person’s name on the credit card’s front on this decoration box and show it on our credit card. When we run the application, we ought to get the screen’s output like the underneath screen capture.

Now, we will add a button for validation. When the user fills in all forms properly, the card will be fine; otherwise, they will show some errors.

RaisedButton(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(8.0),
  ),
  child: Container(
    margin: const EdgeInsets.all(8),
    child: const Text(
      'Validate',
      style: TextStyle(
        color: Colors.white,
        fontSize: 18,
      ),
    ),
  ),
  color: const Color(0xff1b447b),
  onPressed: () {
    if (formKey.currentState.validate()) {
      print('valid!');
      _showValidDialog(context,"Valid","Your card successfully valid !!!");
    } else {
      print('invalid!');
    }
  },
)

In the RaisedButton(), we will add the text “validate” and wrap it to the container. onPressed method, we will add if fromkey is validated, then print valid and open a _showValidDialog(). Otherwise, they will give an error.

Now, we will define _showValidDialog()

Future <AlertDialog> _showValidDialog(BuildContext context, String title, String content,) {
  showDialog<AlertDialog>(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        backgroundColor: Color(0xff1b447b),
        title: Text(title),
        content: Text(content),
        actions: [
          FlatButton(
              child: Text(
                "Ok",
                style: TextStyle(fontSize: 18,color: Colors.cyan),
              ),
              onPressed: () {
               Navigator.of(context).pop();
              }),
        ],
      );
    },
  );
}

In this dialog, we will add context, return an AlertDailog(). Inside AlertDialog, we will title, content, and actions. When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File:

https://gist.github.com/ShaiqAhmedkhan/fa1c1eea56e74194ebc79ca5b2af1818#file-credit_card_page-dart

Conclusion:

In the article, I have explained the Credit Card View of basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Credit Card View On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information in Trying up the Credit Card View in your flutter projects. We will show you what the Flutter Credit Card is in the introduction part?. Make a demo program for working Credit Card and show a card detection, validation, animation, and dialog box using the flutter_credit_card package in your flutter applications. So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

find the source code of the Flutter Credit Card View Demo:

flutter-devs/flutter_credit_card_view_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---