Credit Card Validator - Flutter
Published March 01, 2020In 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
Article Contributed By :
|
|
|
|
2529 Views |