The alignment of a TextFormField validation error message

Question

How can I change the alignment of a TextFormField validation error message?

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

Current output:

Expected output:

Answer 1

It seems impossible for this time, there is an opened issue for this also https://github.com/flutter/flutter/issues/21343

Answer 2

You can't change the default validator, but try creating a custom one!

Custom Validation TextFormField Flutter

Answer 3

Using the Flutter form builder package you can create a custom field quite easily and add your error(using field.errorText) wherever you want, here it's at the top of the field. The widget will rebuild on error showing the error Text widget so you don't really have to take care of state management for this part.

Code snippet:

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

Add this code for the alignment error text.

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

you can put spaces look like return ' Please enter some text';