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 技术入门与实战