Flutter表格中TextField仅显示红色错误边框无提示文本的实现问题

问题场景 #

在表格中渲染的TextFormField需要实现必填验证，原本通过设置errorStyle: TextStyle(color: Colors.transparent, fontSize: 0)隐藏错误文本，但触发验证时TextField底部边框会向上偏移，破坏布局美观。需求是只显示红色错误边框，不展示错误文本，同时解决边框移位问题。

解决方案 #

核心思路是让TextFormField触发错误状态但不渲染错误文本，同时调整布局参数保证验证前后的一致性：

• 移除errorStyle的透明隐藏设置，改为在validator中返回空字符串''，这样既会触发错误状态（显示红色边框），又不会渲染任何错误文本，避免错误文本占用空间导致布局移位。
• 调整InputDecoration的contentPadding，确保输入框在正常和错误状态下的内边距一致，同时可以去掉isCollapsed属性（该属性会强制输入框贴合内容，容易引发布局波动）。
• 移除不必要的SizedBox固定高度，让输入框自适应表格单元格的高度，避免强制高度导致的布局冲突。
• 简化验证逻辑，无需额外维护errorMessage变量，直接返回空字符串即可触发错误状态。

修改后的完整代码 #

class _TableTextInputFieldComponentState extends ConsumerState<TableTextInputFieldComponent> {
  TextEditingController textInputController = TextEditingController();
  String columnName = '';
  Map<String, dynamic> columnAccess = {};
  Map<String, dynamic> columnNumberTypeFieldDetail = {};
  bool isrequired = false;
  bool isStrikeThrough = false;
  bool isEmpty = false;
  FocusNode focusNode = FocusNode();

  @override
  void initState() {
    isStrikeThrough = widget.isStrikeThrough;
    if (widget.indexOfRow == 0) {
      isStrikeThrough = false;
    }
    columnNumberTypeFieldDetail = widget.column;
    columnName = columnNumberTypeFieldDetail['name'];
    columnAccess = columnNumberTypeFieldDetail['access'];
    if (columnNumberTypeFieldDetail.containsKey('validators')) {
      if (columnNumberTypeFieldDetail['validators'].containsKey('required')) {
        isrequired = columnNumberTypeFieldDetail['validators']['required'];
      }
    }
    if (widget.value != '' && widget.value != null) {
      textInputController.text = widget.value.toString();
    }
    focusNode.addListener(() {
      updateEmptyState();
    });
    super.initState();
  }

  void updateEmptyState() {
    setState(() {
      isEmpty = textInputController.text.isEmpty;
    });
  }

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: textInputController,
      focusNode: focusNode,
      readOnly: widget.readOnly || isStrikeThrough,
      style: TextStyle(
        decoration: isStrikeThrough ? TextDecoration.lineThrough : TextDecoration.none,
      ),
      decoration: const InputDecoration(
        contentPadding: EdgeInsets.fromLTRB(5, 20, 5, 13),
        filled: false,
        // 移除errorStyle的隐藏设置，改用返回空字符串触发错误状态
      ),
      autovalidateMode: AutovalidateMode.onUserInteraction,
      validator: isrequired
          ? (value) {
              if (value == null || value.isEmpty) {
                // 返回空字符串，触发错误边框但不显示错误文本
                return '';
              }
              return null;
            }
          : null,
      onChanged: (value) {
        widget.onValueChangeInTable(widget.indexOfRow, value, columnName, columnAccess);
      },
    );
  }
}

关键修改点说明 #

1. 验证逻辑调整：将validator中返回的错误信息改为空字符串''，替代原来的errorMessage，这样既触发错误状态，又不渲染错误文本。
2. 移除冗余设置：删除errorStyle和isCollapsed属性，避免强制布局导致的移位问题。
3. 布局简化：去掉固定高度的SizedBox，让输入框自适应表格单元格高度，减少布局冲突。

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