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),
),
),
);
}
}
Use the decoration within the TexformField. Including Text, borders, Shapes, Colors