How to show and hide password in TextFormField?

Question

I want to add eye to password field in flutter project

this is my code:

TextFormField(
        decoration: const InputDecoration(
          label: Text('PASSWORD'),
        ),
        keyboardType: TextInputType.visiblePassword,
        obscureText: true,
        validator: (val) {
          if (val!.length < 6) {
            return "Please enter at least 6 characters";
          }
          return null;
        },
        onSaved: (val) => data['password'] = val!,
      ),

Answer 1

You can use this custom widget:

class CustomInput extends StatefulWidget {
  final String? label;
  final TextInputType? keyboardType;
  final String? Function(String?)? validator;
  final Function(String?)? onSaved;
  final bool obscureText;
  const CustomInput(
      {Key? key,
      this.label,
      this.keyboardType,
      this.validator,
      this.onSaved,
      this.obscureText = false})
      : super(key: key);

  @override
  State<CustomInput> createState() => _CustomInputState();
}

class _CustomInputState extends State<CustomInput> {
  bool showPassword = false;
  @override
  Widget build(BuildContext context) {
    return TextFormField(
      decoration: InputDecoration(
          label: Text(widget.label ?? ''),
          suffixIcon: InkWell(
            onTap: () {
              setState(() {
                showPassword = !showPassword;
              });
            },
            child: Icon(showPassword
                ? Icons.remove_red_eye
                : Icons.remove_red_eye_outlined),
          )),
      keyboardType: widget.keyboardType,
      obscureText: showPassword ? false : widget.obscureText,
      validator: widget.validator,
      onSaved: widget.onSaved,
    );
  }
}

and use it like this:

CustomInput(
          label: 'PASSWORD',
          keyboardType: TextInputType.visiblePassword,
          onSaved: (val) => data['password'] = val!,
          validator: (val) {
            if (val!.length < 6) {
              return "Please enter at least 6 characters";
            }
            return null;
          },
          obscureText: true,
)

Answer 2

Add a suffixIcon in the decoration part :

decoration: InputDecoration(
        suffixIcon: IconButton(
          onPressed: showHideText(),
          icon: Icon(Icons.yourIcon),
          ),
),

Answer 3

Create a boolean variable which will hold the status of password of being shown or not.

bool hidePassword=true;

Now, add this TextFormField with obscureText property.

TextFormField(
              autovalidateMode: AutovalidateMode.onUserInteraction,
              obscureText: hidePassword,
              decoration: InputDecoration(
                prefixIcon: const Icon(
                  Icons.password,
                ),
                suffixIcon: IconButton(
                  onPressed: () {
                    setState(() {
                      hidePassword = !hidePassword;
                    });
                  },
                  icon: (hidePassword == true)
                      ? const Icon(Icons.visibility_off)
                      : const Icon(
                          Icons.visibility,
                        ),
                ),
                border: const OutlineInputBorder(
                  borderRadius: BorderRadius.all(
                    Radius.circular(20),
                  ),
                ),
                hintText: 'Enter your password.',
              ),
              validator: validatePassword,
            ),