flutter - 我怎样才能为这个登录屏幕制作脚手架？

Question

我已经尝试了很多不同的方法来使小部件排列整齐，但我对颤动还是很陌生，不能轻松制作脚手架。我希望我的屏幕看起来像这样。我真的在努力将事物与其他事物对齐，例如将 2 个文本视图放在图标下，并相对于页面对齐事物。我的颤振代码也很糟糕，所以我放它可能没有意义。任何帮助表示感谢！

标签： flutterflutter-layout

Answer 1

看一下这个

import 'package:flutter/material.dart';

class Login extends StatefulWidget {
  @override
  _LoginState createState() => _LoginState();
}

class _LoginState extends State<Login> {
  bool _obscureText = true;
  bool _isChecked = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: EdgeInsets.all(20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Container(
                        width: 85,
                        height: 85,
                        decoration: BoxDecoration(
                            color: Colors.blue[900],
                            borderRadius: BorderRadius.circular(30)),
                      ),
                      Icon(
                        Icons.settings,
                        color: Colors.grey,
                        size: 40,
                      )
                    ],
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Text(
                    "Highlands Latin School",
                    style: TextStyle(fontSize: 25, color: Colors.blue[900]),
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Text(
                    "Canvas Grades",
                    style: TextStyle(color: Colors.grey[700], fontSize: 18),
                  ),
                ],
              ),
              Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Column(
                    children: <Widget>[
                      TextField(
                        decoration: InputDecoration(
                            labelText: "Email",
                            border: OutlineInputBorder()
                        ),
                      ),
                      SizedBox(height: 10,),
                      TextField(
                        obscureText: _obscureText,
                        decoration: InputDecoration(
                          labelText: "Password",
                          border: OutlineInputBorder(),
                          suffixIcon: IconButton(
                            icon: Icon(_obscureText ? Icons.visibility_off: Icons.visibility),
                            onPressed: (){
                              setState(() {
                                _obscureText = !_obscureText;
                              });
                            },
                          )
                        ),
                      ),
                      SizedBox(height: 10,),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: <Widget>[
                          Row(
                            children: <Widget>[
                              Checkbox(
                                value: _isChecked,
                                onChanged: (value){
                                  setState(() {
                                    _isChecked = !_isChecked;
                                  });
                                },
                              ),
                              Text(
                                "SAVE LOGIN?"
                              )
                            ],
                          ),
                          Container(
                            height: 30,
                            width: 1,
                            color: Colors.grey,
                          ),
                          GestureDetector(
                            onTap: (){},
                            child: Text(
                              "FORGOT PASSWORD?"
                            ),
                          )
                        ],
                      )
                    ],
                  ),
                ],
              ),
              SizedBox(
                width: double.infinity,
                child: RaisedButton(
                  child: Text(
                    "Login",
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 18
                    ),
                  ),
                  padding: EdgeInsets.all(15),
                  color: Colors.blue[900],
                  onPressed: (){

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

输出：

希望这对您有所帮助。