flutter 登录和退出登录_flutter - 实战：设计一个丑丑的登录界面

介绍

通过之前的学习，设计出一个简陋的登录界面。

Scaffold是一个强大的material组件，它集成了很丰富的子元素，使得我们可以很方便的设置方方面面的东西。

Widget用一种嵌套的方式组成界面，和html，xml类似，但是由于dart语言本身使用了{}组织代码块的方式（这种方式在一些用途的时候展现出了强大的效果使得代码的可读性提高）致使代码组织上显得累赘和冗余，影响代码阅读。

接下来将会对这个界面进行进一步提升（提升逻辑层面为主）。

效果展示：

源码：

import 'package:flutter/material.dart';
import 'package:dim_chat_client/Adapt.dart';

class Login extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Icon(Icons.account_circle),
        title: Text('DimChat'),
      ) ,
      body: Container(
        color: Theme.of(context).backgroundColor,
        child: LoginPage(),
      ),
      bottomSheet: Container(
        color: Theme.of(context).backgroundColor,
        child: buildBottom(),
      ),
    );
  }
}

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(

      mainAxisSize: MainAxisSize.max,
      children: <Widget>[

        Image.asset(
          "assets/images/loginPic.jpeg",
          width: Adapt.px(750),
          height: Adapt.px(260),
          fit: BoxFit.cover,
        ),

        Container(height: Adapt.px(50),),

        Center(child: buildForm()),

        Container(height: Adapt.px(50),),

        Center(child: buildButton(),),

      ],
    );
  }

}

Widget buildBottom(){
  return new Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    mainAxisSize: MainAxisSize.max,
    children: <Widget>[
      FlatButton(
        child: Text("More"),
        onPressed: () => {},
      ),
      FlatButton(
        child: Text("Exit"),
        onPressed: () => {},
      ),
    ],
  );
}

Widget buildButton(){
  final buttonPadding = 50;
  return new Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      FlatButton(
        child: Text("立即注册"),
        onPressed: () => {},
      ),
      Padding(
        padding: EdgeInsets.only(left:Adapt.px(buttonPadding),right: Adapt.px(buttonPadding)),
        child: RaisedButton(
          child: Text("GO"),
          onPressed: () => {},
        ),
      ),
      FlatButton(
        child: Text("忘记密码"),
        onPressed: () => {},
      ),
    ],
  );
}

Widget buildForm() {
  return new Container(
    decoration:
    new BoxDecoration(
      borderRadius: BorderRadius.all(Radius.circular(8))
      , color: Colors.white
    ),
    width: Adapt.px(600),
    height: Adapt.px(260),

    child: new Form(
      child: new Column(
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[

          Flexible(
            child: Padding(
              padding: EdgeInsets.all(Adapt.px(25)),
              child: new TextFormField(
                decoration: new InputDecoration(
                  icon: new Icon(Icons.email, color: Colors.black,),
                  hintText: "Email Address",
                  border: InputBorder.none
                ),
              ),
            ),
          ),

          Flexible(
            child: Padding(
              padding: EdgeInsets.all(Adapt.px(25)),
              child: new TextFormField(
                decoration: new InputDecoration(
                  icon: new Icon(Icons.lock, color: Colors.black,),
                  hintText: "Password",
                  border: InputBorder.none,
                  suffixIcon: new IconButton(icon: new Icon(
                    Icons.remove_red_eye, color: Colors.black,),
                  )
                ),
              ),
            ),
          ),

        ],
      ),
    ),
  );
}