Credit Card Validator - Flutter

Published March 01, 2020

In this example we are going to learn how to add Credit Card Validator in Flutter.

For this we are using the credit_card_number_validator plugin 

Let's start

Step 1: Create Flutter application

Step 2: add dependencies

Add dependencies in pubspec.yaml file

dev_dependencies:
  flutter_test:
    sdk: flutter
  credit_card_number_validator: ^1.0.4

Step 3: create dart file and add below code

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

class MyCreditCardValidator extends StatefulWidget {
  @override
  _CreditCardValidator createState() => _CreditCardValidator();
}

class _CreditCardValidator 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 = "4242424242424242";
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(backgroundColor: Colors.pink,
            title: Text('Credit Card Validator '),
          ),
          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.pink,
                        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 \n Card 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.
        ));
  }
}

Step 4: update main activity file

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.pink
      ),
      home: MyCreditCardValidator(),
    );
  }

}

Step 5: Run application

Credit Card validator

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

2402 Views