33Flutter仿京东商城项目 登录 注册相关页面布局

加群452892873 下载对应33课文件，运行方法，建好项目，直接替换lib目录

以下列出的是本课涉及的文件。

User.dart

import 'package:flutter/material.dart';
import 'package:flutter_jdshop/services/ScreenAdapter.dart';

class UserPage extends StatefulWidget {
  UserPage({Key key}) : super(key: key);

  _UserPageState createState() => _UserPageState();
}

class _UserPageState extends State<UserPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("用户中心"),
      ),
      body: ListView(
        children: <Widget>[
          Container(
            height: ScreenAdapter.height(220),
             double.infinity,
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('images/user_bg.jpg'),
                    fit: BoxFit.cover)),
            child: Row(
              children: <Widget>[
                Container(
                  margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
                  child: ClipOval(
                    child: Image.asset(
                      'images/user.png',
                      fit: BoxFit.cover,
                       ScreenAdapter.width(100),
                      height: ScreenAdapter.width(100),
                    ),
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: InkWell(
                    onTap: () {
                      Navigator.pushNamed(context, '/login');
                    },
                    child: Text('登录/注册', style: TextStyle(color: Colors.white)),
                  ),
                ),

                // Expanded(
                //   flex: 1,
                //   child: Column(
                //     mainAxisAlignment: MainAxisAlignment.center,
                //     crossAxisAlignment: CrossAxisAlignment.start,
                //     children: <Widget>[
                //       Text("用户名:123456789",
                //           style: TextStyle(
                //               color: Colors.white,
                //               fontSize: ScreenAdapter.size(32))),
                //       Text("普通会员",
                //           style: TextStyle(
                //               color: Colors.white,
                //               fontSize: ScreenAdapter.size(32)))
                //     ],
                //   ),
                // )
              ],
            ),
          ),
          ListTile(
              leading: Icon(Icons.home, color: Colors.red), title: Text('首页')),
          Divider(),
          ListTile(leading: Icon(Icons.home), title: Text('首页')),
          ListTile(leading: Icon(Icons.home), title: Text('首页')),
          ListTile(leading: Icon(Icons.home), title: Text('首页'))
        ],
      ),
    );
  }
}

Login.dart

import 'package:flutter/material.dart';
import 'package:flutter_jdshop/services/ScreenAdapter.dart';
import 'package:flutter_jdshop/widget/JdButton.dart';
import '../widget/JdText.dart';
import '../widget/JdText.dart';

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

  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.close),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
        title: Text('登录页面'),
        actions: <Widget>[
          FlatButton(
            child: Text('客服'),
            onPressed: () {},
          )
        ],
      ),
      body: Container(
        padding: EdgeInsets.all(ScreenAdapter.width(20)),
        child: ListView(
          children: <Widget>[
            Center(
              child: Container(
                margin: EdgeInsets.only(top: 30),
                height: ScreenAdapter.width(160),
                 ScreenAdapter.width(160),
                // child: Image.asset('images/login.png'),
                child: Image.network(
                    'https://www.iting.com/images/flutter/list5.jpg'),
              ),
            ),
            JdText(
              text: "请输入用户名",
              onChanged: (value) {
                print(value);
              },
            ),
            SizedBox(height: 20),
            JdText(
              text: "请输入密码",
              password: true,
              onChanged: (value) {
                print(value);
              },
            ),
            SizedBox(height: 20),
            Container(
              padding: EdgeInsets.all(ScreenAdapter.width(20)),
              child: Stack(
                children: <Widget>[
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Text("忘记密码"),
                  ),
                  Align(
                    alignment: Alignment.centerRight,
                    child:InkWell(
                      onTap: (){
                        Navigator.pushNamed(context,'/RegisterFirst');
                      },
                      child: Text("新用户注册"),
                    ),
                  )
                ],
              ),
            ),
            SizedBox(height: 20),
            JdButton(
              text: "登录",
              color: Colors.red,
            )
          ],
        ),
      ),
    );
  }
}

RegisterFirst.dart

import 'package:flutter/material.dart';
import 'package:flutter_jdshop/services/ScreenAdapter.dart';
import 'package:flutter_jdshop/widget/JdButton.dart';
import 'package:flutter_jdshop/widget/JdText.dart';

class RegisterFirstPage extends StatefulWidget {
  RegisterFirstPage({Key key}) : super(key: key);

  _RegisterFirstPageState createState() => _RegisterFirstPageState();
}

class _RegisterFirstPageState extends State<RegisterFirstPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('用户注册-第一步'),
      ),
      body: Container(
        padding: EdgeInsets.all(ScreenAdapter.width(20)),
        child: ListView(
          children: <Widget>[
            SizedBox(height: 20),
            JdText(
              text: "请输入密码",
              password: true,
              onChanged: (value) {
                print(value);
              },
            ),
            SizedBox(height: 20),
            JdButton(
              text: "下一步",
              color: Colors.red,
              cb: (){
                Navigator.pushNamed(context,'/RegisterSecond');
              },
            )
          ],
        ),
      ),
    );
  }
}

RegisterSecond.dart

import 'package:flutter/material.dart';
import 'package:flutter_jdshop/services/ScreenAdapter.dart';
import 'package:flutter_jdshop/widget/JdButton.dart';
import 'package:flutter_jdshop/widget/JdText.dart';
class RegisterSecondPage extends StatefulWidget {
  RegisterSecondPage({Key key}) : super(key: key);

  _RegisterSecondPageState createState() => _RegisterSecondPageState();
}

class _RegisterSecondPageState extends State<RegisterSecondPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('用户注册-第二步'),
      ),
      body: Container(
        padding: EdgeInsets.all(ScreenAdapter.width(20)),
        child: ListView(
          children: <Widget>[
            Container(
              margin: EdgeInsets.all(20),
              child: Text('请输入xxx手机收到的验证码'),
            ),
            Stack(
              children: <Widget>[
                JdText(
                  text: "请输入验证码",
                  password: true,
                  onChanged: (value) {
                    print(value);
                  },
                ),
                Positioned(
                  right: 0,
                  top: 0,
                  child: RaisedButton(
                    child: Text('重新发送'),
                    onPressed: (){

                    },
                  ),
                )
              ],
            ),
            SizedBox(height: 20),
            JdButton(
              text: "下一步",
              color: Colors.red,
              cb: (){
                Navigator.pushNamed(context,'/RegisterThird');
              },
            )
          ],
        ),
      ),
    );
  }
}

RegisterThird.dart

import 'package:flutter/material.dart';
import 'package:flutter_jdshop/widget/JdButton.dart';
import 'package:flutter_jdshop/widget/JdText.dart';

class RegisterThirdPage extends StatefulWidget {
  RegisterThirdPage({Key key}) : super(key: key);

  _RegisterThirdPageState createState() => _RegisterThirdPageState();
}

class _RegisterThirdPageState extends State<RegisterThirdPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('用户注册-第三步'),
      ),
      body: Container(
        padding: EdgeInsets.all(20),
        child: ListView(
          children: <Widget>[
            SizedBox(height: 10),
            JdText(
              text: "请输入密码",
              password: true,
              onChanged: (value) {
                print(value);
              },
            ),
            SizedBox(height: 10),
            JdText(
              text: "请输入确认密码",
              password: true,
              onChanged: (value) {
                print(value);
              },
            ),
            SizedBox(height: 10),
            JdButton(
              text: "确认",
              color: Colors.red,
              cb: () {},
            )
          ],
        ),
      ),
    );
  }
}
//

JdText.dart

import 'package:flutter/material.dart';
import 'package:flutter_jdshop/services/ScreenAdapter.dart';
class JdText extends StatelessWidget {
  final String text;
  final bool password;
  final Object onChanged;
  JdText({Key key,this.text="输入内容",this.password=false,this.onChanged=null}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: TextField(
        obscureText: this.password,
        decoration: InputDecoration(
          hintText: this.text,
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(30),
            borderSide: BorderSide.none
          )
        ),
        onChanged:this.onChanged,
      ),
      height: ScreenAdapter.height(68),
      decoration: BoxDecoration(
        // color: Color.fromRGBO(233,233,233,0.8),
        // borderRadius: BorderRadius.circular(30)
        border: Border(
          bottom:BorderSide(
             1,
            color: Colors.black12
          )
        )
      ),
      
    );
  }
}

JdButton.dart

import 'package:flutter/material.dart';
import '../services/ScreenAdapter.dart';

class JdButton extends StatelessWidget {

  final Color color;
  final String text;
  final Object cb;
  JdButton({Key key,this.color=Colors.black,this.text="按钮",this.cb=null}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    ScreenAdapter.init(context);
    return InkWell(
      onTap: this.cb,
      child: Container(
        margin: EdgeInsets.all(5),
        padding: EdgeInsets.all(5),
        height: ScreenAdapter.height(68),
         double.infinity,
        decoration: BoxDecoration(
            color: color,
            borderRadius: BorderRadius.circular(10)),
        child: Center(
          child: Text(
            "${text}",
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

router.dart

import 'package:flutter/material.dart';
import 'package:flutter_jdshop/pages/Login.dart';
import 'package:flutter_jdshop/pages/RegisterFirst.dart';
import 'package:flutter_jdshop/pages/RegisterSecond.dart';
import 'package:flutter_jdshop/pages/RegisterThird.dart';
import 'package:flutter_jdshop/pages/tabs/Cart.dart';
import '../pages/tabs/Tabs.dart';

import '../pages/Search.dart';

import '../pages/ProductList.dart';

import '../pages/ProductContent.dart';

//配置路由
final routes = {
  '/': (context) => Tabs(),
  '/login': (context) => LoginPage(),
  '/RegisterFirst': (context) =>RegisterFirstPage(),
  '/RegisterSecond': (context) =>RegisterSecondPage(),
  '/RegisterThird': (context) =>RegisterThirdPage(),
  '/search': (context) => SearchPage(),
  '/cart': (context) => CartPage(),
  '/productList': (context,{arguments}) => ProductListPage(arguments:arguments),
  '/productContent': (context,{arguments}) => ProductContentPage(arguments:arguments),
};

//固定写法
var onGenerateRoute = (RouteSettings settings) {
// 统一处理
  final String name = settings.name;
  final Function pageContentBuilder = routes[name];
  if (pageContentBuilder != null) {
    if (settings.arguments != null) {
      final Route route = MaterialPageRoute(
          builder: (context) =>
              pageContentBuilder(context, arguments: settings.arguments));
      return route;
    } else {
      final Route route =
          MaterialPageRoute(builder: (context) => pageContentBuilder(context));
      return route;
    }
  }
};

pubspec.yaml