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. 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; 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); + }); + } }