From 05cf5b5c4a0766cdf76a18fdc006cd4bd2edeaba 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 | 4 + example/lib/main.dart | 85 ++++++------ lib/src/credit_card_form.dart | 247 +++++++++++++++------------------- 3 files changed, 153 insertions(+), 183 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c458915..ced2a31 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,10 @@ - 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) + 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`. # [3.0.7](https://github.com/SimformSolutionsPvtLtd/flutter_credit_card/tree/3.0.7) diff --git a/example/lib/main.dart b/example/lib/main.dart index 1bbdb86..1d7a02d 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -40,23 +40,51 @@ class MySampleState extends State { debugShowCheckedModeBanner: false, themeMode: isLightTheme ? ThemeMode.light : ThemeMode.dark, theme: ThemeData( - brightness: Brightness.light, - primaryColor: Colors.white, - scaffoldBackgroundColor: Colors.black, + textTheme: const TextTheme( + // Text style for text fields' input. + titleMedium: TextStyle(color: Colors.black, fontSize: 18), + ), + colorScheme: ColorScheme.fromSeed( + brightness: Brightness.light, + seedColor: Colors.white, + background: Colors.black, + // Defines colors like cursor color of the text fields. + primary: Colors.black, + ), + // Decoration theme for the text fields. + inputDecorationTheme: InputDecorationTheme( + hintStyle: const TextStyle(color: Colors.black), + labelStyle: const TextStyle(color: Colors.black), + focusedBorder: border, + enabledBorder: border, + ), ), darkTheme: ThemeData( - brightness: Brightness.dark, - primaryColor: Colors.black, - scaffoldBackgroundColor: Colors.white, + textTheme: const TextTheme( + // Text style for text fields' input. + titleMedium: TextStyle(color: Colors.white, fontSize: 18), + ), + colorScheme: ColorScheme.fromSeed( + brightness: Brightness.dark, + seedColor: Colors.black, + background: 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, body: Builder( builder: (BuildContext context) { - final Color bgColor = Theme.of(context).scaffoldBackgroundColor; return Container( decoration: BoxDecoration( - color: bgColor, image: DecorationImage( image: ExactAssetImage( isLightTheme ? 'assets/bg-light.png' : 'assets/bg-dark.png', @@ -128,37 +156,19 @@ class MySampleState extends State { isExpiryDateVisible: true, cardHolderName: cardHolderName, expiryDate: expiryDate, - themeColor: Theme.of(context).primaryColor, - textColor: bgColor, - cardNumberDecoration: InputDecoration( + cardNumberDecoration: const InputDecoration( labelText: 'Number', hintText: 'XXXX XXXX XXXX XXXX', - hintStyle: TextStyle(color: bgColor), - labelStyle: TextStyle(color: bgColor), - focusedBorder: border, - enabledBorder: border, ), - expiryDateDecoration: InputDecoration( - hintStyle: TextStyle(color: bgColor), - labelStyle: TextStyle(color: bgColor), - focusedBorder: border, - enabledBorder: border, + expiryDateDecoration: const InputDecoration( labelText: 'Expired Date', hintText: 'XX/XX', ), - cvvCodeDecoration: InputDecoration( - hintStyle: TextStyle(color: bgColor), - labelStyle: TextStyle(color: bgColor), - focusedBorder: border, - enabledBorder: border, + cvvCodeDecoration: const InputDecoration( labelText: 'CVV', hintText: 'XXX', ), - cardHolderDecoration: InputDecoration( - hintStyle: TextStyle(color: bgColor), - labelStyle: TextStyle(color: bgColor), - focusedBorder: border, - enabledBorder: border, + cardHolderDecoration: const InputDecoration( labelText: 'Card Holder', ), onCreditCardModelChange: onCreditCardModelChange, @@ -170,10 +180,7 @@ class MySampleState extends State { child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - const Text( - 'Glassmorphism', - style: TextStyle(fontSize: 18), - ), + const Text('Glassmorphism'), const Spacer(), Switch( value: useGlassMorphism, @@ -193,10 +200,7 @@ class MySampleState extends State { child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - const Text( - 'Card Image', - style: TextStyle(fontSize: 18), - ), + const Text('Card Image'), const Spacer(), Switch( value: useBackgroundImage, @@ -216,10 +220,7 @@ class MySampleState extends State { child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - const Text( - 'Floating Card', - style: TextStyle(fontSize: 18), - ), + const Text('Floating Card'), const Spacer(), Switch( value: useFloatingAnimation, diff --git a/lib/src/credit_card_form.dart b/lib/src/credit_card_form.dart index 8b6bf6c..4b7fb4d 100644 --- a/lib/src/credit_card_form.dart +++ b/lib/src/credit_card_form.dart @@ -13,12 +13,9 @@ class CreditCardForm extends StatefulWidget { required this.cardHolderName, required this.cvvCode, required this.onCreditCardModelChange, - required this.themeColor, required this.formKey, this.obscureCvv = false, this.obscureNumber = false, - this.textColor = Colors.black, - this.cursorColor, this.cardHolderDecoration = const InputDecoration( labelText: AppConstants.cardHolder, ), @@ -79,15 +76,6 @@ class CreditCardForm extends StatefulWidget { /// Provides callback when there is any change in [CreditCardModel]. final CCModelChangeCallback 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; @@ -179,7 +167,6 @@ class _CreditCardFormState extends State { late String cardHolderName; late String cvvCode; bool isCvvFocused = false; - late Color themeColor; late final CreditCardModel creditCardModel; late final CCModelChangeCallback onCreditCardModelChange = @@ -216,146 +203,124 @@ class _CreditCardFormState extends State { cvvFocusNode.addListener(textFieldFocusDidChange); } - @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: _onCardNumberChange, - 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) => Validators.cardNumberValidator( - value, - widget.numberValidationMessage, - ), - ), + 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: _onCardNumberChange, + 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) => Validators.cardNumberValidator( + value, + widget.numberValidationMessage, + ), ), ), - 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: _onExpiryDateChange, - cursorColor: widget.cursorColor ?? themeColor, - focusNode: expiryDateNode, - onEditingComplete: () => - FocusScope.of(context).requestFocus(cvvFocusNode), - style: TextStyle(color: widget.textColor), - decoration: widget.expiryDateDecoration, - autovalidateMode: widget.autovalidateMode, - keyboardType: TextInputType.number, - textInputAction: TextInputAction.next, - autofillHints: const [ - AutofillHints.creditCardExpirationDate - ], - validator: widget.expiryDateValidator ?? - (String? value) => Validators.expiryDateValidator( - value, - widget.dateValidationMessage, - ), - ), + ), + 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: _onExpiryDateChange, + focusNode: expiryDateNode, + onEditingComplete: () => + FocusScope.of(context).requestFocus(cvvFocusNode), + decoration: widget.expiryDateDecoration, + autovalidateMode: widget.autovalidateMode, + keyboardType: TextInputType.number, + textInputAction: TextInputAction.next, + autofillHints: const [ + AutofillHints.creditCardExpirationDate + ], + validator: widget.expiryDateValidator ?? + (String? value) => Validators.expiryDateValidator( + value, + widget.dateValidationMessage, + ), ), ), ), - 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: _onCvvEditComplete, - style: TextStyle(color: widget.textColor), - decoration: widget.cvvCodeDecoration, - keyboardType: TextInputType.number, - autovalidateMode: widget.autovalidateMode, - textInputAction: widget.isHolderNameVisible - ? TextInputAction.next - : TextInputAction.done, - autofillHints: const [ - AutofillHints.creditCardSecurityCode - ], - onChanged: _onCvvChange, - validator: widget.cvvValidator ?? - (String? value) => Validators.cvvValidator( - value, - widget.cvvValidationMessage, - ), - ), + ), + 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: _onCvvEditComplete, + decoration: widget.cvvCodeDecoration, + keyboardType: TextInputType.number, + autovalidateMode: widget.autovalidateMode, + textInputAction: widget.isHolderNameVisible + ? TextInputAction.next + : TextInputAction.done, + autofillHints: const [ + AutofillHints.creditCardSecurityCode + ], + onChanged: _onCvvChange, + validator: widget.cvvValidator ?? + (String? value) => Validators.cvvValidator( + value, + widget.cvvValidationMessage, + ), ), ), ), - ], - ), - 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: _onCardHolderNameChange, - cursorColor: widget.cursorColor ?? themeColor, - focusNode: cardHolderNode, - style: TextStyle(color: widget.textColor), - decoration: widget.cardHolderDecoration, - keyboardType: TextInputType.text, - autovalidateMode: widget.autovalidateMode, - textInputAction: TextInputAction.done, - autofillHints: const [AutofillHints.creditCardName], - onEditingComplete: _onHolderNameEditComplete, - validator: widget.cardHolderValidator, - ), + ), + ], + ), + 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: _onCardHolderNameChange, + focusNode: cardHolderNode, + decoration: widget.cardHolderDecoration, + keyboardType: TextInputType.text, + autovalidateMode: widget.autovalidateMode, + textInputAction: TextInputAction.done, + autofillHints: const [AutofillHints.creditCardName], + onEditingComplete: _onHolderNameEditComplete, + validator: widget.cardHolderValidator, ), ), - ], - ), + ), + ], ), ); }