Flutter登录页密码输入框与错误提示重叠问题求助

问题分析 #

你的代码存在两个核心问题：

• 使用Positioned组件却未将其与输入框容器包裹在Stack中，导致定位逻辑失效，错误提示与输入框重叠
• 手动维护_passwordError状态属于冗余操作，TextFormField原生支持错误提示功能，无需额外实现

解决方案 #

直接利用TextFormField自带的验证与错误提示能力，同时调整容器布局避免固定高度限制：

1. 移除手动编写的Positioned错误提示代码块
2. 删除输入框容器的固定height:60配置，让容器自适应内容高度
3. 通过InputDecoration的errorStyle自定义错误文本样式
4. 无需维护_passwordError变量，validator返回的信息会自动作为错误提示展示

修改后的完整代码 #

Container(
  // Text Field for password
  margin: const EdgeInsets.all(10.0),
  padding: const EdgeInsets.all(14.0),
  width: 320,
  decoration: const BoxDecoration(
    color: Color(0xffffffff),
  ),
  child: TextFormField(
    maxLines: 1,
    // use to hide password
    obscureText: _obscureText,

    decoration: InputDecoration(
      prefixIcon: const Icon(Icons.lock),
      hintText: 'Password',
      // 配置错误文本样式
      errorStyle: const TextStyle(
        color: Colors.red,
        fontSize: 12,
        height: 1, // 调整行高避免挤压
      ),
      suffixIcon: IconButton(
        icon: Icon(
            _obscureText ? Icons.visibility_off : Icons.visibility),
        onPressed: _toggle,
      ),
    ),
    //  Password validation , show an error message when enter wrong values
    validator: (value) {
      if (value == null || value.isEmpty) {
        return 'Please enter a password.';
      } else if (value.length < 6) {
        return 'The password must be at least 6 characters long.';
      }
      return null;
    },
  ),
)

额外说明 #

• 取消固定高度后，输入框容器会根据错误提示的存在自动调整高度，彻底避免重叠问题
• errorStyle中的height设置为1可以让错误文本正常展示，不会出现高度异常
• 如果需要更复杂的错误提示布局，仍可以使用Stack，但必须确保输入框容器和错误提示都在Stack内部，同时给输入框容器设置bottom间距预留错误提示空间

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