Flutter TextField error expands Container

I am trying to get an error border around an input which is wrapped with a Container. The Container is esentially only here to provide a place to put the shadows, for some reason I can't seem to replicate the given design.

return DecoratedBox(
  decoration: BoxDecoration(
    color: appThemeData.backgroundColor,
    borderRadius: BorderRadius.circular(12),
    boxShadow: [
      BoxShadow(
        color: const Color(0xFFA3A3A3).withOpacity(0.17),
        blurRadius: 16,
        offset: const Offset(0, 2), // Shadow position
      ),
      BoxShadow(
        color: const Color(0xFF9E9EA0).withOpacity(0.11),
        blurRadius: 4,
        offset: const Offset(0, 1), // Shadow position
      ),
    ],
  ),
  child: TextFormField(
    validator: inputValidation,
    autovalidateMode: AutovalidateMode.onUserInteraction,
    style: appTextData.bodyText1.copyWith(fontSize: 18, fontWeight: FontWeight.w400, color: appThemeData.accentColor),
    obscureText: obscureText,
    controller: textEditingController,
    cursorHeight: 18,
    textAlignVertical: TextAlignVertical.center,
    cursorColor: appThemeData.accentColor,
    decoration: InputDecoration(
      suffixIconConstraints: const BoxConstraints(
        minHeight: 24,
        minWidth: 24,
        maxHeight: 24,
        maxWidth: 24
      ),
      suffix: GestureDetector(onTap: () => textEditingController.clear(), child: SvgPicture.asset("assets/close_icon.svg")),
      labelText: labelText,
      labelStyle: appTextData.bodyText1.copyWith(fontSize: 18, fontWeight: FontWeight.w400, color: appThemeData.buttonColor),
      errorBorder: OutlineInputBorder(borderSide: const BorderSide(color: Color(0xFFFF0000), width: 2), borderRadius: BorderRadius.circular(12)),
      enabledBorder: const OutlineInputBorder(borderSide: BorderSide(color: Colors.transparent)),
      focusedBorder: OutlineInputBorder(borderSide: const BorderSide(color: Color(0xFF460978), width: 2), borderRadius: BorderRadius.circular(12)),
    ),
  ),
);

And this is what I'm getting, which is wrong. The error text seems to push the container down to accomodate space for the error message which is not there. I spent 10+ hours on this and still can't figure out what went wrong. Plus the hint/label text is in the wrong place. If anyone has any clues, I'd appreciate help. Thanks!

The smartest way I believe would be have no error border, but add a listener to the textController like this which will setState and make error true

textEditingController.addListener((text){
   if (inputValidation() !=null){
      setState((){error = true;});
   }
})

Then you can customize the border according to the variable

      focusedBorder: error? OutlineInputBorder(borderSide: const BorderSide(color: Color(0xFFFF0000), width: 2), borderRadius: BorderRadius.circular(12)) :OutlineInputBorder(borderSide: const BorderSide(color: Color(0xFF460978), width: 2), borderRadius: BorderRadius.circular(12)),
      enabledBorder: error? OutlineInputBorder(borderSide: const BorderSide(color: Color(0xFFFF0000), width: 2), borderRadius: OutlineInputBorder(borderSide: BorderSide(color: Colors.transparent)),

And then put your text field in a column and just under it you can put a text screen like

Column(
crossAxisAlignment: CrossAxisAlignment.center
children:<Widget>[
  TextField(),
  SizedBox(height:5),
  error?Text(inputValidation(),style:TextStyle(/*Whatever you want*/)):Container()
]
)

You can implement the error however you want using this method. Hope it works. If there is an error, let me know and I will help you fix it