如何在errorText显示时保持Flutter TextFormField的原有样式不变

问题根源 #

Flutter 原生 TextFormField 的默认逻辑是：当 errorText 为非空值时，会动态在输入框底部新增错误文本展示区域，压缩输入文本到底部边框的原有内边距，因此会出现样式错乱、间距变化的问题。

解决方案 #

方案1：固定占位，统一输入框高度

直接在输入框的装饰配置中预留错误提示的高度，不管是否展示错误，输入框整体高度保持一致，输入文本的间距就不会变化。
修改 TextFieldWidget 中的 InputDecoration 配置即可：

decoration: InputDecoration(
    hintText: this.hint,
    errorText: errorText,
    counterText: '',
    // 新增以下配置
    contentPadding: EdgeInsets.symmetric(vertical: 12, horizontal: 0), // 按需调整垂直数值，固定输入内容上下间距
    errorStyle: TextStyle(height: 1), // 固定错误文本行高
    helperText: '', // 无错误时也预留一行占位，和错误提示高度对齐
    helperStyle: TextStyle(height: 1),
),

适用场景：希望所有表单项的输入框高度完全统一，页面布局更规整。

方案2：错误提示外移，不占用输入框高度

如果不需要无错误时预留空白位置，可以把错误提示从输入框的装饰配置中移除，放到组件外层单独渲染，完全不影响输入框本身的高度。
第一步：修改 TextFieldWidget，移除 InputDecoration 中的 errorText 配置，固定输入框内边距：

decoration: InputDecoration(
    hintText: this.hint,
    // 删掉errorText参数
    counterText: '',
    contentPadding: EdgeInsets.symmetric(vertical: 12, horizontal: 0), // 固定输入内容上下间距
),

第二步：修改 NumberTextField 的结构，在输入行下方单独渲染错误提示：

return Column(
  mainAxisSize: MainAxisSize.min,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        // 原有Row内的国旗、区号、TextFieldWidget代码保持不变
        // ...
      ],
    ),
    // 新增错误提示渲染逻辑
    if (error_text != null)
      Padding(
        padding: const EdgeInsets.only(top: 4),
        child: Text(
          error_text!,
          style: const TextStyle(color: Colors.red, fontSize: 12),
        ),
      )
  ],
);

适用场景：不希望无错误时页面出现多余空白，要求布局更紧凑。

内容的提问来源于stack exchange，提问作者Nguyen Khac Sam