在 Flutter 的 TextFormField 中显示/隐藏密码

Question

我正在使用 TextFormField 来接受密码。我已将后缀图标设置为让 IconButton 子项检测单击事件并切换 TextFormField 的模糊文本属性。iconButton 的回调函数被调用，但 TextFormField 不会被重新绘制。关于如何解决这个问题的任何想法？

static Widget buildTextFormField(String id, 
                               FormFieldValidator<String> validateField,
                               FormFieldSetter<String> saveField,
                               InputDecoration decoration,
                               EdgeInsetsGeometry paddingInfo,
                               EdgeInsetsGeometry marginInfo,
                               TextInputType keyboardType,
                               {bool obscureField:false, double width:328.0,
                                TextEditingController controller}
  ){
return Container(
  padding: paddingInfo,
  margin: marginInfo,
  width: width,
  child: TextFormField(
    key: Key(id),
    obscureText: obscureField,
    validator: validateField,
    onSaved: saveField,
    keyboardType: keyboardType,
    decoration: decoration,
    controller: controller,
  ),
);

}

InputDecoration passwordDecoration = InputDecoration(
   hintText: 'Password',
   labelText: 'Enter your password',
   suffixIcon:
      IconButton(
         icon: Icon(
            _passwordVisible ? Icons.visibility : Icons.visibility_off,
            semanticLabel: _passwordVisible ? 'hide password' : 'show password',
         ),
         onPressed: () {
            setState(() {
               _passwordVisible ^= true;
               //print("Icon button pressed! state: $_passwordVisible"); //Confirmed that the _passwordVisible is toggled each time the button is pressed.
            });
         }),
   labelStyle: TextStyle(
      fontFamily: 'Roboto Medium',
      fontSize: 12.0,
      color: Color(0x99000000),
      letterSpacing: 0.4,
   ),
);
final passwordPaddingInfo = const EdgeInsets.only(top: 15.0, bottom:15.0,
                                                  left: 22.0, right:25.0);
this._passwordField = AdministrationComponents.
buildTextFormField('passwordField', validatePassword,
   (value) => _password = value, passwordDecoration, passwordPaddingInfo,
   null, null, controller:_passwordController,
   obscureField: !_passwordVisible);

Answer 1

试试这个

 bool _showPassword = false;
  void _togglevisibility() {
    setState(() {
      _showPassword = !_showPassword;
    });
  }

文本字段代码

child: TextFormField(
                                controller: _passwordController,
                                obscureText: !_showPassword,
                                cursorColor: Colors.red,
                                style: TextStyle(color: Colors.white),
                                decoration: InputDecoration(
                                  hintText: "Password",
                                  border: InputBorder.none,
                                  suffixIcon: GestureDetector(
                                    onTap: () {
                                      _togglevisibility();
                                    },
                                    child: Icon(
                                      _showPassword ? Icons.visibility : Icons
                                          .visibility_off, color: Colors.red,),
                                  ),
                                ),
                              ),

Answer 2

在 Flutter 的 TextFormField 中显示/隐藏密码

第1步：

bool _obscureText = true;

第2步：

void _toggle() {
    setState(() {
      _obscureText = !_obscureText;
    });
  }

第 3 步：

 TextField(
                controller: password,
                style: TextStyle(fontSize: 16.0),
                obscureText: _obscureText,
                decoration: new InputDecoration(
                  border: InputBorder.none,
                  focusedBorder: InputBorder.none,
                  enabledBorder: InputBorder.none,
                  errorBorder: InputBorder.none,
                  disabledBorder: InputBorder.none,
                  hintText: "Password",
                  suffixIcon: InkWell(
                    onTap: _toggle,
                    child: Icon(
                      _obscureText
                          ? FontAwesomeIcons.eye
                          : FontAwesomeIcons.eyeSlash,
                      size: 15.0,
                      color: Colors.black,
                    ),
                  ),
                ),
              ),

Answer 3

感谢@ShyjuM 和@diegovoper！我看到我做错了什么 - 我在 State 类的构造函数中调用 buildTextFormField 而不是在 build 方法中。将调用移至构建方法内的 buildTextFormField 修复了该问题。再次感谢您的所有帮助！