如何在flutter中添加密码输入类型使密码用户输入不可见，就像Android Native EditText的inputtype：密码一样？

Posted 2023-02-23

【中文标题】如何在flutter中添加密码输入类型使密码用户输入不可见，就像Android Native EditText的inputtype：密码一样？

【英文标题】：How to add a Password input type in flutter makes the password user input is not visible , just like Android Native EditText 's inputtype:password?

【发布时间】：2019-02-06 06:34:18

【问题描述】：

我遇到了 Flutter 的 TextInputType 没有密码类型的问题：

/// All possible enum values.

static const List<TextInputType> values = const <TextInputType>[
  text, multiline, number, phone, datetime, emailAddress, url,
];

如何使用户输入的密码不可见？任何人有一个好主意？

【问题讨论】：

如果我提供的答案对您有所帮助，如果您能将其标记为答案（只需单击灰色复选标记），我将不胜感激。如果没有，请告诉我原因，我很乐意看看能否进一步帮助您。

【参考方案1】：

如果您使用TextField 小部件（或从该小部件派生的东西），您可以使用obscureText 属性并将其设置为true。更多详情请见here。

此外，考虑添加这些属性以阻止输入建议，因为它们有可能将至少部分密码输入泄露给屏幕查看者。

obscureText: true,
enableSuggestions: false,
autocorrect: false,

【讨论】：

如何在广告选项中显示密码，例如在某些应用程序中出现eye

您可以使用InputDecoration 类的新实例设置decoration，并使用确保obscureText 属性切换的小部件设置suffixIcon。这很可能意味着您必须使用包含 TextField 小部件的有状态小部件，以便跟踪 obscureText 属性的状态。

我相信这只是在StatefulWidget 中切换obscureText 的问题

@HasanAYousef TextFormField( obscureText: true, ),

请记住将autocorrect 设置为false - 您不希望用户的密码被保存并通过键盘自动提示

【参考方案2】：

只需在TextFormField 中添加obscureText: true：

 TextFormField(
   obscureText: true,
   decoration: const InputDecoration(
     labelText: 'Password',
   ),
   validator: (String value) 
     if (value.trim().isEmpty) 
       return 'Password is required';
     
   ,
 ),

【参考方案3】：

只有两个地方可以隐藏密码。

1.使用 TextFormField

   TextFormField(
                obscureText: true,
                decoration: const InputDecoration(
                  labelText: 'Password',
                ),
              ),

2。使用文本字段

              TextField(
                obscureText: true,
                decoration: const InputDecoration(
                  labelText: 'Password',
                ),
              )

【参考方案4】：

使用文本字段

模糊字符：“*”，

 TextField(
        obscureText: true,
        onChanged: (),
        obscuringCharacter: "*",
        decoration: InputDecoration(
            hintText: "Enter password",
            icon: Icon(Icons.lock,color: kPrimaryColor,),
        ),
      ),