加群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
