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,
),