androiddartflutter

How to show/hide password in TextFormField?


Currently I have my password TextFormField like this:

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: true,
);

I want a button like interaction which will make password visible and invisible. Can I do it inside TextFormField? Or I will have to make a Stack widget to get my required UI. And how will the condition be made regarding obscureText true/false?


Solution

  • First make you widget StatefulWidget if it is a StatelessWidget.

    Then have a variable bool _obscureText and pass it to your TextFormField. The toggle it with setState as required.

    Example:

    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"))
              ],
            ),
          ),
        );
      }
    }