Question 80026 in Flutter Question posted in
The official Flutter documentation can be found here.

How to show and hide password in TextFormField? – Flutter

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!,
      ),
Tags:

3

Answers


  1. 0

    Add a suffixIcon in the decoration part :

    decoration: InputDecoration(
        suffixIcon: IconButton(
          onPressed: showHideText(),
          icon: Icon(Icons.yourIcon),
          ),
),
    Login or Signup to reply.
  2. 0

    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,
)

    enter image description here

    Login or Signup to reply.
  3. 0

    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,
            ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search