TextFormField 在 TextFormField 中显示错误 - Flutter

Question

As shown in image, error message disturb TextField. I am using container a parent widget to make some UI stuff but this happened. Without validation message it works fin I want error message below the TextField not inside, kindly help.

As shown in image, error message disturb TextField. I am using container a parent widget to make some UI stuff but this happened. Without validation message it works fine. I want error message below the TextField not inside, kindly help.

import 'package:flutter/material.dart';
import 'package:email_validator/email_validator.dart';

class RoundedTextField extends StatelessWidget {
  final String hintText;
  final IconData iconData;
  final Color hintcolor, iconcolor;
  final bool password;
  final TextEditingController tcontroller;
  final TextInputType tType;

  const RoundedTextField(
      {Key key,
      @required this.hintText,
      @required this.iconData,
      @required this.hintcolor,
      this.iconcolor,
      this.password,
      this.tcontroller,
      this.tType})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;

    return Container(
      margin: EdgeInsets.symmetric(vertical: 10),
      padding: EdgeInsets.symmetric(vertical: 5, horizontal: 20),
      width: size.width * 0.8,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(29),
        color: Color(0xFFa5b2fc),
      ),
      child: TextFormField(
        controller: tcontroller,
        obscureText: password,
        keyboardType: tType,
        validator: (String value) {
          bool isValid = EmailValidator.validate(value);
          if (!password) {
            if (!isValid) {
              return "Invalid Email Address";
            }
          }
        },
        decoration: InputDecoration(
          suffixIcon: password
              ? (Icon(
                  Icons.visibility,
                  color: iconcolor,
                ))
              : null,
          border: InputBorder.none,
          icon: Icon(
            iconData,
            color: iconcolor,
          ),
          hintText: hintText,
          hintStyle: TextStyle(color: hintcolor),
        ),
      ),
    );
  }
}

Answer 1

Use the decoration within the TexformField. Including Text, borders, Shapes, Colors