Flutter-登录界面实战

一、前言

前面了解了Flutter的适配原理级及适配方案，接下来我们进行一个实战，开发一个登录界面，效果图如下：

二、代码实践

2.1 LoginPage

这里LoginPage使用StatefulWidget来实现：

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 16.dp),
        child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
        ),
      ),
    );
  }
}

2.2 为Column添加内容

欢迎登录和头部有一定的距离，这里使用SizedBox在占位

children: [
            SizedBox(
              height: 80.dp,