Flutter-防京东商城项目-编写登录页面UI-33

一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。

代码文档

Flutter防京东商城源码(1-10)链接

Flutter防京东商城源码(11-20)链接

Flutter防京东商城源码(21-30)链接

Flutter防京东商城源码(31-46)链接

本章效果：

开发首页的时候可以设置main启动首页。

1.回到页面修改下面的代码

2.把自定义控件拖进来

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_app/services/screenAdaper.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: ScreenAdaper.height(68),
      decoration: BoxDecoration(
          border: Border(
              bottom: BorderSide(
                  width: 1,
                  color: Colors.black12
              )
          )
      ),
    );
  }
}

添加下面的代码进行首页跳转

child: InkWell(
  onTap: () {
    Navigator.pushNamed(context, '/login');
  },
  child: Text("登录/注册", style: TextStyle(color: Colors.white)),
),

3.JdButton文件添加下面的代码

class JdButton extends StatelessWidget {

  final Color color;
  final String text;
  final Object cb;
  
//--------------------------------------------
  final double height;
//--------------------------------------------


  JdButton({Key key,this.color=Colors.black,this.text="按钮",this.cb=null,this.height=68}) : 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: ScreenAdaper.height(this.height),//---------------------------------
        width: double.infinity,
        decoration: BoxDecoration(

4.把Login页面复制进来。

import 'package:flutter/material.dart';
import 'package:flutter_app/services/screenAdaper.dart';
import '../widget/JDText.dart';
import '../widget/JDButton.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(ScreenAdaper.width(20)),
        child: ListView(
          children: <Widget>[
            Center(
              child: Container(
                margin: EdgeInsets.only(top: 30),
                height: ScreenAdaper.width(160),
                width: ScreenAdaper.width(160),
                // child: Image.asset('images/login.png'),
                child: Image.network(
                    'https://www.itying.com/images/flutter/list5.jpg',
                    fit: BoxFit.cover),
              ),
            ),
            SizedBox(height: 30),
            JdText(
              text: "请输入用户名",
              onChanged: (value) {
                print(value);
              },
            ),
            SizedBox(height: 10),
            JdText(
              text: "请输入密码",
              password: true,
              onChanged: (value) {
                print(value);
              },
            ),
            SizedBox(height: 10),
            Container(
              padding: EdgeInsets.all(ScreenAdaper.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,
              height: 74,
              cb: (){

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

5.配置登录页面的路由

import '../pages/Login.dart';

'/login': (context) => LoginPage(),

3.配置图片

6.导入3个注册页面

6.1RegisterFirst

import 'package:flutter/material.dart';

import '../widget/JDText.dart';
import '../widget/JDButton.dart';
import 'package:flutter_app/services/screenAdaper.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(ScreenAdaper.width(20)),
        child: ListView(
          children: <Widget>[
            SizedBox(height: 50),
            JdText(
              text: "请输入手机号",
              onChanged: (value) {
                print(value);
              },
            ),
            SizedBox(height: 20),
            JdButton(
              text: "下一步",
              color: Colors.red,
              height: 74,
              cb: () {
                Navigator.pushNamed(context, '/registerSecond');
              },
            )
          ],
        ),
      ),
    );
  }
}

6.2RegisterSecond

import 'package:flutter/material.dart';
import '../widget/JDText.dart';
import '../widget/JDButton.dart';
import 'package:flutter_app/services/screenAdaper.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(ScreenAdaper.width(20)),
        child: ListView(
          children: <Widget>[
            SizedBox(height: 50),

            Container(
              padding: EdgeInsets.only(left: 10),
              child: Text("请输入xxx手机收到的验证码,请输入xxx手机收到的验证码"),
            ),
            SizedBox(height:40),

            Stack(

              children: <Widget>[
                JdText(
                  text: "请输入验证码",
                  onChanged: (value) {
                    print(value);
                  },
                ),
                Positioned(
                  right: 0,
                  top: 0,
                  child: RaisedButton(
                    child: Text('重新发送'),
                    onPressed: (){

                    },
                  ),
                )

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

6.3RegisterThird

import 'package:flutter/material.dart';
import '../widget/JDText.dart';
import '../widget/JDButton.dart';
import 'package:flutter_app/services/screenAdaper.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(ScreenAdaper.width(20)),
        child: ListView(
          children: <Widget>[
            SizedBox(height: 50),
            JdText(
              text: "请输入密码",
              password: true,
              onChanged: (value) {
                print(value);
              },
            ),
            SizedBox(height: 10),
            JdText(
              text: "请输入确认密码",
              password: true,
              onChanged: (value) {
                print(value);
              },
            ),
            SizedBox(height: 20),
            JdButton(
              text: "登录",
              color: Colors.red,
              height: 74,
              cb: () {},
            )
          ],
        ),
      ),
    );
  }
}

7.回到下面的页面

import '../pages/RegisterFirst.dart';
import '../pages/RegisterSecond.dart';
import '../pages/RegisterThird.dart';

'/registerFirst': (context) => RegisterFirstPage(),
'/registerSecond': (context) => RegisterSecondPage(),
'/registerThird': (context) => RegisterThirdPage(),