how to show password and confirm password one by one when user click on suffix icon in flutter app?

Question

how to show password and confirm password one by one when user click on suffix icon in flutter app .But I get an error when user click on suffix icon of password text field it shows both text in password text field and text in confirm password text field .I apply method which change the obscure text property when user tap on suffix icon.

Answer 1

you can have two piece of state each one for a text field, here is an example below:

class Password extends StatefulWidget {
  @override
  _PasswordState createState() => _PasswordState();
}

class _PasswordState extends State<Password> {
  bool showPassword = true;
  bool showConfirmPassword = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sample Code'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(12.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              obscureText: showPassword,
              decoration: InputDecoration(
                hintText: 'Enter password',
                suffixIcon: IconButton(
                  icon: Icon(Icons.remove_red_eye),
                  onPressed: () => setState(() => showPassword = !showPassword),
                ),
              ),
            ),
            TextField(
              obscureText: showConfirmPassword,
              decoration: InputDecoration(
                hintText: 'Confirm password',
                suffixIcon: IconButton(
                  icon: Icon(Icons.remove_red_eye),
                  onPressed: () => setState(
                      () => showConfirmPassword = !showConfirmPassword),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Update based on OP new request

to have a TextField obscure it's text when moving to another TextField you must use a FocusNode like this:

class Password extends StatefulWidget {
class Password extends StatefulWidget {
  @override
  _PasswordState createState() => _PasswordState();
}

class _PasswordState extends State<Password> {
  bool showPassword = true;
  bool showConfirmPassword = true;

  FocusNode passwordFocusNode;
  FocusNode confirmPasswordFocusNode;

  @override
  void initState() {
    super.initState();
    passwordFocusNode = FocusNode();
    confirmPasswordFocusNode = FocusNode();
  }

  @override
  void dispose() {
    super.dispose();
    passwordFocusNode.dispose();
    confirmPasswordFocusNode.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sample Code'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(12.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              onTap: () => setState(() => passwordFocusNode.requestFocus()),
              focusNode: passwordFocusNode,
              obscureText: !passwordFocusNode.hasFocus,
              decoration: InputDecoration(
                hintText: 'Enter password',
              ),
            ),
            TextField(
              focusNode: confirmPasswordFocusNode,
              onTap: () {
                setState(() {
                  FocusScope.of(context).unfocus();
                  FocusScope.of(context).requestFocus(confirmPasswordFocusNode);
                });
              },
              obscureText: showConfirmPassword,
              decoration: InputDecoration(
                hintText: 'Confirm password',
                suffixIcon: IconButton(
                  icon: Icon(Icons.remove_red_eye),
                  onPressed: () => setState(
                      () => showConfirmPassword = !showConfirmPassword),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}