如何更改颤振形式中验证错误的位置？

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

您可以检查下面的代码。

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

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