From 90fa932c550ed9a66de43434069d072d92fa7808 Mon Sep 17 00:00:00 2001 From: ManojPadiya <“manoj.p@simformsolutions.com”> Date: Wed, 4 Oct 2023 11:34:13 +0530 Subject: [PATCH] :bug: Update readme file --- README.md | 60 ++++++++++++++++--------- example/lib/main.dart | 30 +++++++------ lib/flutter_credit_card.dart | 1 + lib/src/credit_card_form.dart | 42 +++++------------ lib/src/models/input_configuration.dart | 50 +++++++++++++++++++++ 5 files changed, 118 insertions(+), 65 deletions(-) create mode 100644 lib/src/models/input_configuration.dart diff --git a/README.md b/README.md index b0ff546..b1c3518 100644 --- a/README.md +++ b/README.md @@ -194,9 +194,6 @@ import 'package:flutter_credit_card/flutter_credit_card.dart'; expiryDateKey: expiryDateKey, cardHolderKey: cardHolderKey, onCreditCardModelChange: (CreditCardModel data) {}, // Required - themeColor: Colors.black, // Required - textColor: Colors.white, - cursorColor: Colors.blue, obscureCvv: true, obscureNumber: true, isHolderNameVisible: true, @@ -215,28 +212,49 @@ import 'package:flutter_credit_card/flutter_credit_card.dart'; }, autovalidateMode: AutovalidateMode.always, disableCardNumberAutoFillHints: false, - 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', + inputConfiguration: const InputConfiguration( + 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', + ), + cardNumberTextStyle: TextStyle( + fontSize: 10, + color: Colors.black, + ), + cardHolderTextStyle: TextStyle( + fontSize: 10, + color: Colors.black, + ), + expiryDateTextStyle: TextStyle( + fontSize: 10, + color: Colors.black, + ), + cvvCodeTextStyle: TextStyle( + fontSize: 10, + color: Colors.black, + ), ), ), ``` +## Breaking Changes in 4.x.x +- `themeColor`, `textColor`, and `cursorColor` have been removed from `CreditCardForm` as it can't detect the application theme. Please check out the example app to learn how to apply those using `Theme`. + ## 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 1d7a02d..ba6c502 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -156,20 +156,22 @@ class MySampleState extends State { isExpiryDateVisible: true, cardHolderName: cardHolderName, expiryDate: expiryDate, - cardNumberDecoration: const InputDecoration( - labelText: 'Number', - hintText: 'XXXX XXXX XXXX XXXX', - ), - expiryDateDecoration: const InputDecoration( - labelText: 'Expired Date', - hintText: 'XX/XX', - ), - cvvCodeDecoration: const InputDecoration( - labelText: 'CVV', - hintText: 'XXX', - ), - cardHolderDecoration: const InputDecoration( - labelText: 'Card Holder', + inputConfiguration: const InputConfiguration( + cardNumberDecoration: InputDecoration( + labelText: 'Number', + hintText: 'XXXX XXXX XXXX XXXX', + ), + expiryDateDecoration: InputDecoration( + labelText: 'Expired Date', + hintText: 'XX/XX', + ), + cvvCodeDecoration: InputDecoration( + labelText: 'CVV', + hintText: 'XXX', + ), + cardHolderDecoration: InputDecoration( + labelText: 'Card Holder', + ), ), onCreditCardModelChange: onCreditCardModelChange, ), diff --git a/lib/flutter_credit_card.dart b/lib/flutter_credit_card.dart index aa7b62b..24d1d84 100644 --- a/lib/flutter_credit_card.dart +++ b/lib/flutter_credit_card.dart @@ -7,4 +7,5 @@ export 'src/models/credit_card_brand.dart'; export 'src/models/credit_card_model.dart'; export 'src/models/custom_card_type_icon.dart'; export 'src/models/glassmorphism_config.dart'; +export 'src/models/input_configuration.dart'; export 'src/utils/enumerations.dart' show CardType; diff --git a/lib/src/credit_card_form.dart b/lib/src/credit_card_form.dart index 4b7fb4d..72dd64b 100644 --- a/lib/src/credit_card_form.dart +++ b/lib/src/credit_card_form.dart @@ -16,21 +16,7 @@ class CreditCardForm extends StatefulWidget { required this.formKey, this.obscureCvv = false, this.obscureNumber = false, - this.cardHolderDecoration = const InputDecoration( - labelText: AppConstants.cardHolder, - ), - this.cardNumberDecoration = const InputDecoration( - labelText: AppConstants.cardNumber, - hintText: AppConstants.sixteenX, - ), - this.expiryDateDecoration = const InputDecoration( - labelText: AppConstants.expiryDate, - hintText: AppConstants.expiryDateShort, - ), - this.cvvCodeDecoration = const InputDecoration( - labelText: AppConstants.cvv, - hintText: AppConstants.threeX, - ), + this.inputConfiguration = const InputConfiguration(), this.cardNumberKey, this.cardHolderKey, this.expiryDateKey, @@ -119,17 +105,8 @@ class CreditCardForm extends StatefulWidget { /// A FormFieldState key for cvv code text field. final GlobalKey>? cvvCodeKey; - /// Provides decoration to card number text field. - final InputDecoration cardNumberDecoration; - - /// Provides decoration to card holder text field. - final InputDecoration cardHolderDecoration; - - /// Provides decoration to expiry date text field. - final InputDecoration expiryDateDecoration; - - /// Provides decoration to cvv code text field. - final InputDecoration cvvCodeDecoration; + /// Provides decoration and textStyle to Card's TextField. + final InputConfiguration inputConfiguration; /// Used to configure the auto validation of [FormField] and [Form] widgets. final AutovalidateMode? autovalidateMode; @@ -221,7 +198,8 @@ class _CreditCardFormState extends State { onChanged: _onCardNumberChange, onEditingComplete: () => FocusScope.of(context).requestFocus(expiryDateNode), - decoration: widget.cardNumberDecoration, + decoration: widget.inputConfiguration.cardNumberDecoration, + style: widget.inputConfiguration.cardNumberTextStyle, keyboardType: TextInputType.number, textInputAction: TextInputAction.next, autofillHints: widget.disableCardNumberAutoFillHints @@ -251,7 +229,9 @@ class _CreditCardFormState extends State { focusNode: expiryDateNode, onEditingComplete: () => FocusScope.of(context).requestFocus(cvvFocusNode), - decoration: widget.expiryDateDecoration, + decoration: + widget.inputConfiguration.expiryDateDecoration, + style: widget.inputConfiguration.expiryDateTextStyle, autovalidateMode: widget.autovalidateMode, keyboardType: TextInputType.number, textInputAction: TextInputAction.next, @@ -279,7 +259,8 @@ class _CreditCardFormState extends State { focusNode: cvvFocusNode, controller: _cvvCodeController, onEditingComplete: _onCvvEditComplete, - decoration: widget.cvvCodeDecoration, + decoration: widget.inputConfiguration.cvvCodeDecoration, + style: widget.inputConfiguration.cvvCodeTextStyle, keyboardType: TextInputType.number, autovalidateMode: widget.autovalidateMode, textInputAction: widget.isHolderNameVisible @@ -310,7 +291,8 @@ class _CreditCardFormState extends State { controller: _cardHolderNameController, onChanged: _onCardHolderNameChange, focusNode: cardHolderNode, - decoration: widget.cardHolderDecoration, + decoration: widget.inputConfiguration.cardHolderDecoration, + style: widget.inputConfiguration.cardHolderTextStyle, keyboardType: TextInputType.text, autovalidateMode: widget.autovalidateMode, textInputAction: TextInputAction.done, diff --git a/lib/src/models/input_configuration.dart b/lib/src/models/input_configuration.dart new file mode 100644 index 0000000..f84b6dc --- /dev/null +++ b/lib/src/models/input_configuration.dart @@ -0,0 +1,50 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_credit_card/src/utils/constants.dart'; + +class InputConfiguration { + const InputConfiguration({ + this.cardHolderDecoration = const InputDecoration( + labelText: AppConstants.cardHolder, + ), + this.cardNumberDecoration = const InputDecoration( + labelText: AppConstants.cardNumber, + hintText: AppConstants.sixteenX, + ), + this.expiryDateDecoration = const InputDecoration( + labelText: AppConstants.expiryDate, + hintText: AppConstants.expiryDateShort, + ), + this.cvvCodeDecoration = const InputDecoration( + labelText: AppConstants.cvv, + hintText: AppConstants.threeX, + ), + this.cardNumberTextStyle, + this.cardHolderTextStyle, + this.expiryDateTextStyle, + this.cvvCodeTextStyle, + }); + + /// Provides decoration to card number text field. + final InputDecoration cardNumberDecoration; + + /// Provides decoration to card holder text field. + final InputDecoration cardHolderDecoration; + + /// Provides decoration to expiry date text field. + final InputDecoration expiryDateDecoration; + + /// Provides decoration to cvv code text field. + final InputDecoration cvvCodeDecoration; + + /// Provides textStyle to card number text field. + final TextStyle? cardNumberTextStyle; + + /// Provides textStyle to card holder text field. + final TextStyle? cardHolderTextStyle; + + /// Provides textStyle to expiry date text field. + final TextStyle? expiryDateTextStyle; + + /// Provides textStyle to cvv code text field. + final TextStyle? cvvCodeTextStyle; +}