TextFormField 验证错误消息的对齐方式

Question

如何更改 TextFormField 验证错误消息的对齐方式？

TextFormField(
   textAlign: TextAlign.center,
   decoration: const InputDecoration(
      errorStyle: TextStyle(
        fontSize: 16.0,
      ),
   ),
   validator: (value) {
      if (value.isEmpty) {
         return 'Please enter some text';
      }
      return null;
    },
   ),

电流输出：

预期输出：

Answer 1

开箱即用，这可以使用 FormField 最轻松地完成（无需包）。由于您的错误文本只是列中的文本字段，因此您可以将其放置在您喜欢的任何位置，上方、下方，并以您喜欢的方式对齐。

final _formState = GlobalKey<FormState>();
var _textController = TextEditingController()

  Form(
    key: _formState,
    child: FormField(
        validator: (val) => val == null || val == '' ? 'Type Something!' : null,
        builder: (formFieldState) {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: [
            TextField(
                  controller: _textController,
                  decoration: const InputDecoration(
                    labelText: 'Enter Something',
                  ),
                ),
            if (formFieldState.hasError)
              Padding(
                padding: const EdgeInsets.only(top: 10),
                child: Text(
                  formFieldState.errorText!,
                  style: const TextStyle(
                    color: Colors.red,
                  ),
                ),
              ),
          ],
          );
        },
      ),
)

这适用于 FormState，因此如果您对多个字段执行此操作，调用if (_formState.currentState!.validate()) {...将激活所有失败的字段。