✨ Added input decoration class (#153)

Co-authored-by: ManojPadiya <“manoj.p@simformsolutions.com”>
SimformSolutionsPvtLtd · Oct 5, 2023 · ac89a76 · ac89a76
1 parent 7111fa2
commit ac89a76
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 68 deletions.
diff --git 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
@@ -41,6 +41,11 @@ A Flutter package allows you to easily implement the Credit card's UI easily wit
     </tr>
 </table>
 
+## 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
@@ -156,20 +156,22 @@ class MySampleState extends State<MySample> {
                               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
@@ -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
@@ -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<FormFieldState<String>>? 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<CreditCardForm> {
                 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<CreditCardForm> {
                       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<CreditCardForm> {
                       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<CreditCardForm> {
                 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
@@ -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;
+}