Flutter web app not showing typed password when set to show password

Question

On my flutter webapp I am trying to show the password if the user chose to show it. If I set my bool value to false it start by showing the normal text and then if I press the button to show or hide the password it will obscure the text but it will not un-obscure the text. I added a print function in one of my try's and it does change the bool value from false to true and back to false. I have it it a setState but no luck. I tryied many different examples online but can not get it to work with the web app.

The code

@override
Widget build(BuildContext context) {
c_width = MediaQuery.of(context).size.width*0.8;
return Scaffold(
appBar: AppBar(title: Text("App"),
),
body: signUpWidget(widget.signUpValue),
);
}

Widget signUpWidget(String? rl)  {
switch(rl) {
case 'User': {
return SingleChildScrollView(
child: Container (
width: c_width,
padding: const EdgeInsets.all(16.0),

child: Column(
child: Column(
children: <Widget>[



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; 
isPasswordObscure = !isObscure;
});
},
),
),

),

Like I say it changes the text to hide and show and if I print the bool value it changes from true to false, but it does not unObscure the text in the field to show the password. Is it something to do with web? or am I missing something?

Thank you.

Answer 1

Actually you dont need to have two bool,

TextFormField(
  obscureText: isObscure,
  decoration: InputDecoration(
    suffix: TextButton(
      child: isObscure //< using 
          ? Text(
              'Show',
              style: TextStyle(color: Colors.grey),
            )
          : Text(
              'Hide',
              style: TextStyle(color: Colors.grey),
            ),
      onPressed: () {
        setState(() {
          isObscure = !isObscure;
          // isPasswordObscure = !isObscure; // here it reverse the variable isPasswordObscure 
        });
      },
    ),
  ),
)

Answer 2

It might be occurring due to this problem in setState((){}) .

setState(() { 
 // assume isObscure is true initially
 isObscure = !isObscure; 
 // now isObscure is false
 isPasswordObscure = !isObscure;
 // now isPasswordObscure is true, because isObscure's value has already changed.
});

To solve this, first save isObscure to a temporary variable.

setState(() { 
 var temp = isObscure;
 isObscure = !temp; 
 isPasswordObscure = !temp;
});

Or,

Entirely avoid using two bools.

setState(() { 
 isObscure = !isObscure; 
});

---

It seems like this occurs only in web.

Follow these steps to fix this,

https://github.com/flutter/flutter/issues/83695#issuecomment-1083537482

Or

Upgrade to the latest Flutter version.