Merge pull request #9 from wisemen-digital/bugfix/text-field-icon

text field icon bugfix and textCapitalization on email/password fields
wisemen-digital · Jun 14, 2024 · ef4dec1 · ef4dec1
2 parents d7e4cca + 22bc06e
commit ef4dec1
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 107 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## 1.0.12
+
+* fixed password toggle misalign when error message is shown beneath `ValidatedTextFormField`
+* set TextCapitalization to none when `isEmail` or `isPassword` in `ValidatedTextFormField`
+
 ## 1.0.11
 
 * fixed labels not showing on Android in the `ValidatedTextFormField`

diff --git a/lib/widgets/valided_form_text_field.dart b/lib/widgets/valided_form_text_field.dart
@@ -19,7 +19,7 @@ class ShowPassword extends _$ShowPassword {
   void toggleValue() => state = !state;
 }
 
-class ValidatedTextFormField extends ConsumerWidget {
+class ValidatedTextFormField extends HookConsumerWidget {
   const ValidatedTextFormField({
     super.key,
     this.decoration = const InputDecoration(),
@@ -110,6 +110,11 @@ class ValidatedTextFormField extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final passwordProvider = showPasswordProvider(key: key);
+
+    void togglePassword() {
+      ref.read(passwordProvider.notifier).toggleValue();
+    }
+
     return WidgetWrapper(
       wrapper: (child) {
         if (showCupertinoLabel) {
@@ -129,112 +134,105 @@ class ValidatedTextFormField extends ConsumerWidget {
           return child;
         }
       },
-      child: Stack(
-        alignment: Alignment.centerRight,
-        children: [
-          TextFormField(
-            cursorColor: cursorColor,
-            keyboardType: _getKeyboardType(),
-            textCapitalization: textCapitalization,
-            textInputAction: textInputAction,
-            onFieldSubmitted: (text) => onFieldSubmitted?.call(text, ref),
-            initialValue: initialValue,
-            focusNode: focusNode,
-            enabled: !disabled,
-            onEditingComplete: onEditingComplete,
-            onChanged: onChanged,
-            controller: controller,
-            decoration: decoration.copyWith(
-              errorStyle: hideErrorText ? const TextStyle(height: 0) : null,
-              label: showAndroidLabel && label != null ? Text(label!) : null,
-              labelStyle: _labelStyle(
-                context,
-              ),
-              floatingLabelStyle: _labelStyle(
-                context,
-              ),
-            ),
-            readOnly: readOnly,
-            inputFormatters: inputFormatters,
-            obscureText: isPassword ? !ref.watch(passwordProvider) : isPassword,
-            scrollPadding: scrollPadding,
-            style: style,
-            autovalidateMode: autovalidateMode,
-            onTapOutside: onTapOutside,
-            minLines: minLines,
-            maxLines: maxLines,
-            validator: (value) {
-              //* Value null check:
-              if (value == null) {
-                return Swl.of(context).fieldRequired;
-              }
-
-              //* If non-required value is empty
-              if (!isRequired && value.isEmpty) {
-                return null;
-              }
-
-              //* Empty validation check:
-              if (value.isEmpty) {
-                return Swl.of(context).fieldRequired;
-              }
-
-              //* Email validation:
-              if (isEmail) {
-                if (!EmailValidator.validate(value)) {
-                  return Swl.of(context).emailValidation;
-                }
-              }
-              //* Phone number validation:
-              if (isPhoneNumber) {
-                if (!RegExp(
-                  r'^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$',
-                ).hasMatch(value)) {
-                  return Swl.of(context).phoneNumberIsInvalid;
-                }
-              }
-              //* Password validation:
-              if (isPassword && (passwordValidation == null)) {
-                if (value.length < minimumPasswordLength) {
-                  return Swl.of(context).passwordIsTooShort;
-                }
-              } else if (isPassword && (passwordValidation != null)) {
-                return passwordValidation!(value);
-              }
-              //* Custom validation
-              if (customValidation != null) {
-                return customValidation!(value);
-              }
-              return null;
-            },
+      child: TextFormField(
+        cursorColor: cursorColor,
+        keyboardType: _getKeyboardType(),
+        textCapitalization: _getTextCapitalization(),
+        textInputAction: textInputAction,
+        onFieldSubmitted: (text) => onFieldSubmitted?.call(text, ref),
+        initialValue: initialValue,
+        focusNode: focusNode,
+        enabled: !disabled,
+        onEditingComplete: onEditingComplete,
+        onChanged: onChanged,
+        controller: controller,
+        decoration: decoration.copyWith(
+          errorStyle: hideErrorText ? const TextStyle(height: 0) : null,
+          label: showAndroidLabel && label != null ? Text(label!) : null,
+          labelStyle: _labelStyle(
+            context,
           ),
-          if (isPassword && showObscureIcon)
-            Positioned(
-              top: 20,
-              bottom: 0,
-              child: IconButton(
-                hoverColor: Colors.transparent,
-                icon: ref.watch(passwordProvider)
-                    ? SvgPicture.asset(
-                        hidePasswordIcon,
-                        colorFilter:
-                            ColorFilter.mode(iconColor, BlendMode.srcIn),
-                        height: iconSize,
-                        width: iconSize,
-                      )
-                    : SvgPicture.asset(
-                        showPasswordIcon,
-                        colorFilter:
-                            ColorFilter.mode(iconColor, BlendMode.srcIn),
-                        height: iconSize,
-                        width: iconSize,
-                      ),
-                splashColor: Colors.transparent,
-                onPressed: () =>
-                    ref.read(passwordProvider.notifier).toggleValue(),
-              ),
-            ),
-        ],
+          floatingLabelStyle: _labelStyle(
+            context,
+          ),
+          suffixIcon: !isPassword
+              ? null
+              : IconButton(
+                  hoverColor: Colors.transparent,
+                  icon: ref.watch(passwordProvider)
+                      ? SvgPicture.asset(
+                          hidePasswordIcon,
+                          colorFilter:
+                              ColorFilter.mode(iconColor, BlendMode.srcIn),
+                          height: iconSize,
+                          width: iconSize,
+                        )
+                      : SvgPicture.asset(
+                          showPasswordIcon,
+                          colorFilter:
+                              ColorFilter.mode(iconColor, BlendMode.srcIn),
+                          height: iconSize,
+                          width: iconSize,
+                        ),
+                  splashColor: Colors.transparent,
+                  onPressed: togglePassword,
+                ),
+        ),
+        readOnly: readOnly,
+        inputFormatters: inputFormatters,
+        obscureText: isPassword ? !ref.watch(passwordProvider) : isPassword,
+        scrollPadding: scrollPadding,
+        style: style,
+        autovalidateMode: autovalidateMode,
+        onTapOutside: onTapOutside,
+        minLines: minLines,
+        maxLines: maxLines,
+        validator: (value) {
+          //* Value null check:
+          if (value == null) {
+            return Swl.of(context).fieldRequired;
+          }
+
+          value = value.trim();
+
+          //* If non-required value is empty
+          if (!isRequired && value.isEmpty) {
+            return null;
+          }
+
+          //* Empty validation check:
+          if (value.isEmpty) {
+            return Swl.of(context).fieldRequired;
+          }
+
+          //* Email validation:
+          if (isEmail) {
+            if (!EmailValidator.validate(value)) {
+              return Swl.of(context).emailValidation;
+            }
+          }
+          //* Phone number validation:
+          if (isPhoneNumber) {
+            if (!RegExp(
+              r'^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$',
+            ).hasMatch(value)) {
+              return Swl.of(context).phoneNumberIsInvalid;
+            }
+          }
+          //* Password validation:
+          if (isPassword && (passwordValidation == null)) {
+            if (value.length < minimumPasswordLength) {
+              return Swl.of(context).passwordIsTooShort;
+            }
+          } else if (isPassword && (passwordValidation != null)) {
+            return passwordValidation!(value);
+          }
+          //* Custom validation
+          if (customValidation != null) {
+            return customValidation!(value);
+          }
+          return null;
+        },
       ),
     );
   }
@@ -248,4 +246,12 @@ class ValidatedTextFormField extends ConsumerWidget {
       return TextInputType.text;
     }
   }
+
+  TextCapitalization _getTextCapitalization() {
+    if (isEmail || isPassword) {
+      return TextCapitalization.none;
+    } else {
+      return textCapitalization;
+    }
+  }
 }
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -1,6 +1,6 @@
 name: wisewidgetslibrary
 description: Wisemen widgets library containing platform specific widgets and other commonly useful widgets.
-version: 1.0.11
+version: 1.0.12
 homepage: https://github.com/wisemen-digital/flutter-widgets-library
 repository: https://github.com/wisemen-digital/flutter-widgets-library