From aadfd65d54db6d1fb2ceabb5739573046928e635 Mon Sep 17 00:00:00 2001 From: Stefan Schaller Date: Fri, 26 May 2023 08:21:40 +0300 Subject: [PATCH] fix issue with not switching theme after the initial setup --- lib/otp_field.dart | 54 ++++++++++++++++++++++++---------------- lib/otp_field_style.dart | 41 ++++++++++++++++++++++++------ 2 files changed, 67 insertions(+), 28 deletions(-) diff --git a/lib/otp_field.dart b/lib/otp_field.dart index 279571d..70c40f2 100644 --- a/lib/otp_field.dart +++ b/lib/otp_field.dart @@ -73,7 +73,7 @@ class OTPTextField extends StatefulWidget { this.hasError = false, this.keyboardType = TextInputType.number, this.style = const TextStyle(), - this.outlineBorderRadius: 10, + this.outlineBorderRadius = 10, this.textCapitalization = TextCapitalization.none, this.textFieldAlignment = MainAxisAlignment.spaceBetween, this.obscureText = false, @@ -88,10 +88,10 @@ class OTPTextField extends StatefulWidget { super(key: key); @override - _OTPTextFieldState createState() => _OTPTextFieldState(); + State createState() => OTPTextFieldState(); } -class _OTPTextFieldState extends State { +class OTPTextFieldState extends State { late OtpFieldStyle _otpFieldStyle; late List _focusNodes; late List _textControllers; @@ -123,7 +123,9 @@ class _OTPTextFieldState extends State { @override void dispose() { - _textControllers.forEach((controller) => controller?.dispose()); + for (var controller in _textControllers) { + controller?.dispose(); + } super.dispose(); } @@ -135,7 +137,7 @@ class _OTPTextFieldState extends State { mainAxisAlignment: widget.textFieldAlignment, crossAxisAlignment: CrossAxisAlignment.center, children: List.generate(widget.length, (index) { - return buildTextField(context, index); + return _buildTextField(context, index); }), ), ); @@ -145,7 +147,7 @@ class _OTPTextFieldState extends State { /// /// * Requires a build context /// * Requires Int position of the field - Widget buildTextField(BuildContext context, int index) { + Widget _buildTextField(BuildContext context, int index) { FocusNode? focusNode = _focusNodes[index]; TextEditingController? textEditingController = _textControllers[index]; @@ -162,7 +164,7 @@ class _OTPTextFieldState extends State { final isLast = index == widget.length - 1; - InputBorder _getBorder(Color color) { + InputBorder getBorder(Color color) { final colorOrError = widget.hasError ? _otpFieldStyle.errorBorderColor : color; @@ -195,12 +197,12 @@ class _OTPTextFieldState extends State { fillColor: _otpFieldStyle.backgroundColor, counterText: "", contentPadding: widget.contentPadding, - border: _getBorder(_otpFieldStyle.borderColor), - focusedBorder: _getBorder(_otpFieldStyle.focusBorderColor), - enabledBorder: _getBorder(_otpFieldStyle.enabledBorderColor), - disabledBorder: _getBorder(_otpFieldStyle.disabledBorderColor), - errorBorder: _getBorder(_otpFieldStyle.errorBorderColor), - focusedErrorBorder: _getBorder(_otpFieldStyle.errorBorderColor), + border: getBorder(_otpFieldStyle.borderColor), + focusedBorder: getBorder(_otpFieldStyle.focusBorderColor), + enabledBorder: getBorder(_otpFieldStyle.enabledBorderColor), + disabledBorder: getBorder(_otpFieldStyle.disabledBorderColor), + errorBorder: getBorder(_otpFieldStyle.errorBorderColor), + focusedErrorBorder: getBorder(_otpFieldStyle.errorBorderColor), errorText: null, // to hide the error text errorStyle: const TextStyle(height: 0, fontSize: 0), @@ -262,9 +264,9 @@ class _OTPTextFieldState extends State { String _getCurrentPin() { String currentPin = ""; - _pin.forEach((String value) { + for (var value in _pin) { currentPin += value; - }); + } return currentPin; } @@ -294,12 +296,22 @@ class _OTPTextFieldState extends State { // Call the `onChanged` callback function widget.onChanged!(currentPin); } + + @override + void didUpdateWidget(covariant OTPTextField oldWidget) { + super.didUpdateWidget(oldWidget); + + if (widget.otpFieldStyle != null && + widget.otpFieldStyle != oldWidget.otpFieldStyle) { + _otpFieldStyle = widget.otpFieldStyle!; + } + } } class OtpFieldController { - late _OTPTextFieldState _otpTextFieldState; + late OTPTextFieldState _otpTextFieldState; - void setOtpTextFieldState(_OTPTextFieldState state) { + void setOtpTextFieldState(OTPTextFieldState state) { _otpTextFieldState = state; } @@ -310,11 +322,11 @@ class OtpFieldController { }); final textControllers = _otpTextFieldState._textControllers; - textControllers.forEach((textController) { + for (var textController in textControllers) { if (textController != null) { textController.text = ''; } - }); + } final firstFocusNode = _otpTextFieldState._focusNodes[0]; if (firstFocusNode != null) { @@ -367,9 +379,9 @@ class OtpFieldController { } String newPin = ""; - currentPin.forEach((item) { + for (var item in currentPin) { newPin += item; - }); + } final widget = _otpTextFieldState.widget; if (widget.onChanged != null) { diff --git a/lib/otp_field_style.dart b/lib/otp_field_style.dart index c15dc2b..e860c25 100644 --- a/lib/otp_field_style.dart +++ b/lib/otp_field_style.dart @@ -19,11 +19,38 @@ class OtpFieldStyle { /// The border color of text field when disabled. final Color errorBorderColor; - OtpFieldStyle( - {this.backgroundColor: Colors.transparent, - this.borderColor: Colors.black26, - this.focusBorderColor: Colors.blue, - this.disabledBorderColor: Colors.grey, - this.enabledBorderColor: Colors.black26, - this.errorBorderColor: Colors.red}); + OtpFieldStyle({ + this.backgroundColor = Colors.transparent, + this.borderColor = Colors.black26, + this.focusBorderColor = Colors.blue, + this.disabledBorderColor = Colors.grey, + this.enabledBorderColor = Colors.black26, + this.errorBorderColor = Colors.red, + }); + + @override + bool operator ==(Object other) => + identical(this, other) || + other is OtpFieldStyle && + runtimeType == other.runtimeType && + backgroundColor == other.backgroundColor && + borderColor == other.borderColor && + focusBorderColor == other.focusBorderColor && + disabledBorderColor == other.disabledBorderColor && + enabledBorderColor == other.enabledBorderColor && + errorBorderColor == other.errorBorderColor; + + @override + int get hashCode => + backgroundColor.hashCode ^ + borderColor.hashCode ^ + focusBorderColor.hashCode ^ + disabledBorderColor.hashCode ^ + enabledBorderColor.hashCode ^ + errorBorderColor.hashCode; + + @override + String toString() { + return 'OtpFieldStyle{backgroundColor: $backgroundColor, borderColor: $borderColor, focusBorderColor: $focusBorderColor, disabledBorderColor: $disabledBorderColor, enabledBorderColor: $enabledBorderColor, errorBorderColor: $errorBorderColor}'; + } }