如何更改颤振表单中验证错误的位置？答案

【问题标题】：How to change the position of validation error in flutter forms?如何更改颤振表单中验证错误的位置？
【发布时间】：2020-09-12 15:09:28
【问题描述】：

我有一个 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;
                      },
                    ),
                  ),
                ),
              ),
            )

【问题讨论】：

这不是负责文本字段的代码，您将此文本字段作为材料或容器的子项？
@AmanVerma 是的，我是。

标签： flutter flutter-layout

【解决方案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),
                      ),
                    ),]

【讨论】：

【解决方案2】：

您可以查看以下代码。

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'),
                )
              ],
            ),
          ),
        ),
      );
  }

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

【讨论】：

【解决方案3】：

我们这样创造价值

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

【讨论】：

请使用{}图标并在这里分享您的代码，甚至您可以在此处添加您的结果截图，并在示例代码中使用cmets。

【解决方案4】：

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

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

【讨论】：