On web, how do I control the visibility icon that automatically appears on a focused TextFormField that has an obscureText property set to true?

user_5657716 0
Viewed 748

Here's my code for the password field:

TextFormField(
  obscureText: isObscure,
  decoration: InputDecoration(
    suffix: TextButton(
      child: isPasswordObscure
          ? Text(
            'Show', 
            style: TextStyle(color: Colors.grey),
          )
          : Text(
            'Hide',
            style: TextStyle(color: Colors.grey),
          ),
      onPressed: () {
        setState(() { isObscure = !isObscure; });
      },
    ),
  ),
)

If I run it, the password field would look like this: enter image description here

If you review my code, I only specified a text button and not an icon as the suffix. The visibility icon was added by Flutter Edge and when I click on it, it only changes its icon and does not unobscure or obscure the text field.

enter image description here

What I want to know is how do I change or remove the icon? And maybe also give it a callback so it knows what to do when I click on it.

The problem doesn't exist on mobile, only on browsers desktop Edge.

Edit: I tried setting suffix and suffixIcon to null but the visibility icon is still showing.

Update: I've discovered that the problem only exists on MS Edge.

flutter-web flutter
3 Answers

If you wants to turn off the visibility icon set onPressed: () {}, also if you want to remove the visibility icon form overview wrap it with opacity widget

Opacity( opacity: 0.0, child: textButton(),

user_154375170

Please find the below code sample to include the visibility option for the textField. by including a variable _isObscured in a stateful widget. we have implemented it with the auto obscure after 2 second delay.

 Center(child: TextField(
        obscureText: _isObscured,
        decoration : InputDecoration(
        suffix:InkWell(
                onTap: (){
                    setState(() => this._isObscured = 
                    !this._isObscured);
                    Future.delayed(Duration(seconds: 2), (){
                      setState(() => this._isObscured = 
                      !this._isObscured);

                    });
                },
                child: Icon( Icons.visibility),
            ),
         ),
      ), 
    ),
  ),
user_37265100

I found a solution:

// the magic function
void fixEdgePasswordRevealButton(FocusNode passwordFocusNode) {
  passwordFocusNode.unfocus();
  Future.microtask(() {
    passwordFocusNode.requestFocus();
    js.context.callMethod("fixPasswordCss", []);
  });
}

// widget code
            child: TextField(
              onChanged: (_) async {
                fixEdgePasswordRevealButton(passwordFocusNode);
              },
              focusNode: passwordFocusNode,
              obscureText: true,

// end of index.html
    window.fixPasswordCss = () => {
      let style = document.createElement('style');
      style.innerHTML = '::-ms-reveal { display: none; }';
      document.head.appendChild(style);
    }
  </script>
</body>

Also posted on the relevant issue.

user_6795530
Related