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

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

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.

Tags:

2

Answers


  1. 0

    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 
        });
      },
    ),
  ),
)
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search