Flutter TextField设置errorText后错误提示显示在框内如何解决

问题现象 #

使用TextField组件搭建输入控件时，配置的errorText错误提示未按默认规则展示在输入框下方，而是出现在输入框内部，异常效果如下：

问题复现代码 #

child: TextField(
    maxLines: 1,
    controller: textEditingController,
    style: TextStyle(
        fontFamily: ConstantData.fontFamily,
        color: ConstantData.textColor,
        fontWeight: FontWeight.w400,
        fontSize: fontSize),
    decoration: InputDecoration(
        contentPadding: EdgeInsets.only(
            left: ConstantWidget.getWidthPercentSize(context, 2)),
        border: InputBorder.none,
        focusedBorder: InputBorder.none,
        enabledBorder: InputBorder.none,
        errorBorder: InputBorder.none,
        disabledBorder: InputBorder.none,
        hintText: 'name',
        errorText: 'errorText',
        hintStyle: TextStyle(
            fontFamily: ConstantData.fontFamily,
            color: ConstantData.textColor,
            fontWeight: FontWeight.w400,
            fontSize: fontSize)),
  ),

问题根因 #

代码存在两处配置问题共同导致异常：

• 将InputDecoration所有状态下的边框属性全部设置为InputBorder.none，Flutter的输入框装饰布局逻辑中，该配置会告知框架不需要为输入框下方的辅助文本（errorText、helperText等）预留独立的外部布局空间
• contentPadding仅配置了左侧水平内边距，未设置垂直方向内边距，内容区没有足够空间做内部偏移，最终错误文本直接和占位提示文本重叠显示在输入框内部

修复方案 #

不需要保留边框线条的场景下，不要直接使用InputBorder.none，替换为边框线透明的OutlineInputBorder（或UnderlineInputBorder），既可以实现视觉上无边框的效果，也能让框架正常为下方错误提示预留布局空间，同时补全垂直方向的内边距即可：

child: TextField(
    maxLines: 1,
    controller: textEditingController,
    style: TextStyle(
        fontFamily: ConstantData.fontFamily,
        color: ConstantData.textColor,
        fontWeight: FontWeight.w400,
        fontSize: fontSize),
    decoration: InputDecoration(
        // 补全垂直方向内边距，适配内容显示
        contentPadding: EdgeInsets.symmetric(
            horizontal: ConstantWidget.getWidthPercentSize(context, 2),
            vertical: 12
        ),
        // 所有状态使用无边框线的输入边框，视觉无框但保留布局占位
        border: OutlineInputBorder(borderSide: BorderSide.none),
        focusedBorder: OutlineInputBorder(borderSide: BorderSide.none),
        enabledBorder: OutlineInputBorder(borderSide: BorderSide.none),
        errorBorder: OutlineInputBorder(borderSide: BorderSide.none),
        disabledBorder: OutlineInputBorder(borderSide: BorderSide.none),
        hintText: 'name',
        errorText: 'errorText',
        hintStyle: TextStyle(
            fontFamily: ConstantData.fontFamily,
            color: ConstantData.textColor,
            fontWeight: FontWeight.w400,
            fontSize: fontSize)
    ),
)

调整后errorText会正常展示在输入框下方，且视觉上和原配置的无边框效果完全一致。

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