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

您无法更改默认验证器，但请尝试创建自定义验证器！

自定义验证TextFormField Flutter

Answer 2

这次似乎不可能，这也有一个未解决的问题 https://github.com/flutter/flutter/issues/21343

Answer 3

使用 Flutter 表单生成器 包，您可以非常轻松地创建自定义字段，并在任意位置添加错误（使用 field.errorText），这里它位于字段的顶部。该小部件将在显示错误文本小部件的错误时重建，因此您实际上不必关心这部分的状态管理。

代码片段：

FormBuilderField<double>(
      name: 'testField',

      builder: (FormFieldState field) {
        return InputDecorator(
          decoration: InputDecoration(
            border: InputBorder.none,
          ),
          child: InkWell(
            child: Column(
              children: [

                //notice how we add the textfield for the error here
                if (field.errorText != null)
                  Text(
                    field.errorText!,
                    style: const TextStyle(color: Colors.red),
                  ),
                Text(
                  'Label',
                  style: context.customtextTheme.subtitle1,
                ),
                ...

Answer 4

为对齐错误文本添加此代码。

bool isValid = true;
Container(
              alignment: Alignment.centerRight,
              height: isValid
                  ? Sizes().screenSize(context).height * 0.07
                  : Sizes().screenSize(context).height * 0.09,
              width: Sizes().screenSize(context).width * 0.7,
              decoration: BoxDecoration(boxShadow: <BoxShadow>[
                BoxShadow(
                    color: isValid ? Colors.grey : Colors.transparent,
                    offset: const Offset(3, 4),
                    blurRadius: 7),
              ]),
              child: Stack(
                children: [
                  Form(
                    key: state,
                    child: TextFormField(
                      controller: emailCTL,
                      keyboardType: TextInputType.emailAddress,
                      validator: (val) {
                        if (val!.isNotEmpty && isEmail(val)) {
                          return null;
                        }else{
                          return "";
                        }
                      },
                      decoration: const InputDecoration(
                        isDense: false,
                        filled: true,
                        hoverColor: Colors.grey,
                        focusColor: Colors.grey,
                        contentPadding: EdgeInsets.all(8.0),
                        hintText: "Email ID",
                        hintStyle: TextStyle(color: Colors.grey),
                        fillColor: Colors.white,
                        errorStyle: TextStyle(
                          color: Colors.red,
                        ),
                        focusedBorder: OutlineInputBorder(
                            borderSide: BorderSide(color: Colors.grey)),
                        enabledBorder:
                            OutlineInputBorder(borderSide: BorderSide.none),
                        errorBorder: OutlineInputBorder(
                            borderSide: BorderSide(color: Colors.red)),
                        focusedErrorBorder: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.red),
                        ),
                        prefixIcon: Icon(
                          Icons.email,
                          color: Colors.green,
                        ),
                        label: Text("Email",
                            style: TextStyle(
                              color: Colors.green,
                            )),
                      ),
                    ),
                  ),
                  Positioned(
                    bottom: 0,
                    right: 0,
                    child: isValid
                        ? Container()
                        : Text(
                            "Invalid Email ID",
                            style: TextStyle(color: Colors.red),
                          ),
                  )
                ],
              ),
            ),

 onTap: () {
                print(state.currentState!.validate());
                setState(() {
                  if (!state.currentState!.validate()) {
                    isValid = false;
                  } else {
                    isValid = true;
                  }
                });
              },

Answer 5

开箱即用，使用 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()) {...

将激活所有失败的字段。

Answer 6

可以加空格 看起来像 return '请输入一些文字';

Answer 7

在 Flutter 3.13.0 中，这个问题已得到解决。只需使用

InputDecoration

的 error 属性，您就可以将文本向右对齐。

请注意，

validation

属性与

error

属性不兼容，因此您必须在InputDecoration之外提供验证以隐藏或显示错误消息。

代码示例

decoration: InputDecoration(
  error: _validateEmail(_controller.text),
),

Widget? _validateEmail(String? value) {

  String? errorText;
  late final textWidget = Align(
    alignment: Alignment.centerRight,
    child: Text(
      errorText!,
      style: const TextStyle(color: Colors.red, fontSize: 12),
    ),
  );

  if (value == null || value.isEmpty) {
    errorText = 'Email is required';
    return textWidget;
  }

  if (!isEmailValid) {
    errorText = 'Invalid email address';
    return textWidget;
  }

  return null;
}