输入框控件TextField
获取输入内容controller 如TextEditingController userNameController = TextEditingController();，userNameController.text获取对应的TextField控件输入的内容。keyboardType 指定输入类型。取值自TextInputType中的text,, number, phone, datetime, emailAddress, url等。textInputAction 指定回车键类型更改。取值自TextInputAction中的done、go、search、send、next等。还需要设置onEditingComplete来指定点击改过类型的回车键的响应事件。如指定为next，方法指定跳转到密码输入框onEditingComplete: () => FocusScope.of(context).requestFocus(pwdNode)，其中FocusNode pwdNode = FocusNode();在密码的输入控件中指定focusNode: pwdNode。obscureText 输入内容是否隐藏。密码输入框设置为true。maxLines 最大行数，默认为1。maxLength 最大输入字符长度。InputDecoration。 icon 设置输入框的图标。如icon: Icon(Icons.account_box)表示在输入框左边显示系统自带的账号图标。输入框激活状态下图标也会颜色变更。prefixIcon 类似于icon，但是图标显示在输入框下划线线内。prefix 类似于prefixIcon，可以自定义控件如显示文本。prefix: Text("用户名")。prefixText prefix指定为Text，设置固定显示在前面的字符串前缀。如手机号码输入前面固定+86：prefixText: "+86"。suffixIcon、suffix、suffixText 类似于prefixIcon、prefix、prefixText，但是是显示在后面。suffixText能用于设定单位等固定显示在尾部。labelText 提示文案，类似于安卓的Hint，在输入框激活时会动画上移到上方。helperText 显示在输入框下方的帮助文案。一般不设置。hintText 激活输入框但是未输入内容时的提示文案。如果labelText存在，则未激活状态下显示的是labelText，否则未激活状态下也显示hintText。过程中解决的bug：
1、有输入框，用SingleChildScrollView嵌套Column。否则弹出输入键盘时有溢出bug：bottom overflowed by X PIXELS。
2、运行安卓报错：Flutter SocketException: Failed to create server socket (OS Error: Permission denied, errno = 13), address = 127.0.0.1, port = 0。在android工程AndroidManifest.xml配置
<uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>3、AppBar中标题默认靠左显示，设置属性让标题水平居中。
centerTitle: true, //文字title居中实现登录界面的代码如下：
import 'package:flutter/material.dart'; import 'package:fluttertoast/fluttertoast.dart'; class Login extends StatefulWidget { @override State<StatefulWidget> createState() => LoginState(); } class LoginState extends State<Login> { // 用户名的控制器 final TextEditingController userNameCtrl = TextEditingController(); //密码的控制器 final TextEditingController passwordCtrl = TextEditingController(); // 光标跳转的密码输入框对象 FocusNode pwdNode = FocusNode(); @override Widget build(BuildContext context) { return new Scaffold( appBar: AppBar( title: Text("登录"), centerTitle: true, //文字title居中 leading: new BackButton()), // 有输入框，用SingleChildScrollView嵌套Column。否则弹出输入键盘时有溢出bug。bottom overflowed by X PIXELS body: SingleChildScrollView( child: Column( children: <Widget>[ new Padding( padding: EdgeInsets.fromLTRB(40, 24, 40, 0), child: TextField( controller: userNameCtrl, // 指定该输入框是输入手机号码的 keyboardType: TextInputType.phone, // 回车键用途，输入下一项。还需要具体实现。 textInputAction: TextInputAction.next, // 键盘动作按钮点击之后执行的代码：光标切换到指定的输入框 onEditingComplete: () => FocusScope.of(context).requestFocus(pwdNode), maxLength: 11, decoration: InputDecoration( icon: Icon(Icons.account_circle), labelText: "请输入用户名", // helperText: "一般为手机号码", // 一般不设置 hintText: "11位手机号码", // prefixIcon: Icon(Icons.account_circle), // 输入框线内 // prefix: Text("用户名"), // prefixText: "+86", ), ), ), new Padding( padding: EdgeInsets.fromLTRB(40, 4, 40, 0), child: TextField( controller: passwordCtrl, focusNode: pwdNode, keyboardType: TextInputType.text, // 回车键用途，完成输入 textInputAction: TextInputAction.done, maxLength: 11, obscureText: true, // 密码输入，隐藏 decoration: InputDecoration( icon: Icon(Icons.lock_outline), labelText: "请输入密码", // suffixIcon: Icon(Icons.visibility_off), // suffixText: "(元)", ), ), ), Padding( padding: EdgeInsets.fromLTRB(40, 36, 40, 0), child: Row(children: <Widget>[ new Expanded( child: RaisedButton( color: Colors.blue, onPressed: () { doLogin(); }, child: new Text( "登录", style: TextStyle( color: Colors.white, ), ), )) ]), ), ], ))); } void doLogin() { if (userNameCtrl.text.isEmpty || passwordCtrl.text.isEmpty) { Fluttertoast.showToast(msg: "请输入用户名和密码"); } else { Fluttertoast.showToast( msg: "用户名: ${userNameCtrl.text}，密码: ${passwordCtrl.text}"); } } }实现效果： 本文源码：TAG，下载源码需指定tag。
