Issue
I am building a flutter web app, where I have a textformfield where I validate the input email. I use email_validator for this, however when the address is invalid, it ‘squishes’ the textfield like this: This is my code:
Container(
width: MediaQuery.of(context).size.width / 5,
height: MediaQuery.of(context).size.height / 125 * 7,
child: TextFormField(
expands: true,
minLines: null,
maxLines: null,
key: _teftFormFieldKey,
style: TextStyle(
color: Colors.white,
fontFamily: 'FuturaFura',
fontSize: 20),
cursorColor: Colors.grey,
textAlign: TextAlign.center,
textAlignVertical: TextAlignVertical.center,
controller: emailController,
validator: (value) =>
EmailValidator.validate(value)
? null
: "Please enter a valid email",
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(
vertical: 10, horizontal: 10),
hintText: 'Your email',
hintStyle: TextStyle(
color: Colors.grey,
fontFamily: 'FuturaFura'),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(100)),
borderSide: BorderSide(
color: textFormFieldOutline)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(100)),
borderSide: BorderSide(
color: textFormFieldOutline,
width: 2.5)),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(100)),
borderSide: BorderSide(
color: textFormFieldOutline)),
focusedErrorBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(100)),
borderSide: BorderSide(
color: Color.fromRGBO(184, 44, 47, 1)),
))),
),
I also have a button that it needs to be in line with: so if I add a helperText, it won’t work,
I really need help. Thanks.
Solution
Try to give a helperText
a single space and adjust border to your needs from start. This will prevent textFormField from changing its height on error and likely will help to get rid of this behaviour:
TextFormField(
decoration: const InputDecoration(
helperText: ' ',
),
validator: myValidator,
),
Answered By – Simon Sot
Answer Checked By – Gilberto Lyons (FlutterFixes Admin)