如何确定Flutter中TextFormField的高度并调整错误提示位置

你当前遇到的间距过大、错误提示溢出问题，根源是2个：默认InputDecoration带了错误文本的默认间距，以及你给TextFormField外层加了固定高度限制，错误提示只能在输入框下方渲染，才会超出外层容器。可以按以下步骤修改：

1. 替换输入框装饰样式，自定义错误文本间距 #

不要使用InputDecoration.collapsed构造，换成普通的InputDecoration手动关闭冗余边距，控制错误文本样式：

decoration: InputDecoration(
  hintText: 'Enter Current Password',
  hintStyle: FONT_CONST.MEDIUM.copyWith(fontSize: 46.w, color: COLOR_CONST.color_c8cacb),
  // 关闭默认边框、内边距
  border: InputBorder.none,
  isDense: true,
  contentPadding: EdgeInsets.zero,
  // 自定义错误样式，减少间距
  errorStyle: TextStyle(
    fontSize: 28.w,
    height: 1.1, // 控制行高，缩小上下空白
  ),
  errorMaxLines: 2, // 支持长错误文本换行，避免被截断
),

2. 调整TextFormField高度适配外层容器 #

你外层容器总高度是203.w，减去上方标签的padding、标签自身高度后，剩下的就是输入框+错误文本的可用总高度，不需要给TextFormField外层写死187.w的高度，换成高度约束即可：

• 先计算可用高度：总高203.w - 标签上padding 38.w - 标签高度≈40.w = 约125.w（可根据实际显示效果微调）
• 把TextFormField外层Container的height:187.w替换为constraints: BoxConstraints(maxHeight: 125.w)，让输入框和错误文本自适应高度，不会超出上限。

3. 调整定位参数对齐底部 #

把Stack里Positioned的top:105.w参数适当调小（比如调到80.w左右），实际运行微调数值，直到错误文本底部刚好和外层容器底部对齐即可。

可选优化方案（更推荐） #

如果不想反复调定位参数，可以直接抛弃默认的错误提示渲染，自己控制错误文本位置，连Stack都可以省略，结构更稳定：

//  State里定义变量存错误信息
String? _pwdError;

// 替换原有Stack结构，直接在外层Container里放Column
Container(
  width: 990.w,
  height: 203.w,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(30.0.w),
    border: Border.all(color: Colors.black12),
  ),
  child: Padding(
    padding: EdgeInsets.fromLTRB(46.w, 38.w, 46.w, 15.w),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Current Password',
          style: FONT_CONST.MEDIUM.copyWith(fontSize: 34.w, color: COLOR_CONST.color_9e9e9e),
        ),
        SizedBox(height: 10.w),
        TextFormField(
          obscureText: true,
          style: FONT_CONST.MEDIUM.copyWith(fontSize: 46.w),
          decoration: InputDecoration.collapsed(
            hintText: 'Enter Current Password',
            hintStyle: FONT_CONST.MEDIUM.copyWith(fontSize: 46.w, color: COLOR_CONST.color_c8cacb),
          ),
          controller: _textEditingController1,
          onChanged: (value) {
            // 校验逻辑写在这里，实时更新错误信息
            setState(() {
              if (value.isEmpty) {
                _pwdError = "empty";
              } else if (value!=_myInfoProvider.my.password) {
                _pwdError = "Please enter your current password";
              } else {
                _pwdError = null;
              }
            });
          },
        ),
        Spacer(),
        // 错误文本固定在容器底部，位置完全可控
        if(_pwdError != null)
          Text(
            _pwdError!,
            style: TextStyle(fontSize: 28.w, color: Colors.red),
          )
      ],
    ),
  ),
),

表单提交的时候也可以复用这个变量做校验判断，不需要额外调用validate()方法。

内容的提问来源于stack exchange，提问作者임정현