Flutter如何实现TextField带图标的校验错误提示文本

问题说明 #

• 实现表单校验错误提示功能时，需按照UI设计要求在错误提示文本旁搭配对应图标
• 现有公开资料仅能找到errorBorder（错误边框）的配置方法，未找到为errorText配置关联图标的实现方式
• 现有代码实现如下：

TextField(
  autocorrect: true,
  autofocus: false,
  controller: reasonController,
  style: textfieldlableStyle,
  textInputAction: TextInputAction.done,
  textCapitalization: TextCapitalization.sentences,
  keyboardType: TextInputType.multiline,
  maxLines: 10,
  maxLength: null,
  decoration: InputDecoration(
    isDense: true,
    hintText: "I’m canceling because",
    hintStyle: TextStyle(
        fontFamily: "regular",
        color: MyColors.fieldLabel,
        fontSize: 16),
    focusedBorder: null,
    errorBorder:OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(4)),
        borderSide: BorderSide(
          width: 1,
          color: Colors.red,
        )),
    errorText: _cancelValidate ? 'Details can\'t be Empty' : null,
    contentPadding: EdgeInsets.only(bottom: 4, top: 0),
  )
)

• 目标实现效果参考：
  

实现方案 #

Flutter的InputDecoration提供了比errorText灵活性更高的error参数，支持传入任意自定义Widget，无需重写整套输入框组件即可实现图标+错误文本的组合效果，原有errorBorder等边框配置可以完全保留。

核心修改逻辑 #

• 移除原有的errorText配置项
• 新增error配置项，校验不通过时传入Row布局包裹图标和错误文本，校验通过时传入null即可
• 可通过errorPadding调整错误提示与输入框的间距，通过errorStyle配置全局错误文本样式，和原有errorText的辅助配置逻辑完全兼容

修改后可直接运行的代码示例 #

TextField(
  autocorrect: true,
  autofocus: false,
  controller: reasonController,
  style: textfieldlableStyle,
  textInputAction: TextInputAction.done,
  textCapitalization: TextCapitalization.sentences,
  keyboardType: TextInputType.multiline,
  maxLines: 10,
  maxLength: null,
  decoration: InputDecoration(
    isDense: true,
    hintText: "I’m canceling because",
    hintStyle: TextStyle(
        fontFamily: "regular",
        color: MyColors.fieldLabel,
        fontSize: 16),
    focusedBorder: null,
    errorBorder:OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(4)),
        borderSide: BorderSide(
          width: 1,
          color: Colors.red,
        )),
    // 核心替换：自定义错误提示区域
    error: _cancelValidate ? Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        Padding(
          padding: const EdgeInsets.only(right: 4, top: 2),
          // 可替换为项目自定义图标资源
          child: Icon(
            Icons.error_outline,
            size: 16,
            color: Colors.red,
          ),
        ),
        Text(
          'Details can\'t be Empty',
          style: TextStyle(
            color: Colors.red,
            fontSize: 12,
            fontFamily: "regular"
          ),
        )
      ],
    ) : null,
    contentPadding: EdgeInsets.only(bottom: 4, top: 0),
  )
)

适配调整说明 #

• 图标资源、尺寸、内边距可根据UI稿要求自行修改，调整padding参数即可对齐图标与文本的基线位置
• 错误文本样式可直接在Text组件的style属性中自定义，也可接入项目主题做全局统一配置
• 若需要错误提示撑满整行，将Row的mainAxisSize改为MainAxisSize.max即可

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