flutter 製作一個用戶登錄頁面

flutter 製作一個用戶登錄頁面

用戶登錄效果圖如下:

 

登錄頁面如下:

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  /* rendering調試 即開啓佈局線*/
  debugPaintSizeEnabled = false;
  runApp(new LoginMain());
}

class LoginMain extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return new MaterialApp(
      theme: new ThemeData(
        primarySwatch: Colors.blue
      ),
      home: Scaffold(
        body: new LoginHomePage(),
      )
    );
  }
}

class LoginHomePage extends StatefulWidget {
  @override
  _LoginHomePageState createState() {
    // implement createState
    return new _LoginHomePageState();
  }
}

class _LoginHomePageState extends State<LoginHomePage>{
  @override
  Widget build(BuildContext context){
    return Stack( // 層疊佈局
      children: <Widget>[
        Column( //佈局類組件
          mainAxisSize: MainAxisSize.max,//表示Row在主軸(水平)方向佔用的空間，默認是MainAxisSize.max，表示儘可能多的佔用水平方向的空間，
          crossAxisAlignment: CrossAxisAlignment.center, // 表示子組件在縱軸方向的對齊方式，Row的高度等於子組件中最高的子元素高度
          children: <Widget>[
            /* TODO 1, 放置登錄頁面logo或文字等等 */
            Container( //容器類組件(組合類,可以同時實現裝飾、變換、限制的場景)
              height: 150.0,
              alignment: Alignment.center,//居中
              padding: EdgeInsets.only(top: 20.0),
              //padding: EdgeInsets.all(50.0), //設置設置具體某個方向的填充
              color: const Color(0xfff2f2f2),
              child: Text('購物', style: TextStyle(
                  color: const Color(0xffc8a675),
                  fontSize: 40.0,
                  fontFamily: "Courier"
              )),
            ),
            /* TODO 2, 文本輸入框區域 */
            Container(
              color: Colors.white,
              alignment: Alignment.center,
              padding: EdgeInsets.only(left:30.0,right: 30.0),
              margin: EdgeInsets.only(bottom: 10.0),
              child: new Container(
                child: buildForm(),
              ),
            ),
            /* TODO 3, 忘記密碼 */
            Text('忘記密碼?',style: TextStyle(
              fontSize: 15.0,
              decoration: TextDecoration.underline,
            ),)
          ],
        )
      ],
    );
  }

  /* 定義兩個container類 unameController和pwdController*/
  TextEditingController nameController = new TextEditingController();
  TextEditingController pwdController = new TextEditingController();
  GlobalKey formKey = new GlobalKey<FormState>();

  Widget buildForm(){
    return Form(
      /* globalKey, 用於後面獲取FormState*/
      key: formKey,
      /* 開啓自動效驗 */
      autovalidate: true,
      child: Column(
        children: <Widget>[
          TextFormField(
            autofocus: false,
            keyboardType: TextInputType.text, //鍵盤輸入類型(七種類型)
            textInputAction: TextInputAction.next, //鍵盤動作按鈕圖標
            controller: nameController, //container
            maxLength: 12, //最大位數
            maxLengthEnforced: true, //超出maxLength,禁止輸入
            decoration: InputDecoration(
              labelText: "用戶名",
              hintText: "請輸入用戶名",
              icon: Icon(Icons.person),
            ),
            onChanged:(v){ //監聽輸入框值變化
              /*print("$v");*/
            },
            /* 效驗用戶名 */
            validator: (v){
              return v.trim().length>5?null:'請輸入用戶名';
            },
          ),
          TextFormField(
            autofocus: false,
            controller: pwdController,
            maxLength: 12,
            maxLengthEnforced: true,
            obscureText: true, //密碼輸入類型
            decoration: InputDecoration(
              labelText: "密碼",
              hintText: "請輸入密碼",
              icon: Icon(Icons.lock)
            ),
            validator: (v){
              return v.trim().length>5?null:'請輸入密碼';
            },
          ),
          Padding(
            padding: const EdgeInsets.only(top: 50.0),
            child: Row(
              children: <Widget>[
                Expanded(
                  child: RaisedButton( //"漂浮"按鈕
                    padding: EdgeInsets.all(12.0),
                    color: const Color(0xffc8a675),
                    textColor: Colors.white,
                    child: Text('登錄',style: TextStyle(fontSize: 17)),
                    shape:RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(80.0) //設置圓角
                    ),
                    onPressed: (){
                      if((formKey.currentState as FormState).validate()){
                        print('點擊了');
                        print(nameController.text);
                        print(pwdController.text);
                      }
                    },
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

大家有啥問題,評論區見!!!