0. 项目简介
项目想法脱胎于2023年服务外包大赛A18题 随手买(详情)
整个APP思路如下:
这篇博客主要服务于管理员界面的个人中心界面和乘客界面的个人中心界面。模仿淘宝的设置的设计,就是个壳子,目的是为了方便在点击后回到登陆界面切换账号和用户身份。
1. 管理员
1.1. 效果展示
1.2. 代码
依赖如下
dev_dependencies:
flutter_test:
sdk: flutter
# The "flutter_lints" package below contains a set of recommended lints to
# encourage good coding practices. The lint set provided by the package is
# activated in the `analysis_options.yaml` file located at the root of your
# package. See that file for information about deactivating specific lint
# rules and activating additional ones.
flutter_screenutil: ^3.1.0
代码如下
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
class adminself extends StatefulWidget {
const adminself({Key? key}) : super(key: key);
State<adminself> createState() => _adminselfState();
}
class _adminselfState extends State<adminself> {
Widget build(BuildContext context) {
ScreenUtil.init(context, allowFontScaling: false);
Widget namecard = Card(
color: Colors.white,
child: Container(
child: Padding(
padding: EdgeInsets.fromLTRB(20, 20, 20, 20),
child: Row(
children: [
CircleAvatar(
backgroundImage: AssetImage('assets/images/hjh1.jpg'),
radius: 40,
),
SizedBox(
width: 20,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("管理员1号", style: TextStyle(fontSize: 20, height: 1.5),),
Text("管理员工号:1129", style: TextStyle(fontSize: 14, color: Colors.grey))
],
),
Spacer(),
Icon(Icons.chevron_right),
]
)
),
),
);
Widget choice = Column(
children: [
ListTile(
tileColor: Colors.white,
title: const Text(
'我的档案',
style: TextStyle(fontWeight: FontWeight.w500),
),
trailing: RichText(
textDirection: TextDirection.ltr,
text: TextSpan(
children: <TextSpan>[
TextSpan(
text: "添加档案,获得精准推荐",
style: TextStyle(color: Colors.grey.withOpacity(1.0)),
),
TextSpan(
text: " > ",
style: TextStyle(color: Colors.black54, fontSize: 20, fontWeight: FontWeight.bold,),
),
],
),
),
),
SizedBox(height: ScreenUtil().setHeight(20),),
ListTile(
tileColor: Colors.white,
title: const Text(
'账号与安全',
style: TextStyle(fontWeight: FontWeight.w500),
),
),
Divider(height: 1,),
ListTile(
tileColor: Colors.white,
title: const Text(
'管理员权限',
style: TextStyle(fontWeight: FontWeight.w500),
),
trailing: RichText(
textDirection: TextDirection.ltr,
text: TextSpan(
children: <TextSpan>[
TextSpan(
text: "通知、删除数据",
style: TextStyle(color: Colors.grey.withOpacity(1.0)),
),
TextSpan(
text: " > ",
style: TextStyle(color: Colors.black54, fontSize: 20, fontWeight: FontWeight.bold,),
),
],
),
),
),
SizedBox(height: ScreenUtil().setHeight(20),),
ListTile(
tileColor: Colors.white,
title: const Text(
'隐私',
style: TextStyle(fontWeight: FontWeight.w500),
),
),
Divider(height: 1,),
ListTile(
tileColor: Colors.white,
title: const Text(
'通用',
style: TextStyle(fontWeight: FontWeight.w500),
),
),
Divider(height: 1,),
ListTile(
tileColor: Colors.white,
title: const Text(
'用户debug模式',
style: TextStyle(fontWeight: FontWeight.w500),
),
trailing: RichText(
textDirection: TextDirection.ltr,
text: TextSpan(
children: <TextSpan>[
TextSpan(
text: "管理员模式/用户模式",
style: TextStyle(color: Colors.grey.withOpacity(1.0)),
),
TextSpan(
text: " > ",
style: TextStyle(color: Colors.black54, fontSize: 20, fontWeight: FontWeight.bold,),
),
],
),
),
),
SizedBox(height: ScreenUtil().setHeight(20),),
ListTile(
tileColor: Colors.white,
title: const Text(
'帮助与反馈',
style: TextStyle(fontWeight: FontWeight.w500),
),
),
Divider(height: 1,),
ListTile(
tileColor: Colors.white,
title: const Text(
'意见与建议',
style: TextStyle(fontWeight: FontWeight.w500),
),
),
SizedBox(height: ScreenUtil().setHeight(20),),
ListTile(
tileColor: Colors.white,
title: const Text(
textAlign: TextAlign.center,
'切换账号',
style: TextStyle(fontWeight: FontWeight.w500),
),
),
SizedBox(height: ScreenUtil().setHeight(20),),
ListTile(
tileColor: Colors.white,
title: const Text(
textAlign: TextAlign.center,
'退出登录',
style: TextStyle(fontWeight: FontWeight.w500),
),
onTap: (){
Navigator.pushNamed(context,"login");
},
),
]
);
Widget protocol = Text(
"《证照信息》《平台服务协议》《个人信息共享清单》",
style: TextStyle(
fontSize: 12,
color: Colors.blue.shade800,
),
);
return Scaffold(
// appBar: AppBar(
// title: Text('个人中心', textAlign: TextAlign.center, style: TextStyle( color: Colors.black87),),
// centerTitle: true,
// backgroundColor: Colors.transparent,
// elevation: 0,
// ),
backgroundColor: Colors.grey.shade300,
body: Column(
children: [
SizedBox(height: ScreenUtil().setHeight(40),),
namecard,
SizedBox(height: ScreenUtil().setHeight(20),),
choice,
SizedBox(height: ScreenUtil().setHeight(30),),
protocol,
],
),
);
}
}
2. 乘客
2.1. 效果展示
2.2. 代码
依赖如下
dev_dependencies:
flutter_test:
sdk: flutter
# The "flutter_lints" package below contains a set of recommended lints to
# encourage good coding practices. The lint set provided by the package is
# activated in the `analysis_options.yaml` file located at the root of your
# package. See that file for information about deactivating specific lint
# rules and activating additional ones.
flutter_screenutil: ^3.1.0
代码如下
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
class passengerself extends StatefulWidget {
const passengerself({Key? key}) : super(key: key);
State<passengerself> createState() => _passengerselfState();
}
class _passengerselfState extends State<passengerself> {
Widget build(BuildContext context) {
ScreenUtil.init(context, allowFontScaling: false);
Widget namecard = Card(
color: Colors.white,
child: Container(
child: Padding(
padding: EdgeInsets.fromLTRB(20, 20, 20, 20),
child: Row(
children: [
CircleAvatar(
backgroundImage: AssetImage('assets/images/head.jpg'),
radius: 40,
),
SizedBox(
width: 20,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("铖铖的公主", style: TextStyle(fontSize: 20, height: 1.5),),
Text("用户名:1234567890", style: TextStyle(fontSize: 14, color: Colors.grey))
],
),
Spacer(),
Icon(Icons.chevron_right),
]
)
),
),
);
Widget choice = Column(
children: [
ListTile(
tileColor: Colors.white,
title: const Text(
'我的档案',
style: TextStyle(fontWeight: FontWeight.w500),
),
leading: Icon(
Icons.restaurant_menu,
color: Colors.blue[500],
),
trailing: RichText(
textDirection: TextDirection.ltr,
text: TextSpan(
children: <TextSpan>[
TextSpan(
text: "添加档案,获得精准推荐",
style: TextStyle(color: Colors.grey.withOpacity(1.0)),
),
TextSpan(
text: " > ",
style: TextStyle(color: Colors.black54, fontSize: 20, fontWeight: FontWeight.bold,),
),
],
),
),
),
SizedBox(height: ScreenUtil().setHeight(20),),
ListTile(
tileColor: Colors.white,
title: const Text(
'账号与安全',
style: TextStyle(fontWeight: FontWeight.w500),
),
leading: Icon(
Icons.restaurant_menu,
color: Colors.blue[500],
),
),
Divider(height: 1,),
ListTile(
tileColor: Colors.white,
title: const Text(
'支付',
style: TextStyle(fontWeight: FontWeight.w500),
),
leading: Icon(
Icons.restaurant_menu,
color: Colors.blue[500],
),
trailing: RichText(
textDirection: TextDirection.ltr,
text: TextSpan(
children: <TextSpan>[
TextSpan(
text: "支付宝、微信、银行卡",
style: TextStyle(color: Colors.grey.withOpacity(1.0)),
),
TextSpan(
text: " > ",
style: TextStyle(color: Colors.black54, fontSize: 20, fontWeight: FontWeight.bold,),
),
],
),
),
),
SizedBox(height: ScreenUtil().setHeight(20),),
ListTile(
tileColor: Colors.white,
title: const Text(
'隐私',
style: TextStyle(fontWeight: FontWeight.w500),
),
leading: Icon(
Icons.restaurant_menu,
color: Colors.blue[500],
),
),
Divider(height: 1,),
ListTile(
tileColor: Colors.white,
title: const Text(
'通用',
style: TextStyle(fontWeight: FontWeight.w500),
),
leading: Icon(
Icons.restaurant_menu,
color: Colors.blue[500],
),
),
Divider(height: 1,),
ListTile(
tileColor: Colors.white,
title: const Text(
'青少年模式',
style: TextStyle(fontWeight: FontWeight.w500),
),
leading: Icon(
Icons.restaurant_menu,
color: Colors.blue[500],
),
trailing: RichText(
textDirection: TextDirection.ltr,
text: TextSpan(
children: <TextSpan>[
TextSpan(
text: "标准模式/长辈模式",
style: TextStyle(color: Colors.grey.withOpacity(1.0)),
),
TextSpan(
text: " > ",
style: TextStyle(color: Colors.black54, fontSize: 20, fontWeight: FontWeight.bold,),
),
],
),
),
),
SizedBox(height: ScreenUtil().setHeight(20),),
ListTile(
tileColor: Colors.white,
title: const Text(
'帮助与反馈',
style: TextStyle(fontWeight: FontWeight.w500),
),
leading: Icon(
Icons.restaurant_menu,
color: Colors.blue[500],
),
),
Divider(height: 1,),
ListTile(
tileColor: Colors.white,
title: const Text(
'商家入驻',
style: TextStyle(fontWeight: FontWeight.w500),
),
leading: Icon(
Icons.restaurant_menu,
color: Colors.blue[500],
),
),
SizedBox(height: ScreenUtil().setHeight(20),),
ListTile(
tileColor: Colors.white,
title: const Text(
textAlign: TextAlign.center,
'切换账号',
style: TextStyle(fontWeight: FontWeight.w500),
),
),
SizedBox(height: ScreenUtil().setHeight(20),),
ListTile(
tileColor: Colors.white,
title: const Text(
textAlign: TextAlign.center,
'退出登录',
style: TextStyle(fontWeight: FontWeight.w500),
),
onTap: (){
Navigator.pushNamed(context,"login");
},
),
]
);
Widget protocol = Text(
"《证照信息》《平台服务协议》《个人信息共享清单》",
style: TextStyle(
fontSize: 12,
color: Colors.blue.shade800,
),
);
return Scaffold(
appBar: AppBar(
title: Text('个人中心', textAlign: TextAlign.center, style: TextStyle( color: Colors.black87),),
centerTitle: true,
backgroundColor: Colors.transparent,
elevation: 0,
),
backgroundColor: Colors.grey.shade300,
body: Column(
children: [
namecard,
SizedBox(height: ScreenUtil().setHeight(20),),
choice,
SizedBox(height: ScreenUtil().setHeight(30),),
protocol,
],
),
);
}
}