Flutter input error border does not wrap container

Question

When I remove text in the TextFormField the Container gets bigger so the error border from the TextFormField does not wrap the container color, please help!

Container(
            color: Colors.grey.withOpacity(0.2),
            child: Form(
                key: globalKey,
                autovalidateMode: AutovalidateMode.onUserInteraction,
                child: TextFormField(
                    decoration: InputDecoration(
                        disabledBorder: InputBorder.none,
                        errorBorder: OutlineInputBorder(
                            borderSide:
                                BorderSide(color: Colors.red, width: 0.5)),
                        focusedErrorBorder: OutlineInputBorder(
                            borderSide:
                                BorderSide(color: Colors.red, width: 0.5)),
                        border: InputBorder.none),
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 20,
                      color: Colors.white,
                      fontWeight: FontWeight.w400,
                      fontFamily: "Sofia",
                    ),
                    validator: (value) {
                      if (value != null &&
                          value.isNotEmpty == true &&
                          value.length > 7) {
                        if (callbackText != null && originalText != value) {
                          callbackText(value);
                        }
                        return null;
                      }
                      return '';
                    },
          ),

Answer 1

Try removing the Container and specify the color in TextFormField.decoration.

TextFormField(
  decoration: InputDecoration(
    filled: true,
    fillColor: Colors.grey.withOpacity(0.2),
    ...
  ),
  ...
),