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

最后实现效果：