Error message showing inside the text form field in Flutter

Question

I have implemented a text form field with validation, and it returns the error message but it gets displayed inside the text form field. Is there a way to show it outside the text form field?

Container(
                                  alignment: Alignment.center,
                                  margin: const EdgeInsets.symmetric(
                                      horizontal: 20),
                                  decoration: BoxDecoration(
                                      color: Colors.grey.withOpacity(0.1),
                                      borderRadius: const BorderRadius.all(
                                          Radius.circular(10))),
                                  child: TextFormField(
                                    autovalidateMode:
                                        AutovalidateMode.onUserInteraction,
                                    controller: _controller,
                                    validator: validatePhone,
                                    textAlignVertical: TextAlignVertical.center,
                                    style: const TextStyle(
                                        color: primaryText,
                                        fontFamily: 'InterMedium',
                                        fontSize: 15),
                                    decoration: const InputDecoration(
                                      counterText: '',
                                      errorStyle: TextStyle(
                                        fontFamily: 'InterMedium',
                                      ),
                                      prefixIcon: Padding(
                                        padding: EdgeInsets.only(
                                            left: 20, right: 15),
                                        child: Icon(
                                          Icons.phone_android_rounded,
                                          color: secondaryText,
                                        ),
                                      ),
                                      hintText: 'Enter mobile number',
                                      hintStyle: TextStyle(
                                        fontFamily: 'InterMedium',
                                        color: secondaryText,
                                      ),
                                      border: InputBorder.none,
                                    ),
                                    cursorColor: secondaryColor,
                                    maxLines: 1,
                                    maxLength: 10,
                                    keyboardType: TextInputType.phone,
                                    textInputAction: TextInputAction.done,
                                  ),
                                ),

How it is now -

How I want it to look like -

Answer 1

Just remove the container and use the TextFormField decoration property to provide radius, colors, etc., like this:

  TextFormField(
                controller: _confirmpassword,
                obscureText: !_isPasswordVisible,
                autovalidateMode: AutovalidateMode.onUserInteraction,
                decoration: InputDecoration(
                  enabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(14),
                    borderSide:
                        const BorderSide(color: AppColor.bordercolor),
                  ),
                  focusedBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(14),
                    borderSide:
                        const BorderSide(color: AppColor.focusbordercolor),
                  ),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(14),
                    borderSide:
                        const BorderSide(color: AppColor.bordercolor),
                  ),
                  fillColor: AppColor.textfieldcolor,
                  filled: true,
                  suffixIcon: IconButton(
                    icon: Icon(
                      _isPasswordVisible
                          ? Icons.visibility
                          : Icons.visibility_off,
                    ),
                    onPressed: () {
                      setState(() {
                        _isPasswordVisible = !_isPasswordVisible;
                      });
                    },
                  ),
                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your confirm password';
                  } else if (_newpassword.text.toString() !=
                      _confirmpassword.text.toString()) {
                    return 'Password did not match!';
                  }
                  return null;
                },
              ),

Result:

Answer 2

Remove parent widget Container and add decoration property of TextFormField like below example !

TextFormField(
      autovalidateMode: AutovalidateMode.onUserInteraction,
        cursorColor: Colors.black,
        validator: validator,
        controller: controller,
        keyboardType: TextInputType.phone,
        style: const TextStyle(fontSize: 16, color: Colors.black, fontFamily: 'Helvetica', fontWeight: FontWeight.normal),
        decoration: InputDecoration(
            enabledBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Color(0xff13367A)),
            ),
            focusedBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Color(0xff13367A)),
            ),
            border: UnderlineInputBorder(
              borderSide: BorderSide(color: Color(0xff13367A)),
            ),
            hintText: hint)),
  ),

P.S :- If you want to add grey color in your TextFormField then you may use decoration: InputDecoration(fillColor: Colors.grey, filled: true) !