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
相关产品推荐
相关产品推荐

