email_validator 压缩 tefxformfield 颤振
email_validator squishing tefxformfield flutter
我正在构建一个 flutter web 应用程序,其中有一个文本表单字段,用于验证输入的电子邮件。我为此使用 email_validator,但是当地址无效时,它 'squishes' 文本字段如下: 这是我的代码:
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)),
))),
),
我还有一个按钮,它需要符合: 所以如果我添加一个 helperText,它就不起作用,
我真的需要帮助。谢谢
尝试给 helperText
一个 space 并从一开始就根据您的需要调整边框。这将防止 textFormField 在错误时更改其高度,并且可能有助于摆脱这种行为:
TextFormField(
decoration: const InputDecoration(
helperText: ' ',
),
validator: myValidator,
),
我正在构建一个 flutter web 应用程序,其中有一个文本表单字段,用于验证输入的电子邮件。我为此使用 email_validator,但是当地址无效时,它 'squishes' 文本字段如下:
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)),
))),
),
我还有一个按钮,它需要符合:
尝试给 helperText
一个 space 并从一开始就根据您的需要调整边框。这将防止 textFormField 在错误时更改其高度,并且可能有助于摆脱这种行为:
TextFormField(
decoration: const InputDecoration(
helperText: ' ',
),
validator: myValidator,
),