Created
March 11, 2021 07:55
-
-
Save ShaiqAhmedkhan/fa1c1eea56e74194ebc79ca5b2af1818 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
import 'package:flutter_credit_card/credit_card_form.dart'; | |
import 'package:flutter_credit_card/credit_card_model.dart'; | |
import 'package:flutter_credit_card/flutter_credit_card.dart'; | |
class CreditCardPage extends StatefulWidget { | |
@override | |
State<StatefulWidget> createState() { | |
return CreditCardPageState(); | |
} | |
} | |
class CreditCardPageState extends State<CreditCardPage> { | |
String cardNumber = ''; | |
String expiryDate = ''; | |
String cardHolderName = ''; | |
String cvvCode = ''; | |
bool isCvvFocused = false; | |
final GlobalKey<FormState> formKey = GlobalKey<FormState>(); | |
@override | |
Widget build(BuildContext context) { | |
return Scaffold( | |
backgroundColor: Colors.teal[50], | |
appBar: AppBar( | |
automaticallyImplyLeading: false, | |
title: Text('Flutter Credit Card View Demo'), | |
), | |
resizeToAvoidBottomInset: true, | |
body: SafeArea( | |
child: Column( | |
children: <Widget>[ | |
CreditCardWidget( | |
cardBgColor: Colors.redAccent[200], | |
cardNumber: cardNumber, | |
expiryDate: expiryDate, | |
cardHolderName: cardHolderName, | |
cvvCode: cvvCode, | |
showBackView: isCvvFocused, | |
obscureCardNumber: true, | |
obscureCardCvv: true, | |
), | |
Expanded( | |
child: SingleChildScrollView( | |
child: Column( | |
children: [ | |
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', | |
), | |
), | |
SizedBox(height: 20,), | |
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!'); | |
} | |
}, | |
) | |
], | |
), | |
), | |
), | |
], | |
), | |
), | |
); | |
} | |
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(); | |
}), | |
], | |
); | |
}, | |
); | |
} | |
void onCreditCardModelChange(CreditCardModel creditCardModel) { | |
setState(() { | |
cardNumber = creditCardModel.cardNumber; | |
expiryDate = creditCardModel.expiryDate; | |
cardHolderName = creditCardModel.cardHolderName; | |
cvvCode = creditCardModel.cvvCode; | |
isCvvFocused = creditCardModel.isCvvFocused; | |
}); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment