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), width: 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, width: 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), width: 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( width: 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), width: 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
