163 lines
5.8 KiB
Dart
163 lines
5.8 KiB
Dart
import 'package:app/core/constants/app_colors.dart';
|
|
import 'package:app/features/auth/pages/login_page.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:app/core/router/app_router.dart';
|
|
|
|
class LoginPageState extends State<LoginPage> {
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: Colors.white,
|
|
appBar: AppBar(
|
|
backgroundColor: Colors.transparent,
|
|
elevation: 0,
|
|
actions: [
|
|
// TextButton(
|
|
// onPressed: () {},
|
|
// child: const Text("找回密码", style: TextStyle(color: Colors.grey)),
|
|
// ),
|
|
],
|
|
),
|
|
body: SingleChildScrollView(
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 40),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
const SizedBox(height: 20),
|
|
const SizedBox(height: 24),
|
|
const Text(
|
|
"登陆账号",
|
|
style: TextStyle(
|
|
fontSize: 24,
|
|
fontWeight: FontWeight.bold,
|
|
color: Colors.black87,
|
|
),
|
|
),
|
|
const SizedBox(height: 60),
|
|
|
|
// 2. 账号输入框 (极简下划线风格)
|
|
TextField(
|
|
decoration: InputDecoration(
|
|
labelText: "账号 / 邮箱 / 手机号",
|
|
labelStyle: const TextStyle(color: Colors.grey, fontSize: 14),
|
|
floatingLabelStyle: const TextStyle(color: AppColors.primaryColor),
|
|
enabledBorder: UnderlineInputBorder(
|
|
borderSide: BorderSide(color: Colors.grey.shade300),
|
|
),
|
|
focusedBorder: const UnderlineInputBorder(
|
|
borderSide: BorderSide(color: AppColors.primaryColor, width: 2),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 25),
|
|
|
|
// 3. 密码输入框
|
|
TextField(
|
|
obscureText: true,
|
|
decoration: InputDecoration(
|
|
labelText: "请输入密码",
|
|
labelStyle: const TextStyle(color: Colors.grey, fontSize: 14),
|
|
floatingLabelStyle: const TextStyle(color: AppColors.primaryColor),
|
|
enabledBorder: UnderlineInputBorder(
|
|
borderSide: BorderSide(color: Colors.grey.shade300),
|
|
),
|
|
focusedBorder: const UnderlineInputBorder(
|
|
borderSide: BorderSide(color: AppColors.primaryColor, width: 2),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 60),
|
|
|
|
// 4. 登录按钮 (圆润大按钮)
|
|
SizedBox(
|
|
width: double.infinity,
|
|
height: 50,
|
|
child: ElevatedButton(
|
|
onPressed: () {},
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: AppColors.primaryColor,
|
|
foregroundColor: Colors.white,
|
|
elevation: 0,
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(10),
|
|
),
|
|
),
|
|
child: const Text(
|
|
"登 录",
|
|
style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 20),
|
|
|
|
// 5. 注册/切换登录方式
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
TextButton(
|
|
onPressed: () {
|
|
appRouter.push("/auth/register");
|
|
},
|
|
child: const Text(
|
|
"注册账号",
|
|
style: TextStyle(color: Color(0xFF576B95)),
|
|
), // 经典的链接蓝
|
|
),
|
|
const SizedBox(
|
|
height: 20,
|
|
child: VerticalDivider(color: Colors.grey),
|
|
),
|
|
TextButton(
|
|
onPressed: () {},
|
|
child: const Text(
|
|
"验证码登录",
|
|
style: TextStyle(color: Color(0xFF576B95)),
|
|
),
|
|
),
|
|
TextButton(
|
|
onPressed: () {},
|
|
child: const Text(
|
|
"找回密码",
|
|
style: TextStyle(color: Color(0xFF576B95)),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
|
|
const SizedBox(height: 80),
|
|
// 6. 底部协议 (社交App必有)
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Checkbox(
|
|
value: true,
|
|
activeColor: AppColors.primaryColor,
|
|
onChanged: (v) {},
|
|
),
|
|
const Text(
|
|
"我已阅读并同意",
|
|
style: TextStyle(color: Colors.grey, fontSize: 12),
|
|
),
|
|
const Text(
|
|
"《用户协议》",
|
|
style: TextStyle(color: Color(0xFF576B95), fontSize: 12),
|
|
),
|
|
const Text(
|
|
"与",
|
|
style: TextStyle(color: Colors.grey, fontSize: 12),
|
|
),
|
|
const Text(
|
|
"《隐私政策》",
|
|
style: TextStyle(color: Color(0xFF576B95), fontSize: 12),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
} |