Question

我是Flutter的初学者，这是问题所在-我试图建立带有验证和“提交”按钮的表单，该表单必须导航到新屏幕，但存在“ NoSuchMethodError：方法'validate'在null上被调用”在调试器中，当我按下此按钮时。这是代码：

class _SignInPage extends State<SignInPage> {
  final scaffoldKey = GlobalKey<ScaffoldState>();
  final formKey = GlobalKey<FormState>();

  String _email;
  String _password;

  void _submit() {
    final form = formKey.currentState;

    if (form.validate()) {
      form.save();
      _performLogin();
    }
  }

  void _performLogin() {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => ConnectPage()),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      body: new Container(
          margin: new EdgeInsets.symmetric(vertical: 200.0, horizontal: 35.0),
          padding: EdgeInsets.all(20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            key: formKey,
            children: [
              TextFormField(
                keyboardType: TextInputType.emailAddress,
                autofocus: false,
                decoration: InputDecoration(
                    contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
                    border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(20.0)),
                    labelText: 'Email'),
                validator: (val) =>
                    !val.contains('@') ? 'Not a valid email.' : null,
                onSaved: (val) => _email = val,
              ),
              TextFormField(
                autofocus: false,
                obscureText: true,
                decoration: InputDecoration(
                    hintText: 'Password',
                    contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
                    border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(20.0)),
                    labelText: 'Password'),
                validator: (val) =>
                    val.length < 6 ? 'Password too short.' : null,
                onSaved: (val) => _password = val,
              ),
              Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
                new Row(children: [
                  FlatButton(
                    child:
                        Text('Sign Up', style: TextStyle(color: Colors.black)),
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => SignUpPage()),
                      );
                    },
                  ),
                  FlatButton(
                    child:
                        Text('Sign In', style: TextStyle(color: Colors.black)),
                    onPressed: () {
                      // Navigate to second screen when tapped!
                    },
                  ),
                ]),
                new Row(children: [
                  Radio(
                    activeColor: Colors.blue,
                    value: Colors.grey,
                    onChanged: (activeColor) {},
                  ),
                  Text(
                    "Keep me signed in",
                    style: new TextStyle(color: Colors.black),
                  )
                ])
              ]),
              RaisedButton(
                color: Colors.blue,
                onPressed: _submit,
                child: new Text('Sign in'),
              ),
            ],
          )),
    );
  }
}

我该如何解决？
如何在两个表单之间添加空格？

Answer 1

您必须使用TextFormFields小部件包装 Form。

根据docs，

每个单独的表单字段都应包装在FormField小部件中，并且Form小部件应作为所有这些表单的共同祖先*。

Answer 2

在以下情况下会发生此错误：

Form仅包含一个TextFormField
您没有将密钥绑定到“表单”
Form中的某些小部件未包装在FormField小部件中

Answer 3

在我的情况下，我忘记了 Form 的 key 参数。

Answer 4

您可能会错过：

final _formKey = GlobalKey<FormState>(); 

key: _formKey,

    final _formKey = GlobalKey<FormState>();

    @override
    Widget build(BuildContext context) {
      return Form(
        key: _formKey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            TextFormField(
              decoration: const InputDecoration(
                hintText: 'Enter your email',
              ),
              validator: (value) {
                if (value.isEmpty) {
                  return 'Please enter some text';
                }
                return null;
              },
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 16.0),
              child: RaisedButton(
                onPressed: () {
                  // Validate will return true if the form is valid, or false if
                  // the form is invalid.
                  if (_formKey.currentState.validate()) {
                    // Process data.
                  }
                },
                child: Text('Submit'),
              ),
            ),
          ],
        ),
      );
    }

Answer 5

尝试将TextFieldField包装在“表单”窗口小部件中，然后放置关键参数。您可能要检出TextField和errorText属性。

Answer 6

尝试将您的 TextFieldField 包装在 Form 小部件中并放置关键参数。

final _formKey = GlobalKey<FormState>();

示例代码：

  Form(
    key: _formKey,
    child: TextFormField(
          decoration: const InputDecoration(
            hintText: 'Enter your email',
          ),
          validator: (value) {
            if (value.isEmpty) {
              return 'Please enter some text';
            }
            return null;
          },
        ),
     ),

注意：在这种情况下，请确保键值

Answer 7

就我而言，您忘记了 Form 的关键参数。

final _formKey = GlobalKey<FormState>();
Form(
 key: _formKey,);

NoSuchMethodError：方法“验证”在null上被调用

7 个答案: