效果图：
TextField.dart
CheckBox.dart
TextField.dart
import 'package:flutter/material.dart';class TextFieldDemoPage extends StatefulWidget {@override_TextFieldDemoPageState createState() => _TextFieldDemoPageState();}class _TextFieldDemoPageState extends State<TextFieldDemoPage> {var _username = new TextEditingController(); //初始化时给表单赋值var _password; //初始化时不赋值@overridevoid initState() {// TODO: implement initStatesuper.initState();_username.text='初始值'; //调用text赋值}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('表单演示页面'),),body: Padding(padding: EdgeInsets.all(20),// child: TextDemo(),child: Column(children: <Widget>[TextField(decoration: InputDecoration(hintText: '请输入用户名'),controller: _username, //通过唯一标识对象，初始化时赋值onChanged: (value){//文本框变化时的触发事件 ， 如果发生改变，系统就会自动将输入框的值赋给valuesetState(() {_username.text = value;});},),SizedBox(height: 20,),TextField(obscureText: true, //开启密码模式decoration: InputDecoration(hintText: '请输入密码'),onChanged: (value){//文本框变化时的触发事件 ， 如果发生改变，系统就会自动将输入框的值赋给valuesetState(() {this._password = value; //注意，这里没有写.text，所以下面获取值的时候，也不需要写.text，直接写变量名即可});},),SizedBox(height: 40,),Container(width: double.infinity, //表示Container的宽度变成自适应宽度height: 40,child: RaisedButton(child: Text('登录'),onPressed: (){print(this._username.text); //打印用户名print(this._password); //打印密码},color: Colors.blue,textColor: Colors.white,),)],),),);}}//特殊效果举例，不过这里没有调用，要想看效果的话直接在body：TextDemo 即可class TextDemo extends StatelessWidget {@overrideWidget build(BuildContext context) {return Container(child: Column(children: <Widget>[TextField(), //输入框表单SizedBox(height: 20,),TextField(decoration: InputDecoration(hintText: '请输入搜索的内容', //提示文字，相当于Android里的hintborder: OutlineInputBorder() //给表单四周添加边框),),SizedBox(height: 20,),TextField(maxLines: 4,//设置对最大行数decoration: InputDecoration(hintText: '多行文本框', //多行文本框border: OutlineInputBorder() //给表单四周添加边框),),SizedBox(height: 20,),TextField(obscureText: true, //开启密码模式decoration: InputDecoration(hintText: '密码框', //多行文本框border: OutlineInputBorder() //给表单四周添加边框),),SizedBox(height: 20,),TextField( //特殊效果，输入信息时，用户名动态跑到边框届提示decoration: InputDecoration(border: OutlineInputBorder(),labelText: '用户名'),),SizedBox(height: 20,),TextField( //特殊效果，输入信息时，用户名动态跑到边框届提示obscureText: true,decoration: InputDecoration(border: OutlineInputBorder(),labelText: '密码'),),SizedBox(height: 20,),TextField( //在文本框前面加上图标decoration: InputDecoration(icon: Icon(Icons.people),hintText: '请输入用户名'),)],),);}} //列举文本框的样式与模式，要使用时在body里调用TextDemo组件即可
CheckBox.dart
import 'package:flutter/material.dart';class CheckBoxPage extends StatefulWidget {@override_CheckBoxPageState createState() => _CheckBoxPageState();}class _CheckBoxPageState extends State<CheckBoxPage> {var flag = true;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('checkbox'),),body: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Row(children: <Widget>[Checkbox(//多选框组件value: this.flag,onChanged: (v){//多选框值变化时，触发setState(() {this.flag=v;});},activeColor: Colors.red, //设置：选中时的颜色),],),Row(children: <Widget>[Text(this.flag?'选中':'未选中') //显示：checkBox当前是否勾选的值],),SizedBox(height: 40,),CheckboxListTile( //多选框组件value: this.flag,onChanged: (v){//多选框值变化时，触发setState(() {this.flag=v;});},title: Text('标题'),subtitle: Text('这是二级标题'),),Divider(),CheckboxListTile( //多选框组件value: this.flag,onChanged: (v){//多选框值变化时，触发setState(() {this.flag=v;});},title: Text('标题'),subtitle: Text('这是二级标题'),secondary: Icon(Icons.help),)],),);}}
