当用户在flutter应用程序中单击后缀图标时，如何显示密码并一次确认密码？

Question

如何在flutter应用程序中单击后缀图标时显示密码并逐个确认密码。但是当用户单击密码文本字段的后缀图标时出现错误，它同时显示密码文本字段中的文本和确认密码中的文本文本字段。我应用了当用户点击后缀图标时更改模糊文本属性的方法。

Answer 1

一个文本字段可以有两种状态，下面是一个示例：

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