Show/Hide Passwords in Flutter's TextFormField

Question

I'm working on a TextFormField to accept passwords. I have set the suffix icon to have IconButton child to detect on click events and to toggle the obscuretext attribute of the TextFormField. The callback function for the iconButton gets called but the TextFormField doesn't get repainted. Any ideas on how to solve this?

static Widget buildTextFormField(String id, 
                               FormFieldValidator validateField,
                               FormFieldSetter saveField,
                               InputDecoration decoration,
                               EdgeInsetsGeometry paddingInfo,
                               EdgeInsetsGeometry marginInfo,
                               TextInputType keyboardType,
                               {bool obscureField:false, double width:328.0,
                                TextEditingController controller}
  ){
return Container(
  padding: paddingInfo,
  margin: marginInfo,
  width: width,
  child: TextFormField(
    key: Key(id),
    obscureText: obscureField,
    validator: validateField,
    onSaved: saveField,
    keyboardType: keyboardType,
    decoration: decoration,
    controller: controller,
  ),
);

}

InputDecoration passwordDecoration = InputDecoration(
   hintText: 'Password',
   labelText: 'Enter your password',
   suffixIcon:
      IconButton(
         icon: Icon(
            _passwordVisible ? Icons.visibility : Icons.visibility_off,
            semanticLabel: _passwordVisible ? 'hide password' : 'show password',
         ),
         onPressed: () {
            setState(() {
               _passwordVisible ^= true;
               //print("Icon button pressed! state: $_passwordVisible"); //Confirmed that the _passwordVisible is toggled each time the button is pressed.
            });
         }),
   labelStyle: TextStyle(
      fontFamily: 'Roboto Medium',
      fontSize: 12.0,
      color: Color(0x99000000),
      letterSpacing: 0.4,
   ),
);
final passwordPaddingInfo = const EdgeInsets.only(top: 15.0, bottom:15.0,
                                                  left: 22.0, right:25.0);
this._passwordField = AdministrationComponents.
buildTextFormField('passwordField', validatePassword,
   (value) => _password = value, passwordDecoration, passwordPaddingInfo,
   null, null, controller:_passwordController,
   obscureField: !_passwordVisible);

user_2056451 · Answer

Try to this

 bool _showPassword = false;
  void _togglevisibility() {
    setState(() {
      _showPassword = !_showPassword;
    });
  }

Textform field code

child: TextFormField(
                                controller: _passwordController,
                                obscureText: !_showPassword,
                                cursorColor: Colors.red,
                                style: TextStyle(color: Colors.white),
                                decoration: InputDecoration(
                                  hintText: "Password",
                                  border: InputBorder.none,
                                  suffixIcon: GestureDetector(
                                    onTap: () {
                                      _togglevisibility();
                                    },
                                    child: Icon(
                                      _showPassword ? Icons.visibility : Icons
                                          .visibility_off, color: Colors.red,),
                                  ),
                                ),
                              ),

user_8427144 · Answer

Show/Hide Passwords in Flutter's TextFormField

Step 1:

bool _obscureText = true;

Step 2:

void _toggle() {
    setState(() {
      _obscureText = !_obscureText;
    });
  }

Step 3:

 TextField(
                controller: password,
                style: TextStyle(fontSize: 16.0),
                obscureText: _obscureText,
                decoration: new InputDecoration(
                  border: InputBorder.none,
                  focusedBorder: InputBorder.none,
                  enabledBorder: InputBorder.none,
                  errorBorder: InputBorder.none,
                  disabledBorder: InputBorder.none,
                  hintText: "Password",
                  suffixIcon: InkWell(
                    onTap: _toggle,
                    child: Icon(
                      _obscureText
                          ? FontAwesomeIcons.eye
                          : FontAwesomeIcons.eyeSlash,
                      size: 15.0,
                      color: Colors.black,
                    ),
                  ),
                ),
              ),

user_10861031 · Answer

Thanks @ShyjuM and @ diegoveloper! I see what I was doing wrong - I was calling the buildTextFormField in the constructor of my State class and not in the build method. Moving the call to buildTextFormField inside the build method fixed it. Thanks again for all of your help!

user_666221 · Answer

You have some errors in your code.

Replace this :

_passwordVisible > Icons.visibility : Icons.visibility_off,

and

_passwordVisible ^= true;

By this:

_passwordVisible ? Icons.visibility : Icons.visibility_off,

and

  _passwordVisible = !_passwordVisible;

user_13338955 · Answer

This is the Password dart i use

import 'package:flutter/material.dart';
class LoginPass extends StatefulWidget {
LoginPass(this.controllerUpass);

  final Function controllerUpass;

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

class _LoginPassState extends State {
  bool _isHidden = true;
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.fromLTRB(0, 30, 0, 10),
      child: Container(
        height: 35,
        child: Center(
          child: Padding(
            padding: const EdgeInsets.only(left: 20),
            child: TextField(
              obscureText: _isHidden,
              onChanged: (value) {
                widget.controllerUpass(value);
              },
              decoration: InputDecoration(
                  hintText: 'Password',
                  border: InputBorder.none,
                  focusedBorder: InputBorder.none,
                  enabledBorder: InputBorder.none,
                  errorBorder: InputBorder.none,
                  disabledBorder: InputBorder.none,
                  suffixIcon: GestureDetector(
                    onTap: () {
                      setState(() {
                        _isHidden = !_isHidden;
                      });
                    },
                    child: _isHidden
                        ? Icon(
                            Icons.remove_red_eye_sharp,
                            color: Colors.blue,
                          )
                        : Icon(
                            Icons.remove_red_eye,
                            color: Colors.red,
                          ),
                  )),
            ),
          ),
        ),
        decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(
              color: Colors.black26,
              spreadRadius: 1,
              blurRadius: 3,
              offset: Offset(0, 3),
            ),
          ],
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(3)),
        ),
      ),
    );
  }
}

In Main call

LoginPass(controllerUpass),

Show/Hide Passwords in Flutter's TextFormField

5 Answers