如何更改flutter表单中验证错误的位置？

Question

我有一个 TextFormField 来收集用户身份验证输入，这很好。

但是当它显示验证消息时，就会发生这种情况：

如何更改错误消息的位置，使其不再发生？我只是想要一种方法可以轻松解决这个问题并且该领域仍然很漂亮。 这是代码。

Form(
              key: _formKey,
              child: Container(
                width: double.infinity,
                height: 40,
                decoration: BoxDecoration(
                  color: Colors.white,
                  boxShadow: [
                    BoxShadow(
                      blurRadius: 1.1,
                      color: Colors.black45,
                      spreadRadius: 0.5,
                      offset: Offset(
                        1.5,
                        2,
                      ),
                    ),
                  ],
                  borderRadius: BorderRadius.circular(20),
                ),
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 15),
                  child: SizedBox(
                    height: 40,
                    child: TextFormField(
                      style: TextStyle(color: Colors.black),
                      decoration: InputDecoration(
                        border: InputBorder.none,
                        disabledBorder: InputBorder.none,
                        enabledBorder: InputBorder.none,
                        errorBorder: InputBorder.none,
                        focusedBorder: InputBorder.none,
                        focusedErrorBorder: InputBorder.none,
                        hintText: 'Full name',
                        hintStyle: TextStyle(color: Colors.grey[600]),
                        icon: Icon(Icons.account_circle, color: Colors.black),
                      ),
                      onSaved: (string) => _formData['name'] = string,
                      validator: (string) {
                        if (string.isEmpty) {
                          return 'Field can\'t be empty';
                        }
                        return null;
                      },
                    ),
                  ),
                ),
              ),
            )

Answer 1

您可以在文本字段下方显示错误消息，这样您的 UI 就不会打扰。您需要将 TextFormField 和带有框装饰的 Container 放在一个堆栈中。现在，当验证器显示错误消息时，容器不会增长，并给人一种错误消息显示在 TextFormField 下方的印象。

                 Stack(children: [
                    Container(
                        height: 48,
                        decoration: BoxDecoration(
                          color: Colors.grey.shade200,
                          borderRadius: BorderRadius.circular(30),
                        )),
                     TextFormField(
                      validator: (val) =>
                          val.length < 1 ? 'Name Required' : null,
                      onSaved: (val) => _username = val,
                      obscureText: false,
                      keyboardType: TextInputType.name,
                      controller: _controllerUsername,
                      autocorrect: false,
                      decoration: InputDecoration(
                        hintText: 'Name',
                        border: InputBorder.none,
                        focusedBorder: OutlineInputBorder(
                            borderRadius:
                                BorderRadius.all(Radius.circular(30.0)),
                            borderSide: BorderSide(color: Colors.blue)),
                        contentPadding: EdgeInsets.symmetric(
                            vertical: 15, horizontal: 20),
                      ),
                    ),]

Answer 2

我们这样创造价值

int testForPhoneNumber = 0;

并将这个值改为两种情况

第一种情况，如果电话号码（我的例子）是有效的，我将值设置为 0

第二种情况，如果电话号码无效，我将值设置为 1

所以我在代码==>（testForPhoneNumber == 0）中执行此操作？ ....：....，

重点是代表同样的事情，但我改变了这一点

第一种情况下的InputDecoration：contentPadding：EdgeInsets.fromLTRB(10, 10, 10, 0),

第二种情况：contentPadding：EdgeInsets.fromLTRB(10, 50, 10, 0),

下图中代表的点

注意我更改了文本顶部。

这是代码

https://drive.google.com/file/d/1v-THl1GBDl1oaVmNVao9ghRJaI2MjnMj/view?usp=sharing

Answer 3

只需像这样设置帮助文本：

TextFormField(
    decoration: const InputDecoration(
        helperText: ' ',
    ),
    validator: myValidator,
),

Answer 4

我遇到了同样的错误，当我遇到错误时，前缀图标、后缀图标和文本/提示文本将被定位到顶部。我通过为输入装饰提供“contentPadding”属性并给出 0 填充来解决该问题。使用此属性时，所有内容填充都设置为 0。

我猜 flutter 本身存在一个错误，导致了这种意外的行为。

Form(
          key: _formKey,
          child: Container(
            width: double.infinity,
            height: 40,
            decoration: BoxDecoration(
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  blurRadius: 1.1,
                  color: Colors.black45,
                  spreadRadius: 0.5,
                  offset: Offset(
                    1.5,
                    2,
                  ),
                ),
              ],
              borderRadius: BorderRadius.circular(20),
            ),
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 15),
              child: SizedBox(
                height: 40,
                child: TextFormField(
                  style: TextStyle(color: Colors.black),
                  decoration: InputDecoration(
                    border: InputBorder.none,
                    disabledBorder: InputBorder.none,
                    enabledBorder: InputBorder.none,
                    errorBorder: InputBorder.none,
                    focusedBorder: InputBorder.none,
                    focusedErrorBorder: InputBorder.none,
                    hintText: 'Full name',
                    hintStyle: TextStyle(color: Colors.grey[600]),
                    icon: Icon(Icons.account_circle, color: Colors.black),
                    contentPadding: const EdgeInsets.zero,
                  ),
                  onSaved: (string) => _formData['name'] = string,
                  validator: (string) {
                    if (string.isEmpty) {
                      return 'Field can\'t be empty';
                    }
                    return null;
                  },
                ),
              ),
            ),
          ),
        )

Answer 5

您可以查看以下代码。

Widget _buildEmailTextField()) {
    return Container(
        height: 35,
        child: Theme(
          data: new ThemeData(
            primaryColor: Color(0xFF262C48),
            primaryColorDark: Color(0xFF262C48),
          ),
          child: Form(
            key: _formKey,
            child: Column(
              children: [
                SizedBox(
                  height: 20,
                ),
                Container(
                  child: TextFormField(
                    keyboardType: TextInputType.emailAddress,
                    validator: (val) {
                      bool emailValid = RegExp(
                              r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+")
                          .hasMatch(val);
                      if (!emailValid) {
                        return 'Invalid Email Address';
                      } else {
                        return null;
                      }
                    },
                    controller: emailController,
                    readOnly: isLoading ? true : false,
                    decoration: InputDecoration(
                      fillColor: Color(0xFFd9d8d8),
                      filled: true,

                      border: new OutlineInputBorder(
                          borderRadius: const BorderRadius.all(
                            const Radius.circular(7.0),
                          ),
                          borderSide:
                              BorderSide(color: Color(0xFF262C48), width: 2.0)),
                      contentPadding: new EdgeInsets.symmetric(
                          vertical: 25.0, horizontal: 10.0),
                      // prefixIcon: Icon(
                      //   Icons.email,
                      //   color: Color(0xFF008577),
                      // ),
                      hintText: 'Email',
                    ),
                  ),
                ),
                
                RaisedButton(
                  onPressed: () {
                    // Validate returns true if the form is valid, otherwise false.
                    if (_formKey.currentState.validate()) {
                      // If the form is valid, display a snackbar. In the real world,
                      // you'd often call a server or save the information in a database.

                      Scaffold.of(context).showSnackBar(
                          SnackBar(content: Text('Processing Data')));
                    }
                  },
                  child: Text('Submit'),
                )
              ],
            ),
          ),
        ),
      );
  }

只需将容器作为文本字段的父级即可解决该错误。