How can i make a suffixIcon in a TextField which hides if TextField is empty but shows when not and-CodePudding

I have a TextField() for a Password Input. The sufficIcon, which is an eye, should only be shown, when TextField is not empty but it should also toogle a bool, so that user can hide and show password. It should show different suffixIcon, when password is shown or hidden.

This is my code for now:

bool isPasswordVisible = true;

IconButton(
          icon: isPasswordVisible
              ? const Icon(Icons.visibility)
              : const Icon(Icons.visibility_off),
          onPressed: () {
            setState(() {
              isPasswordVisible = !isPasswordVisible;
            });
          },
        ),

CodePudding user response：

Try this :

bool hidePassword = true;
bool hidePasswordConfirm = true;
String? confirmPassword;

Now in the TextFormField widget :

TextFormField(
                    autovalidateMode: AutovalidateMode.onUserInteraction,
                    obscureText: hidePassword,
                    decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: 'Password',
                      suffixIcon: IconButton(
                        icon: Icon(
                          hidePassword
                              ? Icons.visibility_off
                              : Icons.visibility,
                        ),
                        onPressed: () {
                          setState(() {
                            hidePassword = !hidePassword;
                          });
                        },
                      ),
                    ),
                    validator: (val) {
                      confirmPassword = val;
                      if (val != null) {
                        if (val.length <= 6)
                          return 'Password must be 6 characters.';
                      } else
                        return null;
                    },
                  );

Now for password confirmation :

TextFormField(
                    autovalidateMode: AutovalidateMode.onUserInteraction,
                    decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: 'Confirm Password',
                      suffixIcon: IconButton(
                        icon: Icon(
                          hidePassword
                              ? Icons.visibility_off
                              : Icons.visibility,
                        ),
                        onPressed: () {
                          setState(() {
                            hidePasswordConfirm = !hidePasswordConfirm;
                          });
                        },
                      ),
                    ),
                    validator: (val) {
                      if (val!.isEmpty) {
                        return 'Enter the password first';
                      } else if (val != confirmPassword)
                        return 'Password must be same.';
                      else
                        return null;
                    },
                    obscureText: hidePasswordConfirm,
                  );

CodePudding user response：

You can try this: Declare a boolean variable:

bool isIconVisible = false;
bool hidePassword = true;

then in the TextField use the property onChanged:

TextField(
  onChanged: (value) {
    if (value.isNotEmpty) {
      setState(() {
        isIconVisible = true;
      });
    } else {
      setState(() {
        isIconVisible = false;
      });
    }
  },
  obscureText: hidePassword,
  decoration: InputDecoration(
        labelText: 'Password',
        suffixIcon:  isIconVisible ? IconButton(
             onPressed: (){
                    setState(() {
                         hidePassword = !hidePassword
                      });
                    },
             icon:  Icon(
                  hidePassword ? 
                  Icons.visibility_off : Icons.visibility,
                    ),
       ) : null,
    ),
);

CodePudding user response：

You can use the below code...

obscureText property in TextFormField used to show and hide the text inside textField.

In the Icon onPress we can change the bool value and UI using SetState to manage

bool _isObscure = true;
final _passwordTextController = TextEditingController();
final _focusPassword = FocusNode();

               TextFormField(
                    controller: _passwordTextController,
                    focusNode: _focusPassword,
                    obscureText: _isObscure,
                    decoration: InputDecoration(
                      suffixIcon: IconButton(
                        hoverColor: Colors.transparent,
                        splashColor: Colors.transparent,
                        iconSize: 23.0,
                        icon: Icon(
                          _isObscure
                              ? Icons.visibility_sharp
                              : Icons.visibility_off_sharp,
                        ),
                        onPressed: () {
                          setState(() {
                            _isObscure = !_isObscure;
                          });
                        },
                      ),
                      filled: true,
                      fillColor: const Color.fromRGBO(255,255,255,1),
                      hintText: 'password',
                      counterText: "",
                      contentPadding: const EdgeInsets.symmetric(vertical: 25.0, 
                      horizontal: 20.0),
                      enabledBorder: OutlineInputBorder(
                        borderSide: const BorderSide(
                            color: Color.fromRGBO(210, 248, 248, 1)),
                        borderRadius: BorderRadius.circular(30.0),
                      ),
                      focusedBorder:  OutlineInputBorder(
                        borderSide: const BorderSide(
                            color: Colors.lightBlueAccent, width: 2.0),
                        borderRadius: BorderRadius.circular(30.0),
                      ),
                        errorBorder:  OutlineInputBorder(
                          borderRadius: BorderRadius.circular(30.0),
                          borderSide: const BorderSide(width: 3,
                              color: Color.fromRGBO(255, 0, 0,1)),),
                      focusedErrorBorder: const OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(30)),
                        borderSide: BorderSide(
                          width: 3,
                          color: Color.fromRGBO(255, 0, 0,1),
                        ),
                      ),
                      hintStyle: const TextStyle(
                          color: Color.fromRGBO(128,128,128,1),
                          fontStyle: FontStyle.normal,
                          fontSize: 14.0),
                    ),
                  ),

when obscureText is true

when obscureText is false