You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter中如何让TextFormField验证器的错误文本居中?

解决Flutter TextFormField错误文本居中的问题

方案:使用errorBuilder自定义错误文本布局

InputDecoration提供的errorBuilder参数可让你完全自定义错误文本的显示样式,通过Center组件直接包裹文本就能实现居中效果。

修改你的InputDecoration代码部分如下:

decoration: InputDecoration(
  alignLabelWithHint: true,
  fillColor: Colors.white,
  filled: true,
  errorStyle: const TextStyle(
    fontSize: 10.0,
    color: Colors.red,
  ),
  border: OutlineInputBorder(
    borderRadius: borderRadius,
  ),
  contentPadding: const EdgeInsets.only(right: 35.0),
  labelText: AppLocalizations.of(context)!.enterEmail,
  prefixIcon: const Padding(
    padding: EdgeInsets.only(left: 20.0, right: 15.0),
    child: Icon(Icons.email),
  ),
  // 添加errorBuilder实现错误文本居中
  errorBuilder: (context, error) => Center(
    child: Text(
      error ?? '',
      style: Theme.of(context).inputDecorationTheme.errorStyle ?? const TextStyle(fontSize: 10.0, color: Colors.red),
    ),
  ),
),

额外提示:优化validator逻辑

你的validator方法中调用了setState,这会触发不必要的组件重绘。建议将容器高度调整逻辑移到onChanged或表单验证回调中,或使用AnimatedContainer实现平滑过渡,同时保持validator的纯函数特性。

内容的提问来源于stack exchange,提问作者Pedrioni

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.27 13:17:38