如何在Flutter中创建一个简单的登录UI？

Question

我正在尝试在 Flutter 中构建一个简单的登录 UI，如下所示：

目前，我的设计如下：

这是我的代码：

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

  @override
  State<LogInEnterEmailPassword> createState() => _LogInEnterEmailPasswordState();
}

class _LogInEnterEmailPasswordState extends State<LogInEnterEmailPassword> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffF6F6F6),
      body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text("Enter Email",
            style: TextStyle(
              fontSize: 25,
              fontStyle: FontStyle.normal,
              fontWeight:  FontWeight.normal,
              color: Color(0xff313640),
            ),),
              Text("______________________________",
                style: TextStyle(
                  fontSize: 25,
                  fontStyle: FontStyle.normal,
                  fontWeight:  FontWeight.normal,
                  color: Color(0xff313640),
                ),),
              Text("Enter Password",
                style: TextStyle(
                  fontSize: 25,
                  fontStyle: FontStyle.normal,
                  fontWeight:  FontWeight.normal,
                  color: Color(0xff313640),

                ),),
              Text("______________________________",
                style: TextStyle(
                  fontSize: 25,
                  fontStyle: FontStyle.normal,
                  fontWeight:  FontWeight.normal,
                  color: Color(0xff313640),

                ),),
            ],
          )
      )
    );
  }
}

我尝试过使用

SizedBox

，但它留下了太多空间。如何在不牺牲整体结构的情况下实现更紧凑的布局？

Answer 1

您可以尝试将 MainAxisAlignment 从 spaceEvenly 更改为 center 吗？你可以看到它们之间的区别。

实际上，我完全使用 SizeBox 将它们用特定的空格分开。

mainAxisAlignment：MainAxisAlignment.spaceEvenly

mainAxisAlignment：MainAxisAlignment.center

Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 24.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Flexible(
              child: Hero(
                tag: 'logo',
                child: Container(
                  height: 200.0,
                  child: Image.asset('images/logo.png'),
                ),
              ),
            ),
            SizedBox(
              height: 48.0,
            ),
            TextField(
              keyboardType: TextInputType.emailAddress,
              textAlign: TextAlign.center,
              onChanged: (value) {
                email = value;
                //Do something with the user input.
              }, decoration: kTextFieldDecoration.copyWith(hintText: 'Eenter your email')),
            SizedBox(
              height: 8.0,
            ),
            TextField(
              obscureText: true,
                textAlign: TextAlign.center,
                onChanged: (value) {
                password = value;
                //Do something with the user input.
              },
                decoration: kTextFieldDecoration.copyWith(hintText: 'Eenter your password')),
            SizedBox(
              height: 24.0,
            ),
            RoundButton(
              title: 'Register',
              colour: Colors.blueAccent,
              onPressed: () async{
                print(email);
                print(password);
                print('Register');
                //Go to login screen.
                // Navigator.pushNamed(context, RegistrationScreen.id);
                try{
                  final newUser = await _auth.createUserWithEmailAndPassword(email: email, password: password);
                  if (newUser != null) {
                    Navigator.pushNamed(context, ChatScreen.id);
                  }

                }
                catch(e) {
                  print(e);
                }
              },
            ),
          ],
        ),
      ),
    );