From f0511bfdb1708ec1e24d97c6d788c9aa57ce1206 Mon Sep 17 00:00:00 2001 From: Eren Gun Date: Wed, 9 Jul 2025 17:51:10 +0300 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E2=9C=A8=20Add=20clearCardData=20m?= =?UTF-8?q?ethod=20to=20reset=20credit=20card=20form=20fields?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/src/credit_card_form.dart | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/lib/src/credit_card_form.dart b/lib/src/credit_card_form.dart index cfd2454..0fc6c28 100644 --- a/lib/src/credit_card_form.dart +++ b/lib/src/credit_card_form.dart @@ -394,4 +394,28 @@ class _CreditCardFormState extends State { onCreditCardModelChange(creditCardModel); widget.onFormComplete?.call(); } + + /// Clears all the card data from the form fields and resets the credit card model. + void clearCardData() { + _cardNumberController.clear(); + _expiryDateController.clear(); + _cardHolderNameController.clear(); + _cvvCodeController.clear(); + + setState(() { + cardNumber = ''; + expiryDate = ''; + cardHolderName = ''; + cvvCode = ''; + isCvvFocused = false; + + creditCardModel.cardNumber = ''; + creditCardModel.expiryDate = ''; + creditCardModel.cardHolderName = ''; + creditCardModel.cvvCode = ''; + creditCardModel.isCvvFocused = false; + + onCreditCardModelChange(creditCardModel); + }); + } } From 3869ffbe9ec36d43af1e59be4cc7678dedbb8c6e Mon Sep 17 00:00:00 2001 From: Eren Gun Date: Wed, 9 Jul 2025 17:52:06 +0300 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E2=9C=A8=20Integrate=20creditCardF?= =?UTF-8?q?ormKey=20for=20form=20validation=20and=20clearing=20functionali?= =?UTF-8?q?ty=20example?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/lib/main.dart | 123 ++++++++++++++++++++++++++++++------------ 1 file changed, 89 insertions(+), 34 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index ba6c502..ddfc807 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -29,6 +29,7 @@ class MySampleState extends State { ), ); final GlobalKey formKey = GlobalKey(); + final GlobalKey> creditCardFormKey = GlobalKey>(); @override Widget build(BuildContext context) { @@ -146,6 +147,7 @@ class MySampleState extends State { child: Column( children: [ CreditCardForm( + key: creditCardFormKey, formKey: formKey, obscureCvv: true, obscureNumber: true, @@ -237,44 +239,82 @@ class MySampleState extends State { ), ), const SizedBox(height: 20), - GestureDetector( - onTap: _onValidate, - child: Container( - margin: const EdgeInsets.symmetric( - horizontal: 16, - vertical: 8, - ), - decoration: const BoxDecoration( - gradient: LinearGradient( - colors: [ - AppColors.colorB58D67, - AppColors.colorB58D67, - AppColors.colorE5D1B2, - AppColors.colorF9EED2, - AppColors.colorEFEFED, - AppColors.colorF9EED2, - AppColors.colorB58D67, - ], - begin: Alignment(-1, -4), - end: Alignment(1, 4), - ), - borderRadius: BorderRadius.all( - Radius.circular(8), + Row( + children: [ + Expanded( + child: GestureDetector( + onTap: _onValidate, + child: Container( + margin: const EdgeInsets.symmetric( + horizontal: 16, + vertical: 8, + ), + decoration: const BoxDecoration( + gradient: LinearGradient( + colors: [ + AppColors.colorB58D67, + AppColors.colorB58D67, + AppColors.colorE5D1B2, + AppColors.colorF9EED2, + AppColors.colorEFEFED, + AppColors.colorF9EED2, + AppColors.colorB58D67, + ], + begin: Alignment(-1, -4), + end: Alignment(1, 4), + ), + borderRadius: BorderRadius.all( + Radius.circular(8), + ), + ), + padding: + const EdgeInsets.symmetric(vertical: 15), + alignment: Alignment.center, + child: const Text( + 'Validate', + style: TextStyle( + color: Colors.black, + fontFamily: 'halter', + fontSize: 14, + package: 'flutter_credit_card', + ), + ), + ), ), ), - padding: - const EdgeInsets.symmetric(vertical: 15), - alignment: Alignment.center, - child: const Text( - 'Validate', - style: TextStyle( - color: Colors.black, - fontFamily: 'halter', - fontSize: 14, - package: 'flutter_credit_card', + Expanded( + child: GestureDetector( + onTap: _onClear, + child: Container( + margin: const EdgeInsets.symmetric( + horizontal: 16, + vertical: 8, + ), + decoration: BoxDecoration( + border: Border.all( + color: AppColors.colorB58D67, + width: 2, + ), + borderRadius: const BorderRadius.all( + Radius.circular(8), + ), + ), + padding: + const EdgeInsets.symmetric(vertical: 15), + alignment: Alignment.center, + child: const Text( + 'Clear', + style: TextStyle( + color: AppColors.colorB58D67, + fontFamily: 'halter', + fontSize: 14, + package: 'flutter_credit_card', + ), + ), + ), ), ), - ), + ], ), ], ), @@ -298,6 +338,21 @@ class MySampleState extends State { } } + void _onClear() { + // Call the clearCardData method on the form + if (creditCardFormKey.currentState != null) { + (creditCardFormKey.currentState as dynamic).clearCardData(); + } + // Also clear the local state + setState(() { + cardNumber = ''; + expiryDate = ''; + cardHolderName = ''; + cvvCode = ''; + isCvvFocused = false; + }); + } + Glassmorphism? _getGlassmorphismConfig() { if (!useGlassMorphism) { return null; From ac02c4bb8f7afeb53789d365657ed24eb2562304 Mon Sep 17 00:00:00 2001 From: Eren Gun Date: Wed, 9 Jul 2025 17:55:30 +0300 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=E2=9C=A8=20Add=20documentation=20f?= =?UTF-8?q?or=20clearing=20form=20data=20using=20clearCardData=20method?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/README.md b/README.md index 898f6f1..ad3b9a8 100644 --- a/README.md +++ b/README.md @@ -257,6 +257,42 @@ import 'package:flutter_credit_card/flutter_credit_card.dart'; ), ``` +### Clearing Form Data + +To clear all the form data programmatically, you can use the `clearCardData()` method: + +```dart +// Create a GlobalKey for the CreditCardForm +final GlobalKey> creditCardFormKey = GlobalKey>(); + +// Use the key with your CreditCardForm +CreditCardForm( + key: creditCardFormKey, + // ... other parameters +) + +// Clear the form data +void clearForm() { + if (creditCardFormKey.currentState != null) { + (creditCardFormKey.currentState as dynamic).clearCardData(); + } + // Also clear your local state variables + setState(() { + cardNumber = ''; + expiryDate = ''; + cardHolderName = ''; + cvvCode = ''; + isCvvFocused = false; + }); +} +``` + +The `clearCardData()` method will: +- Clear all text field controllers (card number, expiry date, card holder name, CVV) +- Reset the credit card model +- Reset the focus state +- Trigger the `onCreditCardModelChange` callback to notify listeners + ## How to use Check out the **example** app in the [example](example) directory or the 'Example' tab on pub.dartlang.org for a more complete example.