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

Icons.remove_red_eye Hide Show – Flutter

I would like it to show and hide when eyes are clicked

TextFormField(
  keyboardType: TextInputType.visiblePassword,
  obscureText: true,
  decoration: const InputDecoration(
    labelText: "Entrez votre mot de passe",
    border: OutlineInputBorder(),
    prefixIcon: Icon(Icons.lock),
    suffixIcon: Icon(Icons.remove_red_eye),
  ),
)

I would like it to show and hide when eyes are clicked

Tags:

2

Answers


  1. 0

    Firstly need to declare a bool variable

    bool passwordVisible = false;

    Then in TextFormField you need to do following things

    TextFormField(
   ...
   obscureText: !passwordVisible,//This will obscure text dynamically
   decoration: InputDecoration(
      ....
       suffixIcon: IconButton(
            icon: Icon(
              // Based on passwordVisible state choose the icon
               passwordVisible
               ? Icons.visibility
               : Icons.visibility_off,
               color: Theme.of(context).primaryColorDark,
               ),
            onPressed: () {
               //Toggle the state of passwordVisible variable
               setState(() {
                   passwordVisible = !passwordVisible;
               });
             },
            ),
          ),
        );
    Login or Signup to reply.
  2. 0

    Make sure that TextFormField is inside a StatefulWidget, create a variable bool isPasswordVisible = false; and use it as such:

    TextFormField(
  keyboardType: TextInputType.visiblePassword,
  obscureText: !isPasswordVisible,
  decoration: InputDecoration(
    labelText: "Entrez votre mot de passe",
    border: OutlineInputBorder(),
    prefixIcon: Icon(Icons.lock),
    suffixIcon: IconButton(
      icon: Icon(isPasswordVisible
          ? Icons.visibility_off
          : Icons.visibility),
      onPressed: () => setState(() {
        isPasswordVisible = !isPasswordVisible;
      }),
    ),
  ),
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search