Credit Card Validator - Flutter
Build a credit card validator in Flutter using regular expressions for secure input validation. Improve user experience with seamless verification. RRTutors
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
