How to add a toggle for hiding and viewing password in Flutter?

Question

I have been trying to develop an app and for its sign up, I am not sure how and where a toggle to hide/view the password can be added. Is it under obscuretext? If so, how do I add a condition for it to my code? (Used a form to create for entering sign up details.)

Code of the form where the Custom Text Field was implemented:

  _signUpForm() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 25, vertical: 30),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(5)),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          CustomRoundedTextField(
            label: 'Email',
            onChange: (val) {
              email = val;
            },
          ),
          CustomRoundedTextField(
            label: 'Password',
            isPassword: true,
            onChange: (val) {
              password = val;
            },
          ),
          SizedBox(height: 40),
          CustomBlueRoundedButton(
            child: Text(
              'Register Account',
              style: TextStyle(color: Colors.white),
            ),
            onPressed: _createAccount,
          ),
          SizedBox(height: 15,),
          Container(
            child: Center(
              child: Text("Already have an account?"),
            ),
          ),
          SizedBox(height: 5),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              InkWell(
                onTap: openLoginPage,
                child: Text("Login", style: TextStyle(
                    color: Color(0xff1A3C90),
                    fontWeight: FontWeight.w700
                ),),
              )
            ],
          )
        ],
      ),
    );
  }

Custom Text Field Class Code:

class CustomRoundedTextField extends StatelessWidget {
  final label;
  final onChange;
  final isPassword;
  final bottomPadding;
  final textCapitalization;
  final inputType;
  final controller;
  final iconData;

  CustomRoundedTextField(
      {
        this.iconData,
        this.controller,
        this.inputType = TextInputType.text,
        this.label,
        this.onChange,
        this.isPassword = false,
        this.bottomPadding = 16,
        this.textCapitalization = TextCapitalization.none});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 16),
      child: TextField(
        controller: controller,
        keyboardType: inputType,
        textCapitalization: textCapitalization,
        obscureText: isPassword,
        style:
        TextStyle(fontSize: 15, color: Colors.black),
        decoration: InputDecoration(
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(15),
            borderSide: BorderSide(
              color: Colors.black54,
            ),
          ),
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(15),
            borderSide: BorderSide(
              color: Colors.black,
            ),
          ),
          labelText: label,
          labelStyle: TextStyle(
            fontSize: 15,
            color: Colors.black,
            fontWeight: FontWeight.w600,
          ),
        ),
        onChanged: onChange,
      ),
    );
  }
}

Answer 1

Make your CustomRoundedTextField as StatefulWidget and add suffixIcon to TextField's InputDecoration. Below your code:

class CustomRoundedTextField extends StatefulWidget {
  final label;
  final onChange;
  final isPassword;
  final bottomPadding;
  final textCapitalization;
  final inputType;
  final controller;
  final iconData;
  

  CustomRoundedTextField(
      {
        this.iconData,
        this.controller,
        this.inputType = TextInputType.text,
        this.label,
        this.onChange,
        this.isPassword = false,
        this.bottomPadding = 16,
        this.textCapitalization = TextCapitalization.none});

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

class _CustomRoundedTextFieldState extends State<CustomRoundedTextField> {
  bool _showPwd = false;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 16),
      child: TextField(
        controller: widget.controller,
        keyboardType: widget.inputType,
        textCapitalization: widget.textCapitalization,
        obscureText: widget.isPassword && !_showPwd,
        style:
        TextStyle(fontSize: 15, color: Colors.black),
        decoration: InputDecoration(
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(15),
            borderSide: BorderSide(
              color: Colors.black54,
            ),
          ),
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(15),
            borderSide: BorderSide(
              color: Colors.black,
            ),
          ),
          labelText: widget.label,
          labelStyle: TextStyle(
            fontSize: 15,
            color: Colors.black,
            fontWeight: FontWeight.w600,
          ),
          suffixIcon: widget.isPassword ? IconButton(
          icon: Icon(_showPwd ? Icons.visibility : Icons.visibility_off),
            onPressed:(){
              setState((){
                _showPwd = !_showPwd;
              });
            }
          ) : null,
        ),
        onChanged: widget.onChange,
      ),
    );
  }
}