表单提交

maogu8个月前Flutter135
import 'package:flutter/material.dart';

class PersonPage extends StatefulWidget {
@override
_PersonPageState createState() => _PersonPageState();
}

class _PersonPageState extends State<PersonPage> {
@override
Widget build(BuildContext context) {
final Map<String,dynamic> _formData ={'name':null,'email':null,'password':null};
//类型 范型 初始化 范型/
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
return Container(
padding: EdgeInsets.all(20),
margin: EdgeInsets.all(20),
child: GestureDetector(
onTap: () => FocusScope.of(context).requestFocus(FocusNode()),
child: Form(
autovalidateMode: AutovalidateMode.always,
key: _formKey,
child: ListView(
children: [
TextFormField(
validator: (String value) => value.isEmpty ? '名字' : null,
onSaved: (String value) {
_formData['name'] = value;
},
decoration: InputDecoration(labelText: '名字'),
),
TextFormField(
validator: (String value) => value.isEmpty ||
!RegExp("^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*\$")
.hasMatch(value)
? '请输入一个有效的email3'
: null,
onSaved: (String value) {
_formData['email'] = value;
},
decoration: InputDecoration(labelText: 'Email'),
),
TextFormField(
validator: (String value) => value.isEmpty ? '密码不能为空' : null,
decoration: InputDecoration(labelText: '密码'),
onSaved: (String value) {
_formData['password'] = value;
},
),
SizedBox(height: 20),
GestureDetector(
child: ButtonBar(
alignment: MainAxisAlignment.spaceEvenly,
children: [
RaisedButton(
onPressed: () {},
child: Text('注册'),
),
RaisedButton(
onPressed: () {
_formKey.currentState.save();
if (!_formKey.currentState.validate()) {
return;
}

print(_formData);

},
child: Text('登陆'),
),
]),
)
],
),
),
),
);
}
}


相关文章

世界时间api

void getData() async{  Response response= await get('http://world...

APP启动引导图

import 'package:flutter/material.dart'; import 'package:intro_views_flutter/M...

Flutter Api 数据调用

class BannerItem {   final String title;   final Stri...

Flutter provider使用案例

main.dartimport 'package:demo_provider/WeatherInfo.dart'; import 'package:flu...

[Flutter]md5加密

dart有内置的md5加密包,先引入头文件: import 'dart:convert'; import 'package:convert/convert.dart'...

Flutter开发环境搭建Mac版

这里我们可能会遇到一个问题,就是提示zsh: command not found: flutter这说明我们上面配置flutter命令没有成功,检测一下路径是否有问题,可以cd到/Users/用户名/...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。