Flutter error message in TextFormField resizes the text field as well as there is huge padding

I am trying to make error text after validation to be displayed below text field like this:

But instead it's represented like this:

As you can see in the photo above the textfield has resized and the padding is huge. I tried putting content padding (only bottom) to 0 but the whole textfield broke:

Then I reverted to my trial and error on the first photo. The way I did it is to make text under the textfield where the error will show but by doing so I can't retrieve the error message due to this being a separate widget. Also I can't pass the error message because I'm not sure if the error has occurred yet.

Here is my code:

Textfield widget:

class FormInputFieldWidget extends StatelessWidget {
  String hintText;
  double width;
  String? Function(String?) validator;
  bool obscureText;
  String? Function(String?) onSave;
  Widget? suffixIcon;
  TextInputAction textInputAction;
  String? errorText;

  FormInputFieldWidget({
    required this.width,
    required this.hintText,
    required this.validator,
    required this.onSave,
    required this.textInputAction,
    this.obscureText = false,
    this.suffixIcon,
    this.errorText,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: width,
      height: SH.sh * 25 / 812,
      margin: EdgeInsets.symmetric(vertical: SH.sh * 9 / 812),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(
            height: SH.sh * 13 / 812,
            child: TextFormField(
              obscureText: obscureText,
              textInputAction: textInputAction,
              decoration: InputDecoration(
                errorStyle: const TextStyle(fontSize: 0.01),
                suffixIcon: suffixIcon,
                hintText: hintText,
                hintStyle: TextStyle(
                  color: AppColor.TEXTFIELD_GRAY,
                  fontSize: 12,
                  fontStyle: FontStyle.italic,
                ),
                focusedBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: AppColor.LIGHT_ORANGE),
                ),
              ),
              onSaved: onSave,
              validator: validator,
              scrollPadding: EdgeInsets.only(
                  bottom: MediaQuery.of(context).viewInsets.bottom + 10),
            ),
          ),
          SizedBox(
            height: SH.sh * 10 / 812,
            child: Text(
              errorText ?? '',
              style: TextStyle(
                color: Colors.red,
                fontSize: 10,
              ),
              maxLines: 1,
            ),
          ),
        ],
      ),
    );
  }
}

And its invocation example:

FormInputFieldWidget(
            width: SH.w * 280 / 375,
            hintText: 'Password',
            obscureText: true,
            validator: (str) {
              if (str!.length < 5) {
                Provider.of<HelperProvider>(context, listen: false)
                    .changeErrMessage('U need a longer text');
                return 'U need a longer text';
              }
              return null;
            },
            onSave: (val) {
              _userModel.password = val!;
            },
            errorText: errText,
            textInputAction: TextInputAction.done,
          ),

As you can see I tried to use providers to set errorMessage there but by doing this error message was the same everywhere.

What is the best way to solve this issue?

Reduce the height and size of error text.

TextFormField(
  decoration: InputDecoration(
    errorStyle: TextStyle(height: 0.1, fontSize: 8),
    errorMaxLines: 2,
))