1. 程式人生 > >Flutter學習:用Flutter搭建一個簡單登入介面

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),
        )
      ),
    );
  }
}