import 'dart:ui';
|
|
import 'package:flutter/cupertino.dart';
|
import 'package:flutter/material.dart';
|
import 'package:flutter_html/flutter_html.dart';
|
import 'package:location/ui/widget/button.dart';
|
import 'package:location/ui/widget/nav.dart';
|
import 'package:location/utils/pageutils.dart';
|
import 'package:location/utils/ui_constant.dart';
|
|
import 'advice_submit.dart';
|
import 'package:html/dom.dart' as dom;
|
|
void main() {
|
runApp(MyApp());
|
}
|
|
class MyApp extends StatelessWidget {
|
// This widget is the root of your application.
|
@override
|
Widget build(BuildContext context) {
|
return MaterialApp(
|
title: '登录',
|
theme: ThemeData(primaryColor: Color(0xFFF5F5F5)),
|
home: LoginPage(title: ''),
|
);
|
}
|
}
|
|
class LoginPage extends StatefulWidget {
|
LoginPage({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
|
_LoginPageState createState() => _LoginPageState();
|
}
|
|
class _LoginPageState extends State<LoginPage>
|
with SingleTickerProviderStateMixin {
|
bool oneKeyLogin = false;
|
bool checked = false;
|
TextEditingController? phoneController = TextEditingController();
|
TextEditingController? codeController = TextEditingController();
|
String phone = "";
|
String code = "";
|
|
@override
|
void initState() {
|
super.initState();
|
}
|
|
BoxDecoration getItemDecoration(Color bgColor, Color shadowColor) {
|
return BoxDecoration(
|
borderRadius: BorderRadius.all(Radius.elliptical(10, 10)),
|
color: bgColor,
|
boxShadow: [
|
BoxShadow(
|
color: shadowColor,
|
blurRadius: 2.0,
|
offset: Offset(0.0, 5.0), //阴影y轴偏移量
|
spreadRadius: 1 //阴影扩散程度
|
)
|
]);
|
}
|
|
@override
|
Widget build(BuildContext context) {
|
return Scaffold(
|
backgroundColor: Colors.white,
|
body: Stack(
|
children: [
|
Column(children: [
|
Expanded(
|
child: SingleChildScrollView(
|
child: Padding(
|
padding: EdgeInsets.fromLTRB(40, 100, 40, 14),
|
child: Column(
|
crossAxisAlignment: CrossAxisAlignment.center,
|
children: [
|
Image.asset(
|
"assets/images/login/ic_login_logo.png",
|
width: 131,
|
),
|
Container(
|
height: 70,
|
),
|
Container(
|
constraints: BoxConstraints(minHeight: 200),
|
child: getLoginContent()),
|
Container(
|
height: 30,
|
),
|
Text(
|
"其他方式登录",
|
style: TextStyle(
|
color: Color(0xFF666666), fontSize: 14),
|
),
|
Container(
|
height: 21,
|
),
|
Row(
|
mainAxisAlignment:
|
MainAxisAlignment.spaceAround,
|
children: [
|
getThirdLoginItem("微信登录",
|
"assets/images/login/ic_login_wx.png"),
|
getThirdLoginItem("QQ登录",
|
"assets/images/login/ic_login_qq.png"),
|
oneKeyLogin
|
? getThirdLoginItem("手机号登录",
|
"assets/images/login/ic_login_phone.png")
|
: getThirdLoginItem("一键登录",
|
"assets/images/login/ic_login_onekey.png"),
|
],
|
)
|
])))),
|
Row(children: [
|
|
Container(width: 25,),
|
RoundCheckBox(
|
value: checked,
|
onChanged: (value) {
|
setState(() {
|
checked = value;
|
});
|
},
|
),
|
Expanded(
|
child: Container(
|
child: Html(
|
data:
|
"<p>登录即表明同意<a href='http://www.baidu.com'> 用户协议 </a>和<a href='http://www.baidu.com'> 隐私政策 </a></p>",
|
style: {
|
"a": Style(
|
textDecoration: TextDecoration.none,
|
color: ColorConstant.theme),
|
"p": Style(
|
textDecoration: TextDecoration.none,
|
color: Color(0xFF999999),
|
fontSize: FontSize.medium)
|
},
|
onLinkTap: (String? url,
|
RenderContext context,
|
Map<String, String> attributes,
|
dom.Element? element) {
|
print(url);
|
}))),
|
])
|
]),
|
Positioned(
|
top: 30,
|
left: 20,
|
child: InkWell(
|
onTap: () {
|
Navigator.of(context).pop();
|
},
|
child: Icon(
|
Icons.close,
|
size: 30,
|
)))
|
],
|
));
|
}
|
|
Widget getLoginContent() {
|
return oneKeyLogin
|
? Container(
|
child: Column(children: [
|
MyFillButton(
|
"本机号码一键登录",
|
10,
|
height: 45,
|
fontSize: 17,
|
onClick: () {},
|
)
|
]))
|
: Column(
|
crossAxisAlignment: CrossAxisAlignment.start,
|
children: [
|
Container(
|
alignment: Alignment.centerLeft,
|
padding: EdgeInsets.fromLTRB(20, 0, 5, 0),
|
decoration: BoxDecoration(
|
color: const Color(0xFFF5F5F5),
|
borderRadius: BorderRadius.circular(10)),
|
child: Row(
|
crossAxisAlignment: CrossAxisAlignment.center,
|
children: [
|
Image.asset(
|
"assets/images/login/icon_phone.png",
|
width: 14,
|
height: 20,
|
),
|
Container(width: 14),
|
Expanded(
|
child: TextField(
|
style: TextStyle(color: Color(0xFF333333), fontSize: 17),
|
onChanged: (value) {
|
setState(() {
|
phone = value;
|
});
|
},
|
textAlign: TextAlign.start,
|
keyboardType: TextInputType.phone,
|
controller: phoneController,
|
decoration: InputDecoration(
|
hintText: "请输入手机号",
|
hintStyle:
|
TextStyle(color: Color(0xFFCCCCCC), fontSize: 17),
|
contentPadding: EdgeInsets.only(bottom: 3),
|
border: InputBorder.none,
|
focusedBorder: InputBorder.none,
|
),
|
)),
|
MyOutlineButton("获取验证码", 5,height: 30, padding: EdgeInsets.fromLTRB(5, 0, 5, 0),),
|
],
|
),
|
),
|
Container(height: 10),
|
Container(
|
alignment: Alignment.centerLeft,
|
padding: EdgeInsets.fromLTRB(20, 0, 20, 0),
|
decoration: BoxDecoration(
|
color: const Color(0xFFF5F5F5),
|
borderRadius: BorderRadius.circular(10)),
|
child: Row(
|
crossAxisAlignment: CrossAxisAlignment.center,
|
children: [
|
Image.asset(
|
"assets/images/login/icon_code.png",
|
width: 16,
|
),
|
Container(width: 14),
|
Expanded(
|
child: TextField(
|
style: TextStyle(color: Color(0xFF333333), fontSize: 17),
|
onChanged: (value) {
|
setState(() {
|
phone = value;
|
});
|
},
|
textAlign: TextAlign.start,
|
keyboardType: TextInputType.phone,
|
controller: codeController,
|
decoration: InputDecoration(
|
hintText: "请输入验证码",
|
hintStyle:
|
TextStyle(color: Color(0xFFCCCCCC), fontSize: 17),
|
contentPadding: EdgeInsets.only(bottom: 3),
|
border: InputBorder.none,
|
focusedBorder: InputBorder.none,
|
),
|
))
|
],
|
),
|
),
|
Container(height: 10),
|
const Text("未注册的手机号注册后系统会自动创建账户",
|
style: TextStyle(color: Color(0xFFA0A0A0), fontSize: 12)),
|
Container(height: 20),
|
MyFillButton(
|
"获取短信验证码",
|
10,
|
height: 45,
|
color: phone.length == 11
|
? const Color(0xFFFF2B4B)
|
: const Color(0xFFCBCBCB),
|
fontSize: 17,
|
onClick: () {},
|
),
|
],
|
);
|
}
|
|
Widget getThirdLoginItem(String name, String iconAsset) {
|
return InkWell(
|
onTap: () {
|
if (name == "一键登录" || name == "手机号登录") {
|
setState(() {
|
oneKeyLogin = !oneKeyLogin;
|
});
|
}
|
},
|
child: Container(
|
constraints: BoxConstraints(minWidth: 80),
|
child: Column(
|
children: [
|
Image.asset(
|
iconAsset,
|
height: 49,
|
),
|
Container(
|
height: 8,
|
),
|
Text(
|
name,
|
style: const TextStyle(color: Color(0xFF9DAAB3), fontSize: 12),
|
)
|
],
|
)),
|
);
|
}
|
}
|
