如何在 Flutter 中添加隐藏和查看密码的切换开关？答案

【问题标题】：How to add a toggle for hiding and viewing password in Flutter?如何在 Flutter 中添加隐藏和查看密码的切换开关？
【发布时间】：2021-04-05 09:57:00
【问题描述】：

我一直在尝试开发一个应用程序并为其注册，我不确定如何以及在何处添加隐藏/查看密码的切换开关。它是在晦涩难懂的文字下吗？如果是这样，我如何将它的条件添加到我的代码中？（使用表单创建用于输入注册详细信息。）

实现自定义文本字段的表单代码：

  _signUpForm() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 25, vertical: 30),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(5)),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          CustomRoundedTextField(
            label: 'Email',
            onChange: (val) {
              email = val;
            },
          ),
          CustomRoundedTextField(
            label: 'Password',
            isPassword: true,
            onChange: (val) {
              password = val;
            },
          ),
          SizedBox(height: 40),
          CustomBlueRoundedButton(
            child: Text(
              'Register Account',
              style: TextStyle(color: Colors.white),
            ),
            onPressed: _createAccount,
          ),
          SizedBox(height: 15,),
          Container(
            child: Center(
              child: Text("Already have an account?"),
            ),
          ),
          SizedBox(height: 5),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              InkWell(
                onTap: openLoginPage,
                child: Text("Login", style: TextStyle(
                    color: Color(0xff1A3C90),
                    fontWeight: FontWeight.w700
                ),),
              )
            ],
          )
        ],
      ),
    );
  }

自定义文本字段类代码：

class CustomRoundedTextField extends StatelessWidget {
  final label;
  final onChange;
  final isPassword;
  final bottomPadding;
  final textCapitalization;
  final inputType;
  final controller;
  final iconData;

  CustomRoundedTextField(
      {
        this.iconData,
        this.controller,
        this.inputType = TextInputType.text,
        this.label,
        this.onChange,
        this.isPassword = false,
        this.bottomPadding = 16,
        this.textCapitalization = TextCapitalization.none});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 16),
      child: TextField(
        controller: controller,
        keyboardType: inputType,
        textCapitalization: textCapitalization,
        obscureText: isPassword,
        style:
        TextStyle(fontSize: 15, color: Colors.black),
        decoration: InputDecoration(
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(15),
            borderSide: BorderSide(
              color: Colors.black54,
            ),
          ),
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(15),
            borderSide: BorderSide(
              color: Colors.black,
            ),
          ),
          labelText: label,
          labelStyle: TextStyle(
            fontSize: 15,
            color: Colors.black,
            fontWeight: FontWeight.w600,
          ),
        ),
        onChanged: onChange,
      ),
    );
  }
}

【问题讨论】：

我能想到的最简单的方法是添加一个变量和一个按钮来切换显示密码。然后当按下按钮时， setState(show = !show) 来切换它。最后，将 ispassword 字段从 true 更改为 show。
stackoverflow.com/questions/49125064/…

标签： flutter passwords

【解决方案1】：

将您的CustomRoundedTextField 设为StatefulWidget，并将suffixIcon 添加到TextField 的InputDecoration。在您的代码下方：

class CustomRoundedTextField extends StatefulWidget {
  final label;
  final onChange;
  final isPassword;
  final bottomPadding;
  final textCapitalization;
  final inputType;
  final controller;
  final iconData;
  

  CustomRoundedTextField(
      {
        this.iconData,
        this.controller,
        this.inputType = TextInputType.text,
        this.label,
        this.onChange,
        this.isPassword = false,
        this.bottomPadding = 16,
        this.textCapitalization = TextCapitalization.none});

  @override
  _CustomRoundedTextFieldState createState() => _CustomRoundedTextFieldState();
}

class _CustomRoundedTextFieldState extends State<CustomRoundedTextField> {
  bool _showPwd = false;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 16),
      child: TextField(
        controller: widget.controller,
        keyboardType: widget.inputType,
        textCapitalization: widget.textCapitalization,
        obscureText: widget.isPassword && !_showPwd,
        style:
        TextStyle(fontSize: 15, color: Colors.black),
        decoration: InputDecoration(
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(15),
            borderSide: BorderSide(
              color: Colors.black54,
            ),
          ),
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(15),
            borderSide: BorderSide(
              color: Colors.black,
            ),
          ),
          labelText: widget.label,
          labelStyle: TextStyle(
            fontSize: 15,
            color: Colors.black,
            fontWeight: FontWeight.w600,
          ),
          suffixIcon: widget.isPassword ? IconButton(
          icon: Icon(_showPwd ? Icons.visibility : Icons.visibility_off),
            onPressed:(){
              setState((){
                _showPwd = !_showPwd;
              });
            }
          ) : null,
        ),
        onChanged: widget.onChange,
      ),
    );
  }
}

【讨论】：