flutter常用widget —— textfield

实现一个简单的登录

class ESTest extends StatefulWidget {

  @override
  _ESTestState createState() => _ESTestState();
}

class _ESTestState extends State<ESTest> {
  final username_txf_ctrl = TextEditingController();
  final userpswd_txt_ctrl = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Theme(//修改边框颜色要导入theme
      data: ThemeData(
        primaryColor: Colors.purple//将边框主题颜色设置为紫色
      ),
        child: Column(
          children: [
            TextField(
              controller: username_txf_ctrl,
              decoration: InputDecoration(
                  labelText: "用户名",
                  icon: Icon(Icons.card_giftcard),
                  hintText: "请输入用户名",//提示语（placeholder）
                  border:UnderlineInputBorder(),//下划线边框
                  filled: true,
                  fillColor: Colors.red[100]//设置颜色填充，透明度100（50，100，200，300，400，500，600，700，800，900）
              ),//装饰器
              onChanged: (value){
                print(value);
              },
              onSubmitted: (value){//提交数据监听一次
                print(value);
              },
            ),
            TextField(
              controller: userpswd_txt_ctrl,
              decoration: InputDecoration(
                  labelText: "密码",
                  icon: Icon(Icons.lock),
                  border: OutlineInputBorder()
              ),
              obscureText: true,
            ),
            ButtonTheme(
              height: 80,
              minWidth: 200,
              child: FlatButton(
                child: Text("登录",style: TextStyle(color: Colors.white,fontSize: 20),),
                color: Colors.blue,
                onPressed: (){
                  print("用户名：${username_txf_ctrl.text}\n密码:${userpswd_txt_ctrl.text}");
                  // 清空输入框
                  username_txf_ctrl.text = "";
                  userpswd_txt_ctrl.text = "";
                },
              ),
            )
          ],
        ),
    );
  }
}