Flutter - Validation error message is displaying inside textbox

Question

I am creating a login page. In that i trying to display error validation message as Invalid email if the email is not in proper format. Problem is, Error message is displaying inside the textbox and the textbox size is extending if the error message is displaying

      TextFormField(
      controller: emailController,
      autocorrect: true,
      validator: (value) {
        if (value.isEmpty) {
          return 'Please enter your credential';
        } else if (userExistR == false) {
          return "Email ID not registered";
        }
        return null;
      },
      decoration: InputDecoration(
        // helperText: " ",
        contentPadding: EdgeInsets.symmetric(
            vertical: (snapshot.hasData) ? 24 : 18, horizontal: 15.0),
        prefixIcon: Padding(
          padding: const EdgeInsetsDirectional.only(end: 8.0),
          child: Icon(Icons.email),
        ),
        labelText: "Email address",
        hintText: 'xxxxx@xxx.xx',
        fillColor: Colors.white,
        enabledBorder: const OutlineInputBorder(
          borderSide:
              const BorderSide(color: Colors.transparent, width: 0.0),
        ),
        focusedBorder: const OutlineInputBorder(
          borderSide:
              const BorderSide(color: Colors.transparent, width: 0.0),
        ),
        errorBorder: const OutlineInputBorder(
          borderSide:
              const BorderSide(color: Colors.transparent, width: 0.0),
        ),
        border: new OutlineInputBorder(
            borderRadius: new BorderRadius.circular(15.0),
            borderSide: new BorderSide(color: Colors.blueGrey)),
        errorText: validateEmail(emailController.text),
      ),
      keyboardType: TextInputType.emailAddress,
      maxLines: 1,
      style: TextStyle(fontSize: 16.0),
    );

Answer 1

You create use a custom TextField with the help of stack, here is one I use:

Stack(
    alignment: Alignment.bottomLeft,
    children: <Widget>[
      TextField(
        textAlignVertical: TextAlignVertical.center,
        controller: controller,
        decoration: InputDecoration(
          hintText: hintText,
          suffixIcon: icon != null
              ? IconButton(
                  icon: icon,
                  onPressed: onTapIcon,
                )
              : null,
          border: InputBorder.none,
        ),
      ),
      _handleError(context)
    ],
  )

where _handleError is

Widget _handleError(BuildContext context) {
if (errorText == null) {
  return Container();
}

return Container(
  padding: EdgeInsets.only(left: 16, right: 16),
  child: Text(
    errorText,
    style: Theme.of(context)
        .textTheme
        .caption
        .copyWith(color: Theme.of(context).errorColor),
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
  ),
);

}