From ac89a7682e21c6f17fee1e720ba2157808f81ecf Mon Sep 17 00:00:00 2001 From: manojSimfrom <96906187+manojSimfrom@users.noreply.github.com> Date: Thu, 5 Oct 2023 15:15:01 +0530 Subject: [PATCH] :sparkles: Added input decoration class (#153) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: ManojPadiya <“manoj.p@simformsolutions.com”> --- CHANGELOG.md | 10 ++-- README.md | 62 ++++++++++++++++--------- example/lib/main.dart | 30 ++++++------ lib/flutter_credit_card.dart | 1 + lib/src/credit_card_form.dart | 42 +++++------------ lib/src/models/input_configuration.dart | 51 ++++++++++++++++++++ 6 files changed, 128 insertions(+), 68 deletions(-) create mode 100644 lib/src/models/input_configuration.dart diff --git a/CHANGELOG.md b/CHANGELOG.md index ced2a31..a2ad3dd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,10 +8,14 @@ - Added dart 3 support [#146](https://github.com/SimformSolutionsPvtLtd/flutter_credit_card/pull/146). - Fixed package structure and improved code overall [#150](https://github.com/SimformSolutionsPvtLtd/flutter_credit_card/pull/150). - Fixed and improved card type detection logic [#151](https://github.com/SimformSolutionsPvtLtd/flutter_credit_card/pull/151). -- (Breaking Change) Fixed [#136](https://github.com/SimformSolutionsPvtLtd/flutter_credit_card/issues/136) +- [BREAKING] Fixed [#136](https://github.com/SimformSolutionsPvtLtd/flutter_credit_card/issues/136) Application theme not applied to `CreditCardForm`. - Removed `themeColor`, `textColor`, `cursorColor` from `CreditCardForm`. You can check example app - to know how to apply those using `Theme`. + - Removed `themeColor`, `textColor`, `cursorColor` from `CreditCardForm`. You can check example app + to know how to apply those using `Theme`. +- [BREAKING] Added `InputDecoration` class [#153](https://github.com/SimformSolutionsPvtLtd/flutter_credit_card/pull/153). + - The `cardNumberDecoration`, `expiryDateDecoration`, `cvvCodeDecoration`, and `cardHolderDecoration` + properties are moved to the newly added `InputDecoration` class that also has `textStyle` properties + for all the textFields of the `CreditCardForm`. # [3.0.7](https://github.com/SimformSolutionsPvtLtd/flutter_credit_card/tree/3.0.7) diff --git a/README.md b/README.md index b0ff546..8e3e15e 100644 --- a/README.md +++ b/README.md @@ -41,6 +41,11 @@ A Flutter package allows you to easily implement the Credit card's UI easily wit +## Migration guide for Version 4.0.0 +- The `themeColor`, `textColor`, and `cursorColor` properties have been removed from `CreditCardForm` due to changes in how it detects and applies application themes. Please check out the example app to learn how to apply those using `Theme`. +- The `cardNumberDecoration`, `expiryDateDecoration`, `cvvCodeDecoration`, and `cardHolderDecoration` properties are moved to the newly added `InputDecoration` class that also has `textStyle` properties for all the textFields of the `CreditCardForm`. + + ## Installing 1. Add dependency to `pubspec.yaml` @@ -194,9 +199,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,24 +217,42 @@ 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: InputDecoration( + border: OutlineInputBorder(), + labelText: 'Number', + hintText: 'XXXX XXXX XXXX XXXX', + ), + expiryDateDecoration: InputDecoration( + border: OutlineInputBorder(), + labelText: 'Expired Date', + hintText: 'XX/XX', + ), + cvvCodeDecoration: InputDecoration( + border: OutlineInputBorder(), + labelText: 'CVV', + hintText: 'XXX', + ), + cardHolderDecoration: 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, + ), ), ), ``` 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..e8b0a36 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 [InputDecoration] and [TextStyle] to [CreditCardForm]'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..b4f7790 --- /dev/null +++ b/lib/src/models/input_configuration.dart @@ -0,0 +1,51 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_credit_card/src/utils/constants.dart'; + +class InputConfiguration { + /// Provides [InputDecoration] and [TextStyle] to [CreditCardForm]'s [TextField]. + 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; +}