Merge pull request #5 from Iconica-Development/feature/password_visibilty

feat: Added the abilty to show and hide the passwords

lib/src/auth_screen.dart

@@ -4,8 +4,7 @@
 
 import 'dart:collection';
 import 'package:flutter/material.dart';
-import 'package:flutter_registration/src/model/auth_field.dart';
+import 'package:flutter_registration/flutter_registration.dart';
-import 'package:flutter_registration/src/model/auth_step.dart';
 
 class AuthScreen extends StatefulWidget {
   const AuthScreen({
@@ -73,7 +72,8 @@ class _AuthScreenState extends State<AuthScreen> {
 
       for (var step in widget.steps) {
         for (var field in step.fields) {
-          values[field.name] = field.value;
+          values[field.name] =
+              (field as AuthTextField).textController.value.text;
         }
       }
 

lib/src/config/registration_options.dart

@@ -27,6 +27,12 @@ class RegistrationOptions {
       previousButtonBuilder;
 
   static List<AuthStep> getDefaultSteps({
+    TextEditingController? emailController,
+    TextEditingController? pass1Controller,
+    bool pass1Hidden = true,
+    TextEditingController? pass2Controller,
+    bool pass2Hidden = true,
+    Function(bool mainPass, bool value)? passHideOnChange,
     RegistrationTranslations translations = const RegistrationTranslations(),
     Function(String title)? titleBuilder,
     Function(String label)? labelBuilder,
@@ -40,6 +46,7 @@ class RegistrationOptions {
         fields: [
           AuthTextField(
             name: 'email',
+            textEditingController: emailController,
             value: initialEmail ?? '',
             title: titleBuilder?.call(
                   translations.defaultEmailTitle,
@@ -76,6 +83,7 @@ class RegistrationOptions {
         fields: [
           AuthTextField(
             name: 'password1',
+            textEditingController: pass1Controller,
             title: titleBuilder?.call(
                   translations.defaultPassword1Title,
                 ) ??
@@ -103,18 +111,36 @@ class RegistrationOptions {
             onChange: (value) {
               password1 = value;
             },
+            hidden: pass1Hidden,
+            onPassChanged: (value) {
+              passHideOnChange?.call(true, value);
+            },
           ),
           AuthTextField(
             name: 'password2',
+            textEditingController: pass2Controller,
             label: labelBuilder?.call(translations.defaultPassword2Label),
             hintText: translations.defaultPassword2Hint,
             textStyle: textStyle,
             obscureText: true,
             validators: [
-              (value) => (value != password1)
+              (value) {
-                  ? translations.defaultPassword2ValidatorMessage
+                if (pass1Controller != null) {
-                  : null,
+                  if (value != pass1Controller.value.text) {
+                    return translations.defaultPassword2ValidatorMessage;
+                  }
+                } else {
+                  if (value != password1) {
+                    return translations.defaultPassword2ValidatorMessage;
+                  }
+                }
+                return null;
+              }
             ],
+            hidden: pass2Hidden,
+            onPassChanged: (value) {
+              passHideOnChange?.call(false, value);
+            },
           ),
         ],
       ),

lib/src/model/auth_text_field.dart

@@ -8,6 +8,7 @@ import 'package:flutter_registration/flutter_registration.dart';
 class AuthTextField extends AuthField {
   AuthTextField({
     required super.name,
+    TextEditingController? textEditingController,
     super.title,
     super.validators = const [],
     super.value = '',
@@ -16,39 +17,67 @@ class AuthTextField extends AuthField {
     this.label,
     this.textStyle,
     this.onChange,
+    this.hidden,
+    this.onPassChanged,
   }) {
-    _textEditingController = TextEditingController(text: value);
+    textController =
+        textEditingController ?? TextEditingController(text: value);
   }
 
-  late TextEditingController _textEditingController;
+  late TextEditingController textController;
   final bool obscureText;
   final String? hintText;
   final Widget? label;
   final TextStyle? textStyle;
   final Function(String value)? onChange;
+  final bool? hidden;
+  final Function(bool value)? onPassChanged;
 
   @override
-  Widget build() => TextFormField(
+  Widget build() {
-        style: textStyle,
+    Widget? suffix;
-        decoration: InputDecoration(
-          label: label,
-          hintText: hintText,
-        ),
-        controller: _textEditingController,
-        obscureText: obscureText,
-        onChanged: (v) {
-          value = v;
-          onChange?.call(value);
-        },
-        validator: (value) {
-          for (var validator in validators) {
-            var output = validator(value);
-            if (output != null) {
-              return output;
-            }
-          }
 
-          return null;
+    if (hidden != null) {
-        },
+      if (hidden!) {
-      );
+        suffix = GestureDetector(
+          onTap: () {
+            onPassChanged?.call(!hidden!);
+          },
+          child: const Icon(Icons.visibility),
+        );
+      } else {
+        suffix = GestureDetector(
+          onTap: () {
+            onPassChanged?.call(!hidden!);
+          },
+          child: const Icon(Icons.visibility_off),
+        );
+      }
+    }
+
+    return TextFormField(
+      style: textStyle,
+      decoration: InputDecoration(
+        label: label,
+        hintText: hintText,
+        suffix: suffix,
+      ),
+      controller: textController,
+      obscureText: hidden ?? obscureText,
+      onChanged: (v) {
+        value = v;
+        onChange?.call(value);
+      },
+      validator: (value) {
+        for (var validator in validators) {
+          var output = validator(value);
+          if (output != null) {
+            return output;
+          }
+        }
+
+        return null;
+      },
+    );
+  }
 }

pubspec.yaml

@@ -4,7 +4,7 @@
 
 name: flutter_registration
 description: A Flutter Registration package
-version: 0.3.0
+version: 0.4.0
 repository: https://github.com/Iconica-Development/flutter_registration
 
 environment: