🐛 Update readme file

SimformSolutionsPvtLtd · Oct 4, 2023 · 90fa932 · 90fa932
1 parent 7111fa2
commit 90fa932
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 65 deletions.
diff --git 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
@@ -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 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<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,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;
+}