如何在Flutter的TextFormField中实现密码显示与隐藏功能？

实现思路 #

通过状态管理控制密码可见性，在输入框后缀添加可点击的眼睛图标，点击时切换密码的显示/隐藏状态。

完整代码实现 #

// 若输入框已在StatefulWidget中，可直接复用现有状态逻辑，无需单独抽组件
class PasswordInputField extends StatefulWidget {
  final Map<String, dynamic> data;
  const PasswordInputField({super.key, required this.data});

  @override
  State<PasswordInputField> createState() => _PasswordInputFieldState();
}

class _PasswordInputFieldState extends State<PasswordInputField> {
  // 控制密码是否可见的状态变量
  bool _isPasswordVisible = false;

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      decoration: InputDecoration(
        label: const Text('PASSWORD'),
        // 添加可点击的眼睛图标作为输入框后缀
        suffixIcon: GestureDetector(
          onTap: () {
            setState(() {
              // 点击切换状态
              _isPasswordVisible = !_isPasswordVisible;
            });
          },
          child: Icon(
            // 根据状态切换显示的图标
            _isPasswordVisible ? Icons.visibility : Icons.visibility_off,
            color: Colors.grey,
          ),
        ),
      ),
      keyboardType: TextInputType.visiblePassword,
      // 绑定密码隐藏状态到变量的取反值
      obscureText: !_isPasswordVisible,
      validator: (val) {
        if (val!.length < 6) {
          return "请输入至少6个字符";
        }
        return null;
      },
      onSaved: (val) => widget.data['password'] = val!,
    );
  }
}

关键细节说明 #

• 用GestureDetector包裹图标，实现点击交互逻辑
• 通过setState更新状态，触发UI重绘以切换图标和密码显示状态
• 若输入框已处于现有StatefulWidget中，可直接将_isPasswordVisible变量放在当前组件的State里，无需单独抽离组件

内容的提问来源于stack exchange，提问作者student