android - NoSuchMethodError : The method 'validate' was called on null 错误

Question

我是 Flutter 的初学者，这就是问题所在——我正在尝试构建一个带有验证和“提交”按钮的表单，该按钮必须导航到一个新屏幕，但存在“NoSuchMethodError:方法‘validate’被调用为空”当我按下这个按钮时在调试器中。这是代码:

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

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

Answer 1

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

根据 docs ,

Each individual form field should be wrapped in a FormField widget, with the Form widget as a common ancestor of all of those*.