How to show/hide password in TextFormField?

Question

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?

Answer 1

I have created a solution as per @Hemanth Raj but in a more robust way.

First declare a bool variable _passwordVisible.

Initiate _passwordVisible to false in initState()

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

Following is the TextFormField widget :

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

Answer 2

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

Hope this helps!