Flutter中如何让TextFormField的错误文本居中？

我之前也碰到过这个坑！默认的errorStyle确实没办法直接让错误文本居中，因为Flutter内部对错误文本的布局做了固定限制，不过有两个简单的方案可以解决：

方案一：使用errorBuilder自定义错误组件（推荐） #

这是最优雅的方式，errorBuilder允许我们完全控制错误提示的样式和布局，直接返回一个居中对齐的文本组件就行：

Container(
  child: TextFormField(
    validator: (val) => val.isEmpty ? 'Enter a Username' : null,
    onChanged: (val) {
      setState(() => username = val);
    },
    textAlign: TextAlign.center,
    decoration: InputDecoration(
      hintText: 'Pick Your Username',
      // 通过errorBuilder自定义居中的错误文本
      errorBuilder: (context, errorText) {
        return Align(
          alignment: Alignment.center,
          child: Text(
            errorText ?? '',
            style: const TextStyle(
              color: Colors.red, // 保留默认错误文本颜色
              fontSize: 12,
              // 这里可以添加其他你需要的样式，比如字重、间距等
            ),
          ),
        );
      },
    ),
  ),
)

方案二：手动添加独立的错误提示容器（备选） #

如果不想用errorBuilder，也可以在TextFormField下方单独放一个居中的文本，通过状态来控制它的显示：

Column(
  children: [
    TextFormField(
      validator: (val) => val.isEmpty ? 'Enter a Username' : null,
      onChanged: (val) {
        setState(() => username = val);
      },
      textAlign: TextAlign.center,
      decoration: const InputDecoration(
        hintText: 'Pick Your Username',
        // 这里要把默认的错误文本隐藏掉
        errorStyle: TextStyle(height: 0, color: Colors.transparent),
      ),
    ),
    // 自定义的居中错误提示
    if (username.isEmpty)
      const Align(
        alignment: Alignment.center,
        child: Text(
          'Enter a Username',
          style: TextStyle(color: Colors.red, fontSize: 12),
        ),
      ),
  ],
)

为什么直接用errorStyle的textAlign不生效？因为Flutter的InputDecoration内部渲染错误文本时，是把它放在一个左对齐的容器里的，所以单独设置errorStyle里的对齐属性会被覆盖，必须通过自定义组件来突破这个限制。

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