From 4f0b81006825a5fae8e0c1aa6bb36528fd338a69 Mon Sep 17 00:00:00 2001 From: Aditya Chavda Date: Mon, 18 Sep 2023 14:59:34 +0530 Subject: [PATCH] :bug: Fix Theme Application --- CHANGELOG.md | 8 +- example/lib/main.dart | 43 ++--- lib/credit_card_form.dart | 381 +++++++++++++++++--------------------- 3 files changed, 197 insertions(+), 235 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2603331..f1e6e7b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,10 @@ -# [3.0.7](https://github.com/SimformSolutionsPvtLtd/flutter_credit_card/tree/3.0.7) (Unreleased) +# [3.0.8](https://github.com/SimformSolutionsPvtLtd/flutter_credit_card/tree/3.0.8) (Unreleased) + +- Fixed [#136](https://github.com/SimformSolutionsPvtLtd/flutter_credit_card/issues/136) + Application theme not applied to `CreditCardForm`. Removed `themeColor`, `textColor`, + `cursorColor` from `CreditCardForm`. + +# [3.0.7](https://github.com/SimformSolutionsPvtLtd/flutter_credit_card/tree/3.0.7) - Enhancement [#133](https://github.com/SimformSolutionsPvtLtd/flutter_credit_card/pull/133) Add valid thru label customization. - Enhancement [#142](https://github.com/SimformSolutionsPvtLtd/flutter_credit_card/issues/142) Adding RuPay as card-type for users centric to India diff --git a/example/lib/main.dart b/example/lib/main.dart index ba9f25c..45e9fc4 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -40,7 +40,22 @@ class MySampleState extends State { title: 'Flutter Credit Card View Demo', debugShowCheckedModeBanner: false, theme: ThemeData( - primarySwatch: Colors.blue, + textTheme: const TextTheme( + // Text style for text fields' input. + titleMedium: TextStyle(color: Colors.white, fontSize: 18), + ), + colorScheme: ColorScheme.fromSeed( + seedColor: Colors.white, + // Defines colors like cursor color of the text fields. + primary: Colors.white, + ), + // Decoration theme for the text fields. + inputDecorationTheme: InputDecorationTheme( + hintStyle: const TextStyle(color: Colors.white), + labelStyle: const TextStyle(color: Colors.white), + focusedBorder: border, + enabledBorder: border, + ), ), home: Scaffold( resizeToAvoidBottomInset: false, @@ -106,37 +121,19 @@ class MySampleState extends State { isExpiryDateVisible: true, cardHolderName: cardHolderName, expiryDate: expiryDate, - themeColor: Colors.blue, - textColor: Colors.white, - cardNumberDecoration: InputDecoration( + cardNumberDecoration: const InputDecoration( labelText: 'Number', hintText: 'XXXX XXXX XXXX XXXX', - hintStyle: const TextStyle(color: Colors.white), - labelStyle: const TextStyle(color: Colors.white), - focusedBorder: border, - enabledBorder: border, ), - expiryDateDecoration: InputDecoration( - hintStyle: const TextStyle(color: Colors.white), - labelStyle: const TextStyle(color: Colors.white), - focusedBorder: border, - enabledBorder: border, + expiryDateDecoration: const InputDecoration( labelText: 'Expired Date', hintText: 'XX/XX', ), - cvvCodeDecoration: InputDecoration( - hintStyle: const TextStyle(color: Colors.white), - labelStyle: const TextStyle(color: Colors.white), - focusedBorder: border, - enabledBorder: border, + cvvCodeDecoration: const InputDecoration( labelText: 'CVV', hintText: 'XXX', ), - cardHolderDecoration: InputDecoration( - hintStyle: const TextStyle(color: Colors.white), - labelStyle: const TextStyle(color: Colors.white), - focusedBorder: border, - enabledBorder: border, + cardHolderDecoration: const InputDecoration( labelText: 'Card Holder', ), onCreditCardModelChange: onCreditCardModelChange, diff --git a/lib/credit_card_form.dart b/lib/credit_card_form.dart index f2da606..7975c52 100644 --- a/lib/credit_card_form.dart +++ b/lib/credit_card_form.dart @@ -11,9 +11,6 @@ class CreditCardForm extends StatefulWidget { this.obscureCvv = false, this.obscureNumber = false, required this.onCreditCardModelChange, - required this.themeColor, - this.textColor = Colors.black, - this.cursorColor, this.cardHolderDecoration = const InputDecoration( labelText: 'Card holder', ), @@ -74,15 +71,6 @@ class CreditCardForm extends StatefulWidget { /// Provides callback when there is any change in [CreditCardModel]. final void Function(CreditCardModel) onCreditCardModelChange; - /// Color of the theme of the credit card form. - final Color themeColor; - - /// Color of text in the credit card form. - final Color textColor; - - /// Cursor color in the credit card form. - final Color? cursorColor; - /// When enabled cvv gets hidden with obscuring characters. Defaults to /// false. final bool obscureCvv; @@ -174,7 +162,6 @@ class _CreditCardFormState extends State { late String cardHolderName; late String cvvCode; bool isCvvFocused = false; - late Color themeColor; late void Function(CreditCardModel) onCreditCardModelChange; late CreditCardModel creditCardModel; @@ -231,217 +218,189 @@ class _CreditCardFormState extends State { super.dispose(); } - @override - void didChangeDependencies() { - themeColor = widget.themeColor; - super.didChangeDependencies(); - } - @override Widget build(BuildContext context) { - return Theme( - data: ThemeData( - primaryColor: themeColor.withOpacity(0.8), - primaryColorDark: themeColor, - ), - child: Form( - key: widget.formKey, - child: Column( - children: [ - Visibility( - visible: widget.isCardNumberVisible, - child: Container( - padding: const EdgeInsets.symmetric(vertical: 8.0), - margin: const EdgeInsets.only(left: 16, top: 16, right: 16), - child: TextFormField( - key: widget.cardNumberKey, - obscureText: widget.obscureNumber, - controller: _cardNumberController, - onChanged: (String value) { - setState(() { - cardNumber = _cardNumberController.text; - creditCardModel.cardNumber = cardNumber; - onCreditCardModelChange(creditCardModel); - }); - }, - cursorColor: widget.cursorColor ?? themeColor, - onEditingComplete: () { - FocusScope.of(context).requestFocus(expiryDateNode); - }, - style: TextStyle( - color: widget.textColor, - ), - decoration: widget.cardNumberDecoration, - keyboardType: TextInputType.number, - textInputAction: TextInputAction.next, - autofillHints: widget.disableCardNumberAutoFillHints - ? null - : const [AutofillHints.creditCardNumber], - autovalidateMode: widget.autovalidateMode, - validator: widget.cardNumberValidator ?? - (String? value) { - // Validate less that 13 digits +3 white spaces - if (value!.isEmpty || value.length < 16) { - return widget.numberValidationMessage; - } - return null; - }, - ), + return Form( + key: widget.formKey, + child: Column( + children: [ + Visibility( + visible: widget.isCardNumberVisible, + child: Container( + padding: const EdgeInsets.symmetric(vertical: 8.0), + margin: const EdgeInsets.only(left: 16, top: 16, right: 16), + child: TextFormField( + key: widget.cardNumberKey, + obscureText: widget.obscureNumber, + controller: _cardNumberController, + onChanged: (String value) { + setState(() { + cardNumber = _cardNumberController.text; + creditCardModel.cardNumber = cardNumber; + onCreditCardModelChange(creditCardModel); + }); + }, + onEditingComplete: () { + FocusScope.of(context).requestFocus(expiryDateNode); + }, + decoration: widget.cardNumberDecoration, + keyboardType: TextInputType.number, + textInputAction: TextInputAction.next, + autofillHints: widget.disableCardNumberAutoFillHints + ? null + : const [AutofillHints.creditCardNumber], + autovalidateMode: widget.autovalidateMode, + validator: widget.cardNumberValidator ?? + (String? value) { + // Validate less that 13 digits +3 white spaces + if (value!.isEmpty || value.length < 16) { + return widget.numberValidationMessage; + } + return null; + }, ), ), - Row( - children: [ - Visibility( - visible: widget.isExpiryDateVisible, - child: Expanded( - child: Container( - padding: const EdgeInsets.symmetric(vertical: 8.0), - margin: - const EdgeInsets.only(left: 16, top: 8, right: 16), - child: TextFormField( - key: widget.expiryDateKey, - controller: _expiryDateController, - onChanged: (String value) { - if (_expiryDateController.text - .startsWith(RegExp('[2-9]'))) { - _expiryDateController.text = - '0' + _expiryDateController.text; - } - setState(() { - expiryDate = _expiryDateController.text; - creditCardModel.expiryDate = expiryDate; - onCreditCardModelChange(creditCardModel); - }); - }, - cursorColor: widget.cursorColor ?? themeColor, - focusNode: expiryDateNode, - onEditingComplete: () { - FocusScope.of(context).requestFocus(cvvFocusNode); - }, - style: TextStyle( - color: widget.textColor, - ), - decoration: widget.expiryDateDecoration, - keyboardType: TextInputType.number, - textInputAction: TextInputAction.next, - autofillHints: const [ - AutofillHints.creditCardExpirationDate - ], - validator: widget.expiryDateValidator ?? - (String? value) { - if (value!.isEmpty) { - return widget.dateValidationMessage; - } - final DateTime now = DateTime.now(); - final List date = - value.split(RegExp(r'/')); - final int month = int.parse(date.first); - final int year = int.parse('20${date.last}'); - final int lastDayOfMonth = month < 12 - ? DateTime(year, month + 1, 0).day - : DateTime(year + 1, 1, 0).day; - final DateTime cardDate = DateTime( - year, month, lastDayOfMonth, 23, 59, 59, 999); - - if (cardDate.isBefore(now) || - month > 12 || - month == 0) { - return widget.dateValidationMessage; - } - return null; - }, - ), + ), + Row( + children: [ + Visibility( + visible: widget.isExpiryDateVisible, + child: Expanded( + child: Container( + padding: const EdgeInsets.symmetric(vertical: 8.0), + margin: + const EdgeInsets.only(left: 16, top: 8, right: 16), + child: TextFormField( + key: widget.expiryDateKey, + controller: _expiryDateController, + onChanged: (String value) { + if (_expiryDateController.text + .startsWith(RegExp('[2-9]'))) { + _expiryDateController.text = + '0' + _expiryDateController.text; + } + setState(() { + expiryDate = _expiryDateController.text; + creditCardModel.expiryDate = expiryDate; + onCreditCardModelChange(creditCardModel); + }); + }, + focusNode: expiryDateNode, + onEditingComplete: () { + FocusScope.of(context).requestFocus(cvvFocusNode); + }, + decoration: widget.expiryDateDecoration, + keyboardType: TextInputType.number, + textInputAction: TextInputAction.next, + autofillHints: const [ + AutofillHints.creditCardExpirationDate + ], + validator: widget.expiryDateValidator ?? + (String? value) { + if (value!.isEmpty) { + return widget.dateValidationMessage; + } + final DateTime now = DateTime.now(); + final List date = + value.split(RegExp(r'/')); + final int month = int.parse(date.first); + final int year = int.parse('20${date.last}'); + final int lastDayOfMonth = month < 12 + ? DateTime(year, month + 1, 0).day + : DateTime(year + 1, 1, 0).day; + final DateTime cardDate = DateTime( + year, month, lastDayOfMonth, 23, 59, 59, 999); + + if (cardDate.isBefore(now) || + month > 12 || + month == 0) { + return widget.dateValidationMessage; + } + return null; + }, ), ), ), - Expanded( - child: Visibility( - visible: widget.enableCvv, - child: Container( - padding: const EdgeInsets.symmetric(vertical: 8.0), - margin: - const EdgeInsets.only(left: 16, top: 8, right: 16), - child: TextFormField( - key: widget.cvvCodeKey, - obscureText: widget.obscureCvv, - focusNode: cvvFocusNode, - controller: _cvvCodeController, - cursorColor: widget.cursorColor ?? themeColor, - onEditingComplete: () { - if (widget.isHolderNameVisible) - FocusScope.of(context).requestFocus(cardHolderNode); - else { - FocusScope.of(context).unfocus(); - onCreditCardModelChange(creditCardModel); - widget.onFormComplete?.call(); - } - }, - style: TextStyle( - color: widget.textColor, - ), - decoration: widget.cvvCodeDecoration, - keyboardType: TextInputType.number, - textInputAction: widget.isHolderNameVisible - ? TextInputAction.next - : TextInputAction.done, - autofillHints: const [ - AutofillHints.creditCardSecurityCode - ], - onChanged: (String text) { - setState(() { - cvvCode = text; - creditCardModel.cvvCode = cvvCode; - onCreditCardModelChange(creditCardModel); - }); - }, - validator: widget.cvvValidator ?? - (String? value) { - if (value!.isEmpty || value.length < 3) { - return widget.cvvValidationMessage; - } - return null; - }, - ), + ), + Expanded( + child: Visibility( + visible: widget.enableCvv, + child: Container( + padding: const EdgeInsets.symmetric(vertical: 8.0), + margin: + const EdgeInsets.only(left: 16, top: 8, right: 16), + child: TextFormField( + key: widget.cvvCodeKey, + obscureText: widget.obscureCvv, + focusNode: cvvFocusNode, + controller: _cvvCodeController, + onEditingComplete: () { + if (widget.isHolderNameVisible) + FocusScope.of(context).requestFocus(cardHolderNode); + else { + FocusScope.of(context).unfocus(); + onCreditCardModelChange(creditCardModel); + widget.onFormComplete?.call(); + } + }, + decoration: widget.cvvCodeDecoration, + keyboardType: TextInputType.number, + textInputAction: widget.isHolderNameVisible + ? TextInputAction.next + : TextInputAction.done, + autofillHints: const [ + AutofillHints.creditCardSecurityCode + ], + onChanged: (String text) { + setState(() { + cvvCode = text; + creditCardModel.cvvCode = cvvCode; + onCreditCardModelChange(creditCardModel); + }); + }, + validator: widget.cvvValidator ?? + (String? value) { + if (value!.isEmpty || value.length < 3) { + return widget.cvvValidationMessage; + } + return null; + }, ), ), ), - ], - ), - Visibility( - visible: widget.isHolderNameVisible, - child: Container( - padding: const EdgeInsets.symmetric(vertical: 8.0), - margin: const EdgeInsets.only(left: 16, top: 8, right: 16), - child: TextFormField( - key: widget.cardHolderKey, - controller: _cardHolderNameController, - onChanged: (String value) { - setState(() { - cardHolderName = _cardHolderNameController.text; - creditCardModel.cardHolderName = cardHolderName; - onCreditCardModelChange(creditCardModel); - }); - }, - cursorColor: widget.cursorColor ?? themeColor, - focusNode: cardHolderNode, - style: TextStyle( - color: widget.textColor, - ), - decoration: widget.cardHolderDecoration, - keyboardType: TextInputType.text, - textInputAction: TextInputAction.done, - autofillHints: const [AutofillHints.creditCardName], - onEditingComplete: () { - FocusScope.of(context).unfocus(); + ), + ], + ), + Visibility( + visible: widget.isHolderNameVisible, + child: Container( + padding: const EdgeInsets.symmetric(vertical: 8.0), + margin: const EdgeInsets.only(left: 16, top: 8, right: 16), + child: TextFormField( + key: widget.cardHolderKey, + controller: _cardHolderNameController, + onChanged: (String value) { + setState(() { + cardHolderName = _cardHolderNameController.text; + creditCardModel.cardHolderName = cardHolderName; onCreditCardModelChange(creditCardModel); - widget.onFormComplete?.call(); - }, - validator: widget.cardHolderValidator, - ), + }); + }, + focusNode: cardHolderNode, + decoration: widget.cardHolderDecoration, + keyboardType: TextInputType.text, + textInputAction: TextInputAction.done, + autofillHints: const [AutofillHints.creditCardName], + onEditingComplete: () { + FocusScope.of(context).unfocus(); + onCreditCardModelChange(creditCardModel); + widget.onFormComplete?.call(); + }, + validator: widget.cardHolderValidator, ), ), - ], - ), + ), + ], ), ); }