Nov

Flutter Credit Card Number Validator

Flutter Credit Card Number Validator:

In this tutorial, we are going to learn how to validate a credit card and what is its card type, etc. We have different credit card types some of them are Visa, Mastercard, American Express, Discover, Dinner Club, and JCB, etc. So we are validating the different card types with their number and it’s card type means it validates the credit card and returns its type.

This example supports following cards:

Supported cards:

Visa
Mastercard
American Express
Discover
Diners Club
JCB

Follow the below steps to Implement Flutter credit card Validator:

Add the dependency package:

adding the dependency package to pubspec.yaml file. use the below code to add the dependency package. After adding the dependency package run the get package method to import all the required files to the app.

dependencies:
credit_card_number_validator: ^1.0.4

Install the package:

You can install the package from the command line using the below code with Flutter as shown.

$ flutter pub get

Importing the Package:

After Adding the dependency package to the pubspec.yaml file , you can now import the package into the dart code by using the below code. without adding the dependency packge to the pubspec.yaml file if you import it will show package not found an error.

import 'package:credit_card_number_validator/credit_card_number_validator.dart';

Use the following example code into your dart file :

Map cardData = CreditCardValidator.getCard(cardNumberString);
String cardType = cardData[CreditCardValidator.cardType];
bool isValid = cardData[CreditCardValidator.isValidCard];

Complete example code for Flutter Credit Card Validator:

In your main.dart file paste the below code

main.dart

import 'package:credit_card_number_validator/credit_card_number_validator.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
@override
_MyApp createState() => _MyApp();
}

class _MyApp extends State {
/// Card Number Controller
TextEditingController _cardNumberController = TextEditingController();

// Declare Variables To Store Card Type and Validity
String cardType;
bool isValid = false;

// Initial State
@override
void initState() {
// TODO: implement initState
super.initState();

// Set A Sample Card Value - VISA Card
_cardNumberController.text = "4111111111111111";
}

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Credit Card Validator Demo'),
),
body: Center(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'ENTER CARD NUMBER',
style: TextStyle(fontSize: 14.0, fontWeight: FontWeight.w800),
),
Padding(
padding: EdgeInsets.all(16.0),
child: TextFormField(
keyboardType: TextInputType.number,
controller: _cardNumberController,
decoration: InputDecoration(
hintText: 'Card Number',
hintStyle: TextStyle(color: Color(0xFFCCCCCC)),
contentPadding: new EdgeInsets.symmetric(
vertical: 14.0, horizontal: 7.0),
focusedBorder: const OutlineInputBorder(
borderSide:
const BorderSide(color: Colors.grey, width: 0.0),
),
enabledBorder: const OutlineInputBorder(
borderSide:
const BorderSide(color: Colors.grey, width: 0.0),
),
border: const OutlineInputBorder(
borderSide:
const BorderSide(color: Colors.grey, width: 0.0),
))),
),
Container(
height: 55,
child: RaisedButton(
color: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(5))),
child: Text('Get Card Data',
style: TextStyle(color: Colors.white, fontSize: 18.0)),
onPressed: () {
// Get Card Type and Validity Data As Map - @param Card Number
Map cardData =
CreditCardValidator.getCard(_cardNumberController.text);
setState(() {
// Set Card Type and Validity
cardType = cardData[CreditCardValidator.cardType];
isValid = cardData[CreditCardValidator.isValidCard];
});
},
),
),
Padding(
padding: EdgeInsets.all(20),
child: cardType != null
// Display Card Type and Validity
? Text('Card Type : $cardType nCard Number Valid: $isValid',
style: TextStyle(
color: isValid ? Colors.green : Colors.red,
fontSize: 14.0,
fontWeight: FontWeight.w800))
: Text(' n '),
)
],
)),
), // This trailing comma makes auto-formatting nicer for build methods.
));
}
}

Congratulations You Have Learned Flutter Credit Card Validator….!!!

If It Is Helpful Share It With Your Friends….!!!

PrevNext