Remove extra space created by errorText on InputFormField in Flutter - flutter

Question

I'm working on a CustomFormField class to customize the default behaviour of the TextFormField. One of the things I wanted to do was move the position of the errorText to prevent it from adjusting the position of other fields on the form in the event of an error. I have achieved half of my goal by using a stack and repositioning the errorText to appear on the lower border of the field instead of a several pixels below. Unfortunately the default behaviour still reserves the space and the other fields move anyway.
Text Fields without error condition
Text Fields with error condition
As you can see the errorText is no longer taking up space but the default behaviour of the TextFormField takes the space anyway.
Is there a way to prevent this?
It's a little long and this is still a work in progress but here is the code I'm using.
class CustomFormField extends StatefulWidget {
final GlobalKey formKey;
final TextEditingController controller;
final FocusNode currentFocusNode;
final FocusNode futureFocusNode;
final TextInputType inputType;
final TextInputAction inputAction;
final bool allowShowPassword;
final bool enabled;
final bool autoFocus;
final String labelText;
final String hintText;
final FormFieldValidator<String>? validator;
final Function? onChanged;
final FormFieldSetter<String>? onSaved;
const CustomFormField(
{super.key,
required this.formKey,
required this.controller,
required this.currentFocusNode,
required this.futureFocusNode,
this.inputType = TextInputType.text,
this.inputAction = TextInputAction.next,
this.allowShowPassword = true,
this.enabled = true,
this.autoFocus = false,
this.labelText = '',
this.hintText = '',
this.validator,
this.onChanged,
this.onSaved});
#override
State<CustomFormField> createState() => _CustomFormFieldState();
}
class _CustomFormFieldState extends State<CustomFormField> {
bool _passwordHidden = true;
bool onError = false;
String _errorText = '';
#override
Widget build(BuildContext context) {
// grab the application theme to use when colouring text fields
ThemeData theme = Theme.of(context);
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
child: Stack(
children: [
TextFormField(
enabled: widget.enabled,
autofocus: widget.autoFocus,
textInputAction: widget.inputAction,
onEditingComplete: () =>
FocusScope.of(context).requestFocus(widget.futureFocusNode),
focusNode: widget.currentFocusNode,
keyboardType: widget.inputType,
obscureText: (widget.inputType == TextInputType.visiblePassword &&
_passwordHidden)
? _passwordHidden
: false,
controller: widget.controller,
validator: (value) {
String? errorText = widget.validator!.call(value);
if (errorText != null && Static.formIsValid) {
Static.formIsValid = false;
widget.currentFocusNode.requestFocus();
setState(() {
onError = true;
_errorText = errorText;
});
} else {
setState(() {
onError = false;
_errorText = '';
});
}
// the validator still needs us to return null if there was no error
// but if there is an error return empty string
return errorText == null ? null : '';
},
onSaved: widget.onSaved,
onChanged: (value) {
if (widget.onChanged != null) {
widget.onChanged!.call(value);
}
},
style: TextStyle(
color: widget.enabled
? Constants.formFieldColor
: theme.disabledColor,
fontSize: 16,
fontWeight: FontWeight.normal,
fontFamily: 'Ariel'),
decoration: InputDecoration(
labelText: widget.labelText,
hintText: widget.hintText,
hintStyle: const TextStyle(color: Colors.white38),
contentPadding: const EdgeInsets.symmetric(horizontal: 25),
// constraints: const BoxConstraints(maxHeight: 40, minHeight: 40),
filled: true,
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(25)),
borderSide: BorderSide(color: Colors.black)),
enabledBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(25)),
borderSide: BorderSide(color: Colors.black)),
focusedBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(25)),
borderSide: BorderSide(color: Colors.black)),
errorBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(25)),
borderSide: BorderSide(color: Colors.red)),
focusedErrorBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(25)),
borderSide: BorderSide(color: Colors.black)),
disabledBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(25)),
borderSide: BorderSide(color: Colors.black)),
alignLabelWithHint: true,
focusColor: Colors.black,
suffixIcon: widget.inputType == TextInputType.visiblePassword &&
widget.allowShowPassword
? InkWell(
onTap: () {
setState(() {
_passwordHidden = !_passwordHidden;
});
},
child: Icon(
_passwordHidden
? Icons.visibility_off_outlined
: Icons.visibility_outlined,
color: Constants.passwordShowHideIconColor,
size: 18,
),
)
: null,
),
),
// this repositions the errorText to appear just on top of the lower border
onError
? Positioned(
bottom: 17,
left: 25,
child: Container(
height: 15,
decoration: const BoxDecoration(color: Colors.white),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 2),
child: Text(_errorText,
style: const TextStyle(
color: Colors.red,
fontSize: 13,
fontStyle: FontStyle.normal)),
),
),
)
: Container(),
],
),
);
}
}
One thing I did try was wrapping it all in a SizedBox. This did stop other fields from changing their positions but it had the side affect of shrinking the size of the field with the error because it always wants that space for the errorText.
Any help would be appreciated.

Answer 1

Solved:
I was able to solve this by adding:
errorStyle: const TextStyle(height: 0),
This stopped the field from taking additional space for the error text.