Flutter學習：用Flutter打造一個簡單登錄界面

搭建如下圖所示的登錄界面

看到結構圖，可以使用一個列布局即可完成，對於輸入框，使用TextField控件，對於輸入控件樣式，通過Container控件來裝飾。
看代碼：

//登錄界面
class LoginView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      padding: const EdgeInsets.all(55),
      child: Column(
        children: <Widget>[
          SizedBox(height: 50,),
          Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('Member Login',
                  textAlign: TextAlign.right,
                  style: TextStyle(
                    fontSize: 25,
                    color: Colors.black45,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ]),
          Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('會員登錄',
                  textAlign: TextAlign.right,
                  style: TextStyle(
                    fontSize: 25,
                    height: 1.5,
                    color: Colors.black45,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ]),

          SizedBox(height: 120),
          new inputEdtextNameWiget(),
          SizedBox(height: 20,),
          new inputEdtextPassWordWiget(),
          SizedBox(height: 30,),
          new loginButtonWiget(),
        ],
      ),

    );
  }
}
//輸入用戶名
class inputEdtextNameWiget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new SizedBox(
      child: new Container(
        padding: EdgeInsets.fromLTRB(20, 2, 8, 2),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(30),
          color: Colors.black12,
        ),
        alignment: Alignment.center,
        child: TextField(
          maxLines: 1,
          decoration: InputDecoration(
            hintText: '用戶名',
            border: InputBorder.none,
          ),
        ),
      ),
    );
  }
}
//輸入密碼
class inputEdtextPassWordWiget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new SizedBox(
      child: new Container(
        padding: EdgeInsets.fromLTRB(20, 2, 8, 2),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(30),
          color: Colors.black12,
        ),
        alignment: Alignment.center,
        child: TextField(
          maxLines: 1,
          decoration: InputDecoration(
            hintText: '密碼',
            border: InputBorder.none,
          ),
        ),
      ),
    );
  }
}
//登錄按鈕
class loginButtonWiget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new SizedBox(
      child: new Container(
        padding: EdgeInsets.fromLTRB(2, 15, 2, 15),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(30),
          color: Colors.deepOrangeAccent,
        ),
        alignment: Alignment.center,
        child: Text(
          '登錄',
          textAlign: TextAlign.center,
          style: TextStyle(letterSpacing: 20,
          fontWeight: FontWeight.bold,
          color: Colors.white70),
        )
      ),
    );
  }
}