初學flutter 登錄佈局

void main() {
  runApp(
    MaterialApp(
      title: 'hello flutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Main(),
    ),
  );
  if (Platform.isAndroid) {
    // 以下兩行 設置android狀態欄爲透明的沉浸。寫在組件渲染之後，是爲了在渲染後進行set賦值，覆蓋狀態欄，寫在渲染之前       MaterialApp組件會覆蓋掉這個值。
    SystemUiOverlayStyle systemUiOverlayStyle =
        SystemUiOverlayStyle(statusBarColor: Colors.transparent);
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  }
}

class Main extends StatelessWidget {
  //手機號的控制器
  TextEditingController phoneController = TextEditingController();

  //密碼的控制器
  TextEditingController passController = TextEditingController();

  void login() async {
    if (phoneController.text.length != 11) {
      ToastUtil.showToast("請輸入11位手機號碼");
    } else if (passController.text.length == 0) {
      ToastUtil.showToast("密碼不能爲空");
    } else if (passController.text.length < 6) {
      ToastUtil.showToast("密碼格式錯誤");
    } else {
      ToastUtil.showToast("登錄成功");
      //phoneController.clear();
      //passController.clear();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      //寬度
      width: double.infinity,
      //高度
      height: double.infinity,
      // 盒子樣式
      decoration: new BoxDecoration(
        color: Colors.white,
        //設置Border屬性給容器添加邊框
        border: new Border.all(
          //爲邊框添加顏色
          color: Colors.white,
          //邊框寬度
          width: 0,
        ),
      ),
      child: Column(
        children: [
          Expanded(
            flex: 1,
            child: Stack(
              alignment: Alignment.topCenter,
              children: <Widget>[
                Positioned(
                    child: Image.asset(
                  'images/icon.webp',
                  fit: BoxFit.cover,
                  width: double.infinity,
                )),
                Positioned(
                  top: 35.0,
                  child: Text(
                    '登錄',
                    style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.normal,
                      fontSize: 20.0,
                      decoration: TextDecoration.none,
                    ),
                    textAlign: TextAlign.center,
                  ),
                )
              ],
            ),
          ),
          Expanded(
              flex: 1,
              child: Scaffold(
                  body: SingleChildScrollView(
                child: Container(
                  padding: const EdgeInsets.only(top: 50.0),
                  // 盒子樣式
                  decoration: new BoxDecoration(
                    color: Colors.white,
                    //設置Border屬性給容器添加邊框
                    border: new Border.all(
                      //爲邊框添加顏色
                      color: Colors.white,
                      //邊框寬度
                      width: 0,
                    ),
                  ),
                  child: Column(
                    children: [
                      editText(Icon(Icons.person), '請輸入您的賬號',
                          TextInputType.number, false, phoneController),
                      editText(Icon(Icons.lock), '請輸入您的密碼',
                          TextInputType.visiblePassword, true, passController),
                      GestureDetector(
                        child: Container(
                          alignment: Alignment.center,
                          margin: const EdgeInsets.only(
                              top: 40, left: 20, right: 20),
                          //寬度
                          width: double.infinity,
                          //高度
                          height: 48.0,
                          // 盒子樣式
                          decoration: new BoxDecoration(
                            color: Colors.blue,
                            //設置Border屬性給容器添加邊框
                            border: new Border.all(
                              //爲邊框添加顏色
                              color: Colors.blue,
                              //邊框寬度
                              width: 1,
                            ),
                            borderRadius:
                                BorderRadius.all(Radius.circular(30.0)),
                          ),
                          child: Text(
                            '登錄',
                            style: TextStyle(
                              color: Colors.white,
                              decoration: TextDecoration.none,
                              fontSize: 22.0,
                            ),
                          ),
                        ),
                        behavior: HitTestBehavior.opaque,
                        onTap: () {
                          login();
                        },
                      )
                    ],
                  ),
                ),
              ))),
        ],
      ),
    );
  }

  Widget editText(Widget icon, String labelText, TextInputType inputType,
      bool b, TextEditingController controller) {
    return Container(
      margin: const EdgeInsets.only(left: 20.0, right: 20.0),
      //寬度
      width: double.infinity,
      //高度
      height: 50.0,
      child: Column(
        children: [
          Expanded(
            child: TextField(
              // 控制器用於獲取輸入的內容
              controller: controller,
              keyboardType: inputType,
              decoration: InputDecoration(
                contentPadding: EdgeInsets.all(10.0),
                icon: icon,
                hintText: labelText,
              ),
              //onChanged: _textFieldChanged,
              autofocus: false,
              obscureText: b,
              maxLength: 11,
              maxLines: 1,
            ),
          ),
        ],
      ),
    );
  }
}

最後實現效果：