feat: 新增登录页 + 主题改橙红对齐设计稿
- 新增登录页（Google / 手机号 / 邮箱 + 游客浏览 + 首登送金币） - seedColor 改橙红 #FF5B3D，themeMode 改 dark，背景对齐设计稿 #0B0C10 - app 启动入口改为 LoginPage
This commit is contained in:
Zhou Weidong committed
1 parent
eaf8fb4371
commit
015677d1a8
2 files changed
+348
-7
No files matched your search
+7
-7
@@ -11,7 +11,7 @@ import 'core/data/services/engagement_controller.dart';
|
||||
import 'core/data/services/playback_session.dart';
|
||||
import 'core/data/services/video_player_port.dart';
|
||||
import 'l10n/app_localizations.dart';
|
||||
import 'pages/home/home_view.dart';
|
||||
import 'pages/login/login_view.dart';
|
||||
|
||||
class LumaDramaApp extends StatelessWidget {
|
||||
const LumaDramaApp({super.key, this.playerFactory = VideoPlayerPort.new});
|
||||
@@ -49,23 +49,23 @@ class LumaDramaApp extends StatelessWidget {
|
||||
return supported.first;
|
||||
},
|
||||
debugShowCheckedModeBanner: false,
|
||||
themeMode: ThemeMode.system,
|
||||
themeMode: ThemeMode.dark,
|
||||
theme: ThemeData(
|
||||
useMaterial3: true,
|
||||
colorScheme: ColorScheme.fromSeed(
|
||||
seedColor: const Color(0xFF6D4AFF),
|
||||
seedColor: const Color(0xFFFF5B3D),
|
||||
),
|
||||
scaffoldBackgroundColor: const Color(0xFFF8F7FC),
|
||||
scaffoldBackgroundColor: const Color(0xFF0B0C10),
|
||||
),
|
||||
darkTheme: ThemeData(
|
||||
useMaterial3: true,
|
||||
colorScheme: ColorScheme.fromSeed(
|
||||
seedColor: const Color(0xFF9B86FF),
|
||||
seedColor: const Color(0xFFFF5B3D),
|
||||
brightness: Brightness.dark,
|
||||
),
|
||||
scaffoldBackgroundColor: const Color(0xFF101019),
|
||||
scaffoldBackgroundColor: const Color(0xFF0B0C10),
|
||||
),
|
||||
home: const HomePage(),
|
||||
home: const LoginPage(),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
@@ -0,0 +1,341 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../home/home_view.dart';
|
||||
|
||||
/// 登录页：Google / 手机号 / 邮箱 三种登录入口 + 游客浏览。
|
||||
/// 当前为 UI 占位实现，真实登录逻辑在接入后端 /app/auth/** 后补充。
|
||||
class LoginPage extends StatefulWidget {
|
||||
const LoginPage({super.key});
|
||||
|
||||
@override
|
||||
State<LoginPage> createState() => _LoginPageState();
|
||||
}
|
||||
|
||||
class _LoginPageState extends State<LoginPage> {
|
||||
static const _orange = Color(0xFFFF5B3D);
|
||||
static const _purple = Color(0xFF9278EA);
|
||||
|
||||
void _enterHome() {
|
||||
Navigator.of(context).pushReplacement(
|
||||
MaterialPageRoute<void>(builder: (_) => const HomePage()),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SafeArea(
|
||||
child: Column(
|
||||
children: [
|
||||
// 顶部：关闭 + 游客浏览
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
_IconButton(icon: Icons.close, onTap: () {}),
|
||||
TextButton(
|
||||
onPressed: _enterHome,
|
||||
style: TextButton.styleFrom(
|
||||
foregroundColor: Colors.white54,
|
||||
backgroundColor: Colors.white.withValues(alpha: 0.05),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 14,
|
||||
vertical: 8,
|
||||
),
|
||||
shape: const StadiumBorder(),
|
||||
),
|
||||
child: const Text('Guest Explore'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
// 中央内容
|
||||
Expanded(
|
||||
child: Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 28),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const _BrandLogo(),
|
||||
const SizedBox(height: 20),
|
||||
const Text(
|
||||
'DramaPulse',
|
||||
style: TextStyle(
|
||||
fontSize: 30,
|
||||
fontWeight: FontWeight.w800,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
const Text(
|
||||
'Sign in to sync your progress and coins',
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
color: Colors.white54,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 36),
|
||||
_GoogleButton(onTap: _enterHome),
|
||||
const SizedBox(height: 14),
|
||||
_DarkButton(
|
||||
icon: Icons.phone_iphone,
|
||||
iconColor: _orange,
|
||||
label: 'Continue with Phone Number',
|
||||
onTap: _enterHome,
|
||||
),
|
||||
const SizedBox(height: 14),
|
||||
_DarkButton(
|
||||
icon: Icons.email_outlined,
|
||||
iconColor: _purple,
|
||||
label: 'Continue with Email',
|
||||
onTap: _enterHome,
|
||||
),
|
||||
const SizedBox(height: 32),
|
||||
const _BonusPill(),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
// 底部协议
|
||||
const Padding(
|
||||
padding: EdgeInsets.only(bottom: 24),
|
||||
child: Text(
|
||||
'By continuing, you agree to DramaPulse\'s\n'
|
||||
'Terms of Service · Privacy Policy · Content Policy',
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(fontSize: 11, color: Colors.white38),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _IconButton extends StatelessWidget {
|
||||
const _IconButton({required this.icon, required this.onTap});
|
||||
|
||||
final IconData icon;
|
||||
final VoidCallback onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return InkWell(
|
||||
onTap: onTap,
|
||||
borderRadius: BorderRadius.circular(24),
|
||||
child: Container(
|
||||
width: 40,
|
||||
height: 40,
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white.withValues(alpha: 0.05),
|
||||
border: Border.all(color: Colors.white12),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: Icon(icon, color: Colors.white54, size: 20),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _BrandLogo extends StatelessWidget {
|
||||
const _BrandLogo();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
width: 80,
|
||||
height: 80,
|
||||
decoration: BoxDecoration(
|
||||
gradient: const LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [Color(0xFFFF5B3D), Color(0xFFD8536C), Color(0xFF9278EA)],
|
||||
),
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
border: Border.all(color: Colors.white24),
|
||||
),
|
||||
child: const Icon(Icons.play_arrow_rounded, color: Colors.white, size: 40),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _GoogleButton extends StatelessWidget {
|
||||
const _GoogleButton({required this.onTap});
|
||||
|
||||
final VoidCallback onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return _AuthButton(
|
||||
onTap: onTap,
|
||||
background: Colors.white,
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
const _GoogleG(),
|
||||
const SizedBox(width: 12),
|
||||
Text(
|
||||
'Continue with Google',
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Colors.grey.shade900,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// 简化版 Google「G」logo。
|
||||
class _GoogleG extends StatelessWidget {
|
||||
const _GoogleG();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
width: 20,
|
||||
height: 20,
|
||||
decoration: const BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: Color(0xFF4285F4),
|
||||
),
|
||||
child: const Center(
|
||||
child: Text(
|
||||
'G',
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _DarkButton extends StatelessWidget {
|
||||
const _DarkButton({
|
||||
required this.icon,
|
||||
required this.iconColor,
|
||||
required this.label,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
final IconData icon;
|
||||
final Color iconColor;
|
||||
final String label;
|
||||
final VoidCallback onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return _AuthButton(
|
||||
onTap: onTap,
|
||||
background: const Color(0xFF161822),
|
||||
border: const Color(0xFF232634),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(icon, color: iconColor, size: 20),
|
||||
const SizedBox(width: 12),
|
||||
Text(
|
||||
label,
|
||||
style: const TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _AuthButton extends StatelessWidget {
|
||||
const _AuthButton({
|
||||
required this.onTap,
|
||||
required this.background,
|
||||
required this.child,
|
||||
this.border,
|
||||
});
|
||||
|
||||
final VoidCallback onTap;
|
||||
final Color background;
|
||||
final Color? border;
|
||||
final Widget child;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return SizedBox(
|
||||
width: double.infinity,
|
||||
height: 52,
|
||||
child: Material(
|
||||
color: background,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
side: border == null ? BorderSide.none : BorderSide(color: border!),
|
||||
),
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
child: child,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _BonusPill extends StatelessWidget {
|
||||
const _BonusPill();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white.withValues(alpha: 0.04),
|
||||
border: Border.all(color: Colors.white12),
|
||||
borderRadius: BorderRadius.circular(999),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Container(
|
||||
width: 6,
|
||||
height: 6,
|
||||
decoration: const BoxDecoration(
|
||||
color: Color(0xFF34D399),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
const Text(
|
||||
'Get ',
|
||||
style: TextStyle(fontSize: 11, color: Colors.white54),
|
||||
),
|
||||
const Text(
|
||||
'100 Free Bonus Coins',
|
||||
style: TextStyle(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
const Text(
|
||||
' upon first sign-in',
|
||||
style: TextStyle(fontSize: 11, color: Colors.white54),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user