Android 如何在TextFormField中显示/隐藏密码？

目前我的密码

TextFormField

如下：

TextFormField(
装饰：常量输入装饰(
labelText:“密码”，
图标：常量填充(
填充：仅限常量边集（顶部：15.0），
子：常量图标（Icons.lock），
)),
验证程序：（val）=>val.length<6？“密码太短。”：null，
onSaved：（val）=>_password=val，
蒙昧文字：对，
);

---

我想要一个按钮式的互动，这将使密码可见和不可见。我可以在

TextFormField

中执行吗？或者我必须制作一个

堆栈

小部件来获得我所需的UI。关于

obsolizeText

true/false的条件将如何确定

如果它是一个

无状态小部件

，首先让你的小部件

StatefulWidget

然后有一个变量

bool\u obsolizeText

，并将其传递给

TextFormField

。根据需要，使用

setState

进行切换

例如：

class _FormFieldSampleState extends State<FormFieldSample> {

  // Initially password is obscure
  bool _obscureText = true;

  String _password;

  // Toggles the password show status
  void _toggle() {
    setState(() {
      _obscureText = !_obscureText;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Sample"),
      ),
      body: new Container(
        child: new Column(
          children: <Widget>[
            new TextFormField(
              decoration: const InputDecoration(
                  labelText: 'Password',
                  icon: const Padding(
                      padding: const EdgeInsets.only(top: 15.0),
                      child: const Icon(Icons.lock))),
              validator: (val) => val.length < 6 ? 'Password too short.' : null,
              onSaved: (val) => _password = val,
              obscureText: _obscureText,
            ),
            new FlatButton(
                onPressed: _toggle,
                child: new Text(_obscureText ? "Show" : "Hide"))
          ],
        ),
      ),
    );
  }
}

class\u FormFieldSampleState扩展状态{
//最初，密码是模糊的
bool _obsolizeText=true；
字符串\u密码；
//切换密码显示状态
void _toggle（）{
设置状态（）{
_蒙蔽文本=！\u蒙蔽文本；
});
}
@凌驾
小部件构建（构建上下文）{
归还新脚手架(
appBar：新的appBar(
标题：新文本（“样本”），
),
主体：新容器(
子：新列(
儿童：[
新TextFormField(
装饰：常量输入装饰(
labelText:“密码”，
图标：常量填充(
填充：仅限常量边集（顶部：15.0），
子：常量图标（Icons.lock）），
验证程序：（val）=>val.length<6？“密码太短。”：null，
onSaved：（val）=>_password=val，
蒙蔽文本：_蒙蔽文本，
),
新扁平按钮(
按下按钮：_切换，
子项：新文本（_obsolizeText？“显示”：“隐藏”））
],
),
),
);
}
}

---

希望这有帮助

我已经按照@Hemanth Raj创建了一个解决方案，但是以一种更稳健的方式

class SignIn extends StatefulWidget {

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

class _SignInState extends State<SignIn> {

        // Initially password is obscure
  bool _obscureText = true;
    // Toggles the password show status
  void _togglePasswordStatus() {
    setState(() {
      _obscureText = !_obscureText;
    });
  }
  @override
  Widget build(BuildContext context) {
    return 
    Scaffold(
      backgroundColor: Colors.brown[100],
      appBar: AppBar(
        backgroundColor: Colors.brown[400],
        elevation: 0.0,
        title: Text('Sign In'),
      ),
      body: Container(
        padding: EdgeInsets.symmetric(vertical:20.0,horizontal:50.0),
        child: Form(
          key: _formKey,
          child: Column(children: <Widget>[
            TextFormField(
              decoration: InputDecoration(
                hintText: 'Password',
                suffixIcon:  IconButton(
                  icon:Icon(_obscureText ? Icons.visibility:Icons.visibility_off,),
                   onPressed: _togglePasswordStatus,
                   color: Colors.pink[400],
                   ),
              ),
              validator: (val){
                return
                val.length < 6 ? 'Enter A Password Longer Than 6 Charchters' :null;
              },
              obscureText: _obscureText,
              onChanged: (val){
                setState(() {
                  password = val.trim();
                });
              },
            ),
        ],),),
      ),
    );
  }
}

首先声明一个

bool

变量

\u passwordVisible

在

initState（）

以下是

TextFormField

小部件：

TextFormField(
   keyboardType: TextInputType.text,
   controller: _userPasswordController,
   obscureText: !_passwordVisible,//This will obscure text dynamically
   decoration: InputDecoration(
       labelText: 'Password',
       hintText: 'Enter your password',
       // Here is key idea
       suffixIcon: IconButton(
            icon: Icon(
              // Based on passwordVisible state choose the icon
               _passwordVisible
               ? Icons.visibility
               : Icons.visibility_off,
               color: Theme.of(context).primaryColorDark,
               ),
            onPressed: () {
               // Update the state i.e. toogle the state of passwordVisible variable
               setState(() {
                   _passwordVisible = !_passwordVisible;
               });
             },
            ),
          ),
        );

使用信用卡，您可以将小部件创建为单独的

密码。dart

：

import 'package:flutter/material.dart';

class PasswordField extends StatefulWidget {
  const PasswordField({
    this.fieldKey,
    this.hintText,
    this.labelText,
    this.helperText,
    this.onSaved,
    this.validator,
    this.onFieldSubmitted,
  });

  final Key fieldKey;
  final String hintText;
  final String labelText;
  final String helperText;
  final FormFieldSetter<String> onSaved;
  final FormFieldValidator<String> validator;
  final ValueChanged<String> onFieldSubmitted;

  @override
  _PasswordFieldState createState() => new _PasswordFieldState();
}

class _PasswordFieldState extends State<PasswordField> {
  bool _obscureText = true;

  @override
  Widget build(BuildContext context) {
    return new TextFormField(
      key: widget.fieldKey,
      obscureText: _obscureText,
      maxLength: 8,
      onSaved: widget.onSaved,
      validator: widget.validator,
      onFieldSubmitted: widget.onFieldSubmitted,
      decoration: new InputDecoration(
        border: const UnderlineInputBorder(),
        filled: true,
        hintText: widget.hintText,
        labelText: widget.labelText,
        helperText: widget.helperText,
        suffixIcon: new GestureDetector(
          onTap: () {
            setState(() {
              _obscureText = !_obscureText;
            });
          },
          child:
          new Icon(_obscureText ? Icons.visibility : Icons.visibility_off),
        ),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
类PasswordField扩展StatefulWidget{
常量密码字段({
这是现场钥匙，
this.hintText，
这是labelText，
这是helperText，
这是我的储蓄，
这个验证器，
本文件已提交，
});
最终密钥字段密钥；
最终字符串hintText；
最终字符串标签文本；
最后一个字符串helperText；
保存最终表单设置器；
最终FormFieldValidator验证程序；
提交的最终价值；
@凌驾
_PasswordFieldState createState（）=>new_PasswordFieldState（）；
}
类_PasswordFieldState扩展状态{
bool _obsolizeText=true；
@凌驾
小部件构建（构建上下文）{
返回新的TextFormField(
key:widget.fieldKey，
蒙蔽文本：_蒙蔽文本，
最大长度：8，
onSaved:widget.onSaved，
验证程序：widget.validator，
onFieldSubmitted:widget.onFieldSubmitted，
装饰：新的输入装饰(
边框：常量UnderlineInputBorder（），
是的，
hintText:widget.hintText，
labelText:widget.labelText，
helperText:widget.helperText，
suffixIcon：新的手势检测器(
onTap:（）{
设置状态（）{
_蒙蔽文本=！\u蒙蔽文本；
});
},
儿童：
新图标（_obsolizeText？Icons.visibility:Icons.visibility_off），
),
),
);
}
}

称之为：

  import 'package:my_app/password.dart';

  String _password;
  final _passwordFieldKey = GlobalKey<FormFieldState<String>>();

  PasswordField(
    fieldKey: _passwordFieldKey,
    helperText: 'No more than 8 characters.',
    labelText: 'Password *',
    onFieldSubmitted: (String value) {
      setState(() {
        this._password = value;
      });
    },
  ),

import'package:my_app/password.dart'；
字符串\u密码；
final _passwordFieldKey=GlobalKey（）；
密码字段(
字段键：\ u密码字段键，
helperText:“不超过8个字符。”，
labelText:“密码*”，
onFieldSubmitted:（字符串值）{
设置状态（）{
这是。_密码=值；
});
},
),

我握住并松开了龙头：

    bool _passwordVisible;

@override
void initState() {
    _passwordVisible = false;
    super.initState();
}

// ...
TextFormField(
  obscureText: !_passwordVisible,
  decoration: InputDecoration(
    hasFloatingPlaceholder: true,
    filled: true,
    fillColor: Colors.white.withOpacity(0.5),
    labelText: "Password",
    suffixIcon: GestureDetector(
      onLongPress: () {
        setState(() {
          _passwordVisible = true;
        });
      },
      onLongPressUp: () {
        setState(() {
          _passwordVisible = false;
        });
      },
      child: Icon(
          _passwordVisible ? Icons.visibility : Icons.visibility_off),
    ),
  ),
  validator: (String value) {
    if (value.isEmpty) {
      return "*Password needed";
    }
  },
  onSaved: (String value) {
    _setPassword(value);
  },
);

---

我个人喜欢一直隐藏密码，当你想看到密码时就可以看到，所以这是我用来隐藏/取消隐藏密码的方法，如果你想在触摸屏与隐藏图标接触时看到密码，并且在你移除联系人后立即隐藏密码，那么这是为你准备的

//make it invisible globally
  bool invisible = true;

//wrap your toggle icon in Gesture Detector
  GestureDetector(
   onTapDown: inContact,//call this method when incontact
   onTapUp: outContact,//call this method when contact with screen is removed
   child: Icon(
   Icons.remove_red_eye,
   color: colorButton,
   ),
  ),

  void inContact(TapDownDetails details) {
    setState(() {
      invisible = false;
    });
  }

  void outContact(TapUpDetails details) {
    setState(() {
      invisible=true;
    });
  }

我也在这里发布了一个包

以上代码的输出

bool\u obcludedtext=true；
_切换（）{
设置状态（）{
_模糊文本=！\u模糊文本；
});
}
小部件_createPassword（）{
返回文本字段(
蒙蔽文本：_蒙蔽文本，
光标颜色：颜色。黑色54，
样式：TextStyle（颜色：Colors.black54），
装饰：输入装饰(
标签样式：文本样式(
颜色：颜色
),
聚焦顺序：大纲输入边框(
边界边(
颜色：颜色
)
),
边框：大纲输入边框(
边界半径：边界半径。圆形（5.0）
),
labelText:“Contraseña”，
hintText:“反作用”，
后缀：扁平按钮（按下时：\切换，子：图标（图标。移除\红色\眼睛，颜色：\模糊文本？颜色。黑色12：颜色。黑色54））
),
一旦更改：（值）{
设置状态（）{
_密码=值；
});
},
);
}

希望这有帮助

类登录扩展StatefulWidget{
class SignIn extends StatefulWidget {

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

class _SignInState extends State<SignIn> {

        // Initially password is obscure
  bool _obscureText = true;
    // Toggles the password show status
  void _togglePasswordStatus() {
    setState(() {
      _obscureText = !_obscureText;
    });
  }
  @override
  Widget build(BuildContext context) {
    return 
    Scaffold(
      backgroundColor: Colors.brown[100],
      appBar: AppBar(
        backgroundColor: Colors.brown[400],
        elevation: 0.0,
        title: Text('Sign In'),
      ),
      body: Container(
        padding: EdgeInsets.symmetric(vertical:20.0,horizontal:50.0),
        child: Form(
          key: _formKey,
          child: Column(children: <Widget>[
            TextFormField(
              decoration: InputDecoration(
                hintText: 'Password',
                suffixIcon:  IconButton(
                  icon:Icon(_obscureText ? Icons.visibility:Icons.visibility_off,),
                   onPressed: _togglePasswordStatus,
                   color: Colors.pink[400],
                   ),
              ),
              validator: (val){
                return
                val.length < 6 ? 'Enter A Password Longer Than 6 Charchters' :null;
              },
              obscureText: _obscureText,
              onChanged: (val){
                setState(() {
                  password = val.trim();
                });
              },
            ),
        ],),),
      ),
    );
  }
}

@凌驾
_SignInState createState（）=>\u SignInState（）；
}
类_SignInState扩展状态
import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  // initially password is invisible
  bool _passwordVisible = false;
  String _password;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // other widget that does not need update when password visibility is toggled
        Text("I do not require update"),
        
        StatefulBuilder(builder: (_context, _setState) {
          // only following widget gets update when _setState is used
          return TextFormField(
            decoration: InputDecoration(
              suffixIcon: IconButton(
                icon: Icon(
                  _passwordVisible ? Icons.visibility : Icons.visibility_off,
                ),
                onPressed: () {
                  // use _setState that belong to StatefulBuilder
                  _setState(() {
                    _passwordVisible = !_passwordVisible;
                  });
                },
              ),
              labelText: 'Password',
              icon: const Padding(
                padding: const EdgeInsets.only(top: 15.0),
                child: const Icon(Icons.lock),
              ),
            ),
            validator: (val) => val.length < 6 ? 'Password too short.' : null,
            onSaved: (val) => _password = val,
            obscureText: true,
          );
        }),
      ],
    );
  }
}


    TextFormFeild(
    decoration:InputDecoration(
     icon: _isSecurityIcon == true
  ? IconButton(
   icon: Icon(Icons.visibility_off_outlined),
onPressed: () {
   setState(() {
_isSecurityIcon = false;
   });
  },
)
: IconButton(
icon: Icon(Icons.visibility_outlined),
onPressed: () {
setState(
() {
_isSecurityIcon = true;
    },
    );
    },
   ),
   ),
  );```

import 'package:flutter/material.dart';

class ObscureTextState with ChangeNotifier {
  bool _isTrue = true;
  bool get isTrue => _isTrue;

  get switchObsIcon {
    return _isTrue ? Icon(Icons.visibility_off) : Icon(Icons.visibility);
  }

  void toggleObs() {
    _isTrue = !_isTrue;
    notifyListeners();
  }
}


            Consumer<ObscureTextState>(
              builder: (context, obs, child) {
                return TextFormField(
                  controller: _passwordController,
                  validator: (value) {
                    if (value.isEmpty) {
                      return "Alan boş bırakılamaz!";
                    } else if (value.length < 6) {
                      return "Şifre en az 6 haneden oluşmalıdır.";
                    } else {
                      return null;
                    }
                  },
                  obscureText:
                      Provider.of<ObscureTextState>(context, listen: false)
                          .isTrue,
                  decoration: InputDecoration(
                      prefixIcon: Icon(Icons.lock),
                      suffixIcon: IconButton(
                        onPressed: () {
                          Provider.of<ObscureTextState>(context, listen: false)
                              .toggleObs();
                        },
                        icon: Provider.of<ObscureTextState>(context,
                                listen: false)
                            .switchObsIcon,
                      ),
                      hintText: "Şifre",
                      border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(20.0))),
                );
              },
            ),

child: TextFormField(
              decoration: InputDecoration(
                  fillColor: Color(0xFFFFFFFF), filled: true,
                  enabledBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: Color(0xFF808080)),
                  ),
                  suffixIcon: GestureDetector(
                    onTap: () {
                      setState(() {
                        _showPassword = !_showPassword;
                      });
                    },
                    child: Icon(
                        _showPassword ? Icons.visibility : Icons.visibility_off,
                    ),
                  ),
                  labelText: 'Password'),
              obscureText: !_showPassword,
            ),