Flutter web 當設置為顯示密碼時，應用程序不顯示輸入的密碼

Question

在我的 flutter webapp 上，如果用戶選擇顯示密碼，我會嘗試顯示密碼。 如果我將我的 bool 值設置為 false，它首先顯示普通文本，然后如果我按下按鈕顯示或隱藏密碼，它會隱藏文本，但不會取消隱藏文本。 我在我的一個嘗試中添加了打印 function，它確實將 bool 值從 false 更改為 true，然后再更改為 false。 我有一個 setState 但沒有運氣。 我在網上嘗試了許多不同的示例，但無法使其與 web 應用程序一起使用。

代碼

@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;
});
},
),
),

),

就像我說的那樣，它會將文本更改為隱藏和顯示，如果我打印 bool 值，它會從 true 變為 false，但它不會取消隱藏字段中的文本以顯示密碼。 跟web有關系嗎？ 還是我錯過了什么？

謝謝你。

Answer 1

實際上你不需要有兩個布爾值，

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

它可能是由於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.
});

要解決這個問題，首先將 isObscure 保存到一個臨時變量中。

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

或者，

完全避免使用兩個布爾值。

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

---

這似乎只發生在 web 中。

請按照以下步驟解決此問題，

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

或者

升級到最新的Flutter版本。