首页 > 解决方案 > 如何在 Flutter 中完全隐藏密码输入?

问题描述

我正在使用 Flutter web 处理登录表单。我希望我的第二个TextField(我的密码)隐藏用户输入。我已经将obscureText属性设置为true.

在此处输入图像描述

我不希望显示“f”。有可能这样做吗?

标签: flutterflutter-web

解决方案


没有简单的方法可以做到这一点。因此必须使用将输入值转换为“*”的控制器和 StatefulWidget

class Testas extends StatefulWidget{
  @override
  _TestasState createState() => _TestasState();
}

class _TestasState extends State<Testas> {
  String _valueToShow = "";
  String _value = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: TextField(
          controller: TextEditingController.fromValue(TextEditingValue(text: _valueToShow, selection: new TextSelection.collapsed(offset: _valueToShow.length))),
          onChanged: (String val){
            String value = "";
            if(val.length > _value.length){
                value+=val.substring(_value.length, val.length);
              }
              if(val.length < _value.length){
                value = _value.substring(1, val.length);
              }
            String valueToShow = "*" * val.length;
            setState(() {
                _valueToShow = valueToShow;
                _value = value;

            });
          },
        ),
      ),
    );
  }
}

推荐阅读