import 'dart:ui';
|
|
import 'package:flutter/cupertino.dart';
|
import 'package:flutter/material.dart';
|
import 'package:location/ui/common/browser.dart';
|
import 'package:location/ui/mine/advice.dart';
|
import 'package:location/ui/mine/permission.dart';
|
import 'package:location/ui/mine/settings.dart';
|
import 'package:location/ui/mine/share_to_friends.dart';
|
import 'package:location/ui/mine/try_functions.dart';
|
import 'package:location/utils/pageutils.dart';
|
import 'package:location/utils/ui_constant.dart';
|
|
void main() {
|
runApp(MyApp());
|
}
|
|
class MyApp extends StatelessWidget {
|
// This widget is the root of your application.
|
@override
|
Widget build(BuildContext context) {
|
return MaterialApp(
|
title: 'Flutter Demo',
|
theme: ThemeData(
|
// This is the theme of your application.
|
//
|
// Try running your application with "flutter run". You'll see the
|
// application has a blue toolbar. Then, without quitting the app, try
|
// changing the primarySwatch below to Colors.green and then invoke
|
// "hot reload" (press "r" in the console where you ran "flutter run",
|
// or simply save your changes to "hot reload" in a Flutter IDE).
|
// Notice that the counter didn't reset back to zero; the application
|
// is not restarted.
|
primaryColor: Color.fromARGB(255, 150, 150, 150)),
|
home: MinePage(title: ''),
|
);
|
}
|
}
|
|
class MinePage extends StatefulWidget {
|
MinePage({Key? key, required this.title}) : super(key: key);
|
|
// This widget is the home page of your application. It is stateful, meaning
|
// that it has a State object (defined below) that contains fields that affect
|
// how it looks.
|
|
// This class is the configuration for the state. It holds the values (in this
|
// case the title) provided by the parent (in this case the App widget) and
|
// used by the build method of the State. Fields in a Widget subclass are
|
// always marked "final".
|
|
final String title;
|
|
@override
|
_MinePageState createState() => _MinePageState();
|
}
|
|
class _MinePageState extends State<MinePage>
|
with SingleTickerProviderStateMixin {
|
bool isLogin = false;
|
bool isVIP = false;
|
List<Widget> list = [];
|
final List<Functions> data = [
|
Functions(
|
"assets/images/mine/icon_mine_permission.png", "权限设置", "permission"),
|
Functions("assets/images/mine/icon_mine_kefu.png", "在线客服", "kefu"),
|
Functions("assets/images/mine/icon_mine_footmark.png", "轨迹足迹", "footmark"),
|
Functions(
|
"assets/images/mine/icon_mine_functions.png", "功能使用", "functions"),
|
Functions("assets/images/mine/icon_mine_course.png", "使用教程", "course"),
|
Functions("assets/images/mine/icon_mine_share.png", "分享好友", "share"),
|
Functions("assets/images/mine/icon_mine_advice.png", "意见反馈", "advice"),
|
Functions("assets/images/mine/icon_mine_protocol.png", "用户协议", "protocol"),
|
Functions("assets/images/mine/icon_mine_privacy.png", "隐私政策", "privacy"),
|
Functions("assets/images/mine/icon_mine_setting.png", "更多设置", "setting"),
|
];
|
|
void _onClick(Functions function) {
|
switch (function.key) {
|
case "permission":
|
Navigator.of(context).push(CustomRouteSlide(PermissionPage(title: "")));
|
break;
|
case "kefu":
|
break;
|
case "footmark":
|
break;
|
case "functions":
|
Navigator.of(context)
|
.push(CustomRouteSlide(TryFunctionsPage(title: "")));
|
break;
|
case "course":
|
break;
|
case "share":
|
Navigator.of(context)
|
.push(CustomRouteSlide(ShareToFriendsPage(title: "")));
|
break;
|
case "advice":
|
Navigator.of(context).push(CustomRouteSlide(AdvicePage(title: "")));
|
break;
|
case "protocol":
|
Navigator.of(context).push(CustomRouteSlide(BrowserPage(title: "")));
|
break;
|
case "privacy":
|
break;
|
case "setting":
|
Navigator.of(context).push(CustomRouteSlide(SettingPage(title: "")));
|
break;
|
}
|
}
|
|
@override
|
void initState() {
|
data.forEach((item) {
|
list.add(InkWell(
|
child: Column(
|
children: [
|
Image.asset(item.icon, height: 31),
|
Container(
|
child: Text(
|
item.name,
|
style: new TextStyle(color:ColorConstant.theme),
|
),
|
margin: const EdgeInsets.fromLTRB(0, 13, 0, 0))
|
],
|
),
|
onTap: () {
|
_onClick(item);
|
},
|
));
|
});
|
|
super.initState();
|
}
|
|
void _login() {
|
print("登录");
|
setState(() {
|
isLogin = !isLogin;
|
isVIP = !isVIP;
|
});
|
}
|
|
Widget getLoginContentView() {
|
if (isLogin) {
|
return getUserInfoWidget();
|
} else {
|
return getLoginBtnWidget();
|
}
|
}
|
|
Widget getLoginBtnWidget() {
|
return Expanded(
|
child: InkWell(
|
onTap: () {
|
_login();
|
},
|
child: Container(
|
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
|
height: 38,
|
alignment: Alignment.center,
|
child: Text(
|
"登录/注册",
|
style: TextStyle(color: Colors.white, fontSize: 15),
|
),
|
decoration: BoxDecoration(
|
color: Color(0xFF0E96FF),
|
borderRadius: BorderRadius.all(Radius.elliptical(10, 10))),
|
),
|
));
|
}
|
|
Widget getUserInfoWidget() {
|
return Container(
|
height: 50,
|
padding: EdgeInsets.zero,
|
margin: EdgeInsets.fromLTRB(10, 0, 0, 0),
|
alignment: Alignment.topLeft,
|
child: Flex(
|
direction: Axis.vertical,
|
crossAxisAlignment: CrossAxisAlignment.start,
|
mainAxisAlignment: MainAxisAlignment.start,
|
children: [
|
Text(
|
"定位-981273",
|
style: TextStyle(color: Color(0xFF40C7FF), fontSize: 18),
|
),
|
Text(
|
"ID:128312",
|
style: TextStyle(color: Color(0xFF40C7FF), fontSize: 12),
|
),
|
],
|
),
|
);
|
}
|
|
List<Widget> getVIPContent() {
|
List<Widget> list = [];
|
list.add(Image.asset(
|
"assets/images/mine/icon_vip.png",
|
width: 44,
|
));
|
if (isVIP) {
|
list.add(Container(
|
margin: EdgeInsets.fromLTRB(6, 0, 0, 0),
|
child: Text.rich(TextSpan(
|
children: <TextSpan>[
|
TextSpan(text: '剩余'),
|
TextSpan(
|
text: '10', style: TextStyle(fontWeight: FontWeight.bold)),
|
TextSpan(text: '天到期'),
|
],
|
style: TextStyle(color: Colors.white, fontSize: 17.5),
|
))));
|
} else {
|
list.add(Container(
|
margin: EdgeInsets.fromLTRB(6, 0, 0, 0),
|
child: Image.asset(
|
"assets/images/mine/label_vip.png",
|
height: 20,
|
),
|
));
|
}
|
return list;
|
}
|
|
@override
|
Widget build(BuildContext context) {
|
return Scaffold(
|
backgroundColor: Colors.white,
|
body: SingleChildScrollView(
|
child: Column(
|
children: [
|
Container(
|
decoration: BoxDecoration(
|
image: DecorationImage(
|
image:
|
AssetImage("assets/images/mine/ic_mine_top_bg.png"),
|
fit: BoxFit.cover)),
|
height: 350,
|
width: 400,
|
padding: const EdgeInsets.all(10),
|
child: Column(
|
children: [
|
//登录与用户信息
|
Container(
|
margin: EdgeInsets.fromLTRB(0, 105, 0, 0),
|
padding: EdgeInsets.all(15),
|
alignment: Alignment.centerLeft,
|
child: Container(
|
height: 50,
|
child: Flex(
|
direction: Axis.horizontal,
|
children: [
|
Image.asset(
|
"assets/images/mine/icon_mine_default_portrait.png",
|
width: 50,
|
),
|
//登录按钮
|
getLoginContentView(),
|
//信息
|
],
|
)),
|
height: 105,
|
decoration: BoxDecoration(
|
color: Colors.white,
|
borderRadius:
|
BorderRadius.all(Radius.elliptical(10, 10)))),
|
//会员
|
Container(
|
margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
|
height: 105,
|
width: 400,
|
child: Stack(
|
children: [
|
Container(
|
padding: const EdgeInsets.fromLTRB(18.5, 0, 0, 0),
|
child: Flex(
|
direction: Axis.vertical,
|
mainAxisAlignment: MainAxisAlignment.center,
|
crossAxisAlignment: CrossAxisAlignment.start,
|
children: [
|
Flex(
|
direction: Axis.horizontal,
|
crossAxisAlignment: CrossAxisAlignment.center,
|
children: getVIPContent(),
|
),
|
Container(
|
margin: EdgeInsets.fromLTRB(0, 8, 0, 0),
|
child: Text(
|
"定位守护亲友，黑科技保驾护航",
|
style: TextStyle(
|
fontSize: 15, color: Colors.white),
|
),
|
)
|
],
|
),
|
),
|
Positioned(
|
right: 0,
|
top: 17,
|
child: InkWell(
|
onTap: () {
|
//查看详情或开通
|
print(isVIP ? "查看详情" : "开通会员");
|
},
|
child: Container(
|
width: 99,
|
height: 26,
|
alignment: Alignment.center,
|
child: Text(
|
isVIP ? "查看详情" : "立即开通",
|
style:
|
TextStyle(color: Color(0xFFD4A880)),
|
),
|
decoration: BoxDecoration(
|
color: Color(0xFFFAEAB9),
|
borderRadius: BorderRadius.only(
|
topLeft: Radius.circular(13),
|
bottomLeft: Radius.circular(13)),
|
boxShadow: [
|
BoxShadow(
|
color: Color(0x4D0E96FF),
|
blurRadius: 2.0,
|
offset:
|
Offset(0.0, 3.0), //阴影y轴偏移量
|
spreadRadius: 0 //阴影扩散程度
|
)
|
],
|
))))
|
],
|
),
|
decoration: BoxDecoration(
|
boxShadow: [
|
BoxShadow(
|
color: Color(0x4D0E96FF),
|
blurRadius: 5.0,
|
offset: Offset(0.0, 8.0), //阴影y轴偏移量
|
spreadRadius: 0 //阴影扩散程度
|
)
|
],
|
gradient: LinearGradient(
|
stops: [.5, 1],
|
colors: [Color(0xFF4699FF), Color(0xFF00DEFF)]),
|
color: Colors.white,
|
borderRadius:
|
BorderRadius.all(Radius.elliptical(10, 10))))
|
],
|
),
|
),
|
//功能区域
|
Container(
|
height: 340,
|
margin: const EdgeInsets.all(10),
|
padding: const EdgeInsets.all(10),
|
decoration: BoxDecoration(
|
borderRadius: BorderRadius.all(Radius.elliptical(10, 10)),
|
color: Color(0xFFF4FFFF)),
|
child: GridView(
|
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
|
crossAxisCount: 4, mainAxisSpacing: 10),
|
children: list),
|
),
|
],
|
)));
|
}
|
}
|
|
class Functions {
|
Functions(this.icon, this.name, this.key);
|
|
String icon;
|
String name;
|
String key;
|
}
|
