How could show an error message from a textformfield's validator (which is inside Container)?

Question

I have the following issue. I have a TextFormField where the user has to put some data (for example his email). I am using a validator, but when the error raises from the TextFormField's validator, the error message and my TextFormField's values are not show properly.

Here is the code:

                 Container(
                  height: 60,
                  margin: EdgeInsets.only(right: 10, left: 10),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.all(
                      Radius.circular(10),
                    ),
                    border: Border.all(
                        color: const Color(0xFF59C48C),
                        width: 2.0,
                        style: BorderStyle.solid),
                  ),
                  child: Container(
                    child: Center(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              Center(
                                  child: Container(
                                      child: Image.asset("images/email.png",
                                          width: 30, height: 30))),
                              const SizedBox(
                                width: 10,
                              ),
                              Expanded(
                                child: Center(
                                  child: TextFormField(
                                    validator: (mail) =>
                                        bloc.mailValidator(mail ?? "")
                                            ? null
                                            : "Invalid Email",

                                    obscureText: false,
                                    controller: _emailController,
                                    keyboardType:
                                        TextInputType.emailAddress,
                                    style: const TextStyle(
                                        color: Colors.black),
                                    decoration: const InputDecoration(
                                      hintText: "Email",
                                      focusedBorder: InputBorder.none,
                                      enabledBorder: InputBorder.none,
                                      errorBorder: InputBorder.none,
                                      disabledBorder: InputBorder.none,
                                      hintStyle: TextStyle(
                                        color: Colors.grey,
                                        fontSize: 20,
                                      ),
                                      labelStyle: TextStyle(
                                        color: Colors.black,
                                        fontSize: 20,
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                            ]),
                      ),
                    ),
                  ),
                ),

I would like to show the error beside the expanded TextFormField or on the border of it like the image below.

Thank you in advance!

Answer 1

Use OutlineInputBorder with label or labelText

decoration: const InputDecoration(
  hintText: "Email",
  labelText: "Email",
  focusedBorder: OutlineInputBorder(),
  enabledBorder: OutlineInputBorder(),
  errorBorder: OutlineInputBorder(),
  disabledBorder: OutlineInputBorder(),

TextFormField(
  autovalidateMode: AutovalidateMode.always,
  validator: (mail) {
    return "Enter  dasdasd"; //handle the error text
  },
  obscureText: false,
  keyboardType: TextInputType.emailAddress,
  style: const TextStyle(color: Colors.black),
  decoration: const InputDecoration(
    hintText: "Email",
    labelText: "Email",
    border: OutlineInputBorder(),
    focusedBorder: OutlineInputBorder(),
    enabledBorder: OutlineInputBorder(),
    errorBorder: OutlineInputBorder(),
    disabledBorder: OutlineInputBorder(),
    hintStyle: TextStyle(
      color: Colors.grey,
      fontSize: 20,
    ),
  ),
),