Flutter TextFormField密码显示切换按钮报错，需实现点击切换功能

错误原因分析 #

你当前代码的核心问题有三个：

• 使用了const InputDecoration，但内部包含IconButton（非常量组件），导致"Not a constant expression"错误。
• hide是一个函数而非布尔变量，!hide的写法不符合语法，且onPressed需要的是无返回值的回调函数，不是布尔值。
• 没有用状态变量维护密码显示/隐藏状态，无法实现切换逻辑。

修复后的完整代码 #

// 在你的State类中定义状态变量
bool _isPasswordHidden = true;

@override
Widget build(BuildContext context){
  return Form(
    key: loginClass,
    // ... 其他原有代码
    Padding(
      padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 8),
      child: TextFormField(
        controller: password,
        obscureText: _isPasswordHidden, // 绑定状态变量
        decoration: InputDecoration( // 移除const关键字
          labelText: "Password",
          hintText: "Enter your password",
          border: OutlineInputBorder(),
          icon: Icon(Icons.lock),
          suffix: IconButton(
            icon: Icon(
              // 根据状态切换图标
              _isPasswordHidden ? Icons.visibility_rounded : Icons.visibility_off_rounded,
            ),
            onPressed: () {
              // 点击切换密码显示状态
              setState(() {
                _isPasswordHidden = !_isPasswordHidden;
              });
            },
          ),
        ),
        validator: (String? value) {
          if (value == null || value.isEmpty) {
            return 'Please enter your password';
          }
          return null;
        },
      ),
    ),
    // ... 其他原有代码
  );
}

关键修改说明 #

1. 状态变量替代函数：用_isPasswordHidden布尔变量维护密码隐藏状态，通过setState触发UI更新。
2. 移除const装饰器：InputDecoration内部包含动态的IconButton，不能声明为常量。
3. 回调与图标切换：onPressed中通过setState翻转状态变量，同时根据状态切换显示"可见"或"隐藏"图标，让用户直观感知当前状态。

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