Flutter 表单组件 登录界面

import 'package:flutter/material.dart';

void main() => runApp(new Login());

class Login extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new LoginState();
  }
}

class LoginState extends State<Login> {
  //全局key 用来获取表单控件
  GlobalKey<FormState> loginKey = new GlobalKey<FormState>();
  String username;
  String password;

  void login() {
    var loginfrom = loginKey.currentState;
    if (loginfrom.validate()) {
      loginfrom.save();
      print("username" + username + "password" + password);
    }
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "form表单实例",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("form表单实例"),
        ),
        body: new Column(
          children: <Widget>[
            new Container(
              padding: const EdgeInsets.all(16.0),
              child: new Form(
                key: loginKey,
                child: new Column(
                  children: <Widget>[
                    new TextFormField(
                      keyboardType: TextInputType.phone, //限制输入类型
                      decoration: new InputDecoration(labelText: "请输入用户名："),
                      onSaved: (value) {
                        username = value;
                      },
                      onFieldSubmitted: (value) {},
                    ),
                    new TextFormField(
                      decoration: new InputDecoration(labelText: "请输入密码："),
                      obscureText: true, //是否显示字符
                      autovalidate: false,  //是否自动验证
                      validator:(value){
                        return value.length<6 ? "密码长度不够6位":null;
                      } ,
                      onSaved: (v) {
                        password = v;
                      },
                    ),
                    new Container(
                      child:   new SizedBox(
                        width:340 ,
                        height: 42,
                        child: new RaisedButton(onPressed:() {
                          login();
                        },
                          child: new Text("登录"
                            ,style: new TextStyle(
                                fontSize: 18.0
                            ),
                          ),
                        ),
                      ) ,
                      margin: EdgeInsets.only(top: 50), //设置margin 距离顶部
                    )
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

注意
  GlobalKey<FormState> loginKey = new GlobalKey<FormState>();

这个key要在From中key位置的添加

     child: new Form(
                key: loginKey,
                child: new Column

之前没有添加报了如下错误：

I/flutter (28191): The following NoSuchMethodError was thrown while handling a gesture:
I/flutter (28191): The method 'validate' was called on null.
I/flutter (28191): Receiver: null
I/flutter (28191): Tried calling: validate()
I/flutter (28191): 
I/flutter (28191): When the exception was thrown, this was the stack:
I/flutter (28191): #0      Object.noSuchMethod (dart:core-patch/object_patch.dart:50:5)
I/flutter (28191): #1      LoginState.login (package:flutter_app/login.dart:21:19)
I/flutter (28191): #2      LoginState.build.<anonymous closure> (package:flutter_app/login.dart:67:27)
I/flutter (28191): #3      _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:511:14)

参考：Flutter 技术入门与实战