用了整整一天的時間更米，終于整出來一個自己滿意的登錄界面?github地址础芍，分享出來和大家一起學(xué)習(xí)和進步辽慕。
import 'package:flutter/material.dart';
class Login extends StatefulWidget {
? @override
? _Login createState() => new _Login();
}
class _Login extends State<Login> {
? //獲取Key用來獲取Form表單組件
? GlobalKey<FormState> loginKey = new GlobalKey<FormState>();
? String userName;
? String password;
? bool isShowPassWord = false;
? void login(){
? ? //讀取當(dāng)前的Form狀態(tài)
? ? var loginForm = loginKey.currentState;
? ? //驗證Form表單
? ? if(loginForm.validate()){
? ? ? loginForm.save();
? ? ? print('userName: ' + userName + ' password: ' + password);
? ? }
? }
? void showPassWord() {
? ? setState(() {
? ? ? isShowPassWord = !isShowPassWord;
? ? });
? }
? @override
? Widget build(BuildContext context){
? ? return new MaterialApp(
? ? ? title: 'Form表單示例',
? ? ? home: new Scaffold(
? ? ? ? body: new Column(
? ? ? ? ? children: <Widget>[
? ? ? ? ? ? new Container(
? ? ? ? ? ? ? padding: EdgeInsets.only(top: 100.0, bottom: 10.0),
? ? ? ? ? ? ? child: new Text(
? ? ? ? ? ? ? ? 'LOGO',
? ? ? ? ? ? ? ? style: TextStyle(
? ? ? ? ? ? ? ? ? color: Color.fromARGB(255, 53, 53, 53),
? ? ? ? ? ? ? ? ? fontSize: 50.0
? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? )
? ? ? ? ? ? ),
? ? ? ? ? ? new Container(
? ? ? ? ? ? ? padding: const EdgeInsets.all(16.0),
? ? ? ? ? ? ? child: new Form(
? ? ? ? ? ? ? ? key: loginKey,
? ? ? ? ? ? ? ? autovalidate: true,
? ? ? ? ? ? ? ? child: new Column(
? ? ? ? ? ? ? ? ? children: <Widget>[
? ? ? ? ? ? ? ? ? ? new Container(
? ? ? ? ? ? ? ? ? ? ? decoration: new BoxDecoration(
? ? ? ? ? ? ? ? ? ? ? ? border: new Border(
? ? ? ? ? ? ? ? ? ? ? ? ? bottom: BorderSide(
? ? ? ? ? ? ? ? ? ? ? ? ? ? color: Color.fromARGB(255, 240, 240, 240),
? ? ? ? ? ? ? ? ? ? ? ? ? ? width: 1.0
? ? ? ? ? ? ? ? ? ? ? ? ? )
? ? ? ? ? ? ? ? ? ? ? ? )
? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ? child: new TextFormField(
? ? ? ? ? ? ? ? ? ? ? ? decoration: new InputDecoration(
? ? ? ? ? ? ? ? ? ? ? ? ? labelText: '請輸入手機號',
? ? ? ? ? ? ? ? ? ? ? ? ? labelStyle: new TextStyle( fontSize: 15.0, color: Color.fromARGB(255, 93, 93, 93)),
? ? ? ? ? ? ? ? ? ? ? ? ? border: InputBorder.none,
? ? ? ? ? ? ? ? ? ? ? ? ? // suffixIcon: new IconButton(
? ? ? ? ? ? ? ? ? ? ? ? ? //? icon: new Icon(
? ? ? ? ? ? ? ? ? ? ? ? ? //? ? Icons.close,
? ? ? ? ? ? ? ? ? ? ? ? ? //? ? color: Color.fromARGB(255, 126, 126, 126),
? ? ? ? ? ? ? ? ? ? ? ? ? //? ),
? ? ? ? ? ? ? ? ? ? ? ? ? //? onPressed: () {
? ? ? ? ? ? ? ? ? ? ? ? ? //? },
? ? ? ? ? ? ? ? ? ? ? ? ? // ),
? ? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ? ? keyboardType: TextInputType.phone,
? ? ? ? ? ? ? ? ? ? ? ? onSaved: (value) {
? ? ? ? ? ? ? ? ? ? ? ? ? userName = value;
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? validator: (phone) {
? ? ? ? ? ? ? ? ? ? ? ? ? // if(phone.length == 0){
? ? ? ? ? ? ? ? ? ? ? ? ? //? return '請輸入手機號';
? ? ? ? ? ? ? ? ? ? ? ? ? // }
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? onFieldSubmitted: (value) {
? ? ? ? ? ? ? ? ? ? ? ? },?
? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? new Container(
? ? ? ? ? ? ? ? ? ? ? decoration: new BoxDecoration(
? ? ? ? ? ? ? ? ? ? ? ? border: new Border(
? ? ? ? ? ? ? ? ? ? ? ? ? bottom: BorderSide(
? ? ? ? ? ? ? ? ? ? ? ? ? ? color: Color.fromARGB(255, 240, 240, 240),
? ? ? ? ? ? ? ? ? ? ? ? ? ? width: 1.0
? ? ? ? ? ? ? ? ? ? ? ? ? )
? ? ? ? ? ? ? ? ? ? ? ? )
? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ? child: new TextFormField(
? ? ? ? ? ? ? ? ? ? ? ? decoration:? new InputDecoration(
? ? ? ? ? ? ? ? ? ? ? ? ? labelText: '請輸入密碼',
? ? ? ? ? ? ? ? ? ? ? ? ? labelStyle: new TextStyle( fontSize: 15.0, color: Color.fromARGB(255, 93, 93, 93)),
? ? ? ? ? ? ? ? ? ? ? ? ? border: InputBorder.none,
? ? ? ? ? ? ? ? ? ? ? ? ? suffixIcon: new IconButton(
? ? ? ? ? ? ? ? ? ? ? ? ? ? icon: new Icon(
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? isShowPassWord ? Icons.visibility : Icons.visibility_off,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color: Color.fromARGB(255, 126, 126, 126),
? ? ? ? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ? ? ? ? onPressed: showPassWord,
? ? ? ? ? ? ? ? ? ? ? ? ? )
? ? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ? ? obscureText: !isShowPassWord,
? ? ? ? ? ? ? ? ? ? ? ? onSaved: (value) {
? ? ? ? ? ? ? ? ? ? ? ? ? password = value;
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? new Container(
? ? ? ? ? ? ? ? ? ? ? height: 45.0,
? ? ? ? ? ? ? ? ? ? ? margin: EdgeInsets.only(top: 40.0),
? ? ? ? ? ? ? ? ? ? ? child: new SizedBox.expand(?
? ? ? ? ? ? ? ? ? ? ? ? child: new RaisedButton(
? ? ? ? ? ? ? ? ? ? ? ? ? onPressed: login,
? ? ? ? ? ? ? ? ? ? ? ? ? color: Color.fromARGB(255, 61, 203, 128),
? ? ? ? ? ? ? ? ? ? ? ? ? child: new Text(
? ? ? ? ? ? ? ? ? ? ? ? ? ? '登錄',
? ? ? ? ? ? ? ? ? ? ? ? ? ? style: TextStyle(
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? fontSize: 14.0,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color: Color.fromARGB(255, 255, 255, 255)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ? ? ? shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(45.0)),
? ? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ? ),?
? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? new Container(
? ? ? ? ? ? ? ? ? ? ? margin: EdgeInsets.only(top: 30.0),
? ? ? ? ? ? ? ? ? ? ? padding: EdgeInsets.only(left: 8.0, right: 8.0),
? ? ? ? ? ? ? ? ? ? ? child: new Row(
? ? ? ? ? ? ? ? ? ? ? ? mainAxisAlignment: MainAxisAlignment.spaceBetween,
? ? ? ? ? ? ? ? ? ? ? ? children: <Widget>[
? ? ? ? ? ? ? ? ? ? ? ? ? new Container(
? ? ? ? ? ? ? ? ? ? ? ? ? ? child:? Text(
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? '注冊賬號',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? style: TextStyle(
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? fontSize: 13.0,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color: Color.fromARGB(255, 53, 53, 53)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ? ? ? Text(
? ? ? ? ? ? ? ? ? ? ? ? ? ? '忘記密碼酬核？',
? ? ? ? ? ? ? ? ? ? ? ? ? ? style: TextStyle(
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? fontSize: 13.0,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color: Color.fromARGB(255, 53, 53, 53)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? ? ? ? ) ,
? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ),
? ? ? ? ? ? )
? ? ? ? ? ],
? ? ? ? ),
? ? ? ),
? ? );
? }
}
