183 lines
5.2 KiB
Dart
183 lines
5.2 KiB
Dart
|
|
import 'package:flutter/material.dart';
|
||
|
|
import 'package:go_router/go_router.dart';
|
||
|
|
import '../../../../core/theme/design_tokens.dart';
|
||
|
|
import '../../../../shared/widgets/app_button.dart';
|
||
|
|
|
||
|
|
class LoginCodeScreen extends StatefulWidget {
|
||
|
|
const LoginCodeScreen({super.key});
|
||
|
|
|
||
|
|
@override
|
||
|
|
State<LoginCodeScreen> createState() => _LoginCodeScreenState();
|
||
|
|
}
|
||
|
|
|
||
|
|
class _LoginCodeScreenState extends State<LoginCodeScreen> {
|
||
|
|
final _codeController = TextEditingController();
|
||
|
|
|
||
|
|
@override
|
||
|
|
void dispose() {
|
||
|
|
_codeController.dispose();
|
||
|
|
super.dispose();
|
||
|
|
}
|
||
|
|
|
||
|
|
@override
|
||
|
|
Widget build(BuildContext context) {
|
||
|
|
return Scaffold(
|
||
|
|
backgroundColor: AppColors.background,
|
||
|
|
body: SafeArea(
|
||
|
|
child: Padding(
|
||
|
|
padding: const EdgeInsets.symmetric(horizontal: 24),
|
||
|
|
child: Column(
|
||
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
||
|
|
children: [
|
||
|
|
Expanded(
|
||
|
|
child: Center(
|
||
|
|
child: Column(
|
||
|
|
mainAxisSize: MainAxisSize.min,
|
||
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
||
|
|
children: [
|
||
|
|
_buildAppIcon(),
|
||
|
|
const SizedBox(height: 24),
|
||
|
|
_buildAppTitle(),
|
||
|
|
const SizedBox(height: 32),
|
||
|
|
_buildFormContainer(),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
_buildFooter(),
|
||
|
|
const SizedBox(height: 24),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
Widget _buildAppIcon() {
|
||
|
|
return Container(
|
||
|
|
width: 104,
|
||
|
|
height: 104,
|
||
|
|
decoration: BoxDecoration(
|
||
|
|
color: AppColors.appIconRing,
|
||
|
|
borderRadius: BorderRadius.circular(52),
|
||
|
|
border: Border.all(color: AppColors.appIconBorder, width: 1),
|
||
|
|
),
|
||
|
|
child: Center(
|
||
|
|
child: ClipRRect(
|
||
|
|
borderRadius: BorderRadius.circular(38),
|
||
|
|
child: Image.asset(
|
||
|
|
'assets/images/logo.png',
|
||
|
|
width: 76,
|
||
|
|
height: 76,
|
||
|
|
fit: BoxFit.cover,
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
Widget _buildAppTitle() {
|
||
|
|
return const Text(
|
||
|
|
'linksy',
|
||
|
|
style: TextStyle(
|
||
|
|
fontFamily: 'Playfair Display',
|
||
|
|
fontSize: 34,
|
||
|
|
fontWeight: FontWeight.w700,
|
||
|
|
fontStyle: FontStyle.italic,
|
||
|
|
color: AppColors.appTitle,
|
||
|
|
letterSpacing: 0.5,
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
Widget _buildFormContainer() {
|
||
|
|
return SizedBox(
|
||
|
|
width: 327,
|
||
|
|
child: Column(
|
||
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||
|
|
children: [
|
||
|
|
Column(
|
||
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||
|
|
children: [
|
||
|
|
const Text(
|
||
|
|
'邮箱验证码',
|
||
|
|
style: TextStyle(
|
||
|
|
fontSize: 13,
|
||
|
|
fontWeight: FontWeight.w500,
|
||
|
|
color: Color(0xFF475569),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
const SizedBox(height: 6),
|
||
|
|
Row(
|
||
|
|
children: [
|
||
|
|
Expanded(
|
||
|
|
child: SizedBox(
|
||
|
|
height: 40,
|
||
|
|
child: TextField(
|
||
|
|
controller: _codeController,
|
||
|
|
keyboardType: TextInputType.number,
|
||
|
|
decoration: const InputDecoration(
|
||
|
|
hintText: '输入验证码',
|
||
|
|
contentPadding: EdgeInsets.symmetric(
|
||
|
|
horizontal: 12,
|
||
|
|
vertical: 10,
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
const SizedBox(width: 8),
|
||
|
|
SizedBox(
|
||
|
|
width: 112,
|
||
|
|
height: 40,
|
||
|
|
child: OutlinedButton(
|
||
|
|
onPressed: () {},
|
||
|
|
style: OutlinedButton.styleFrom(
|
||
|
|
backgroundColor: AppColors.background,
|
||
|
|
side: const BorderSide(color: AppColors.input),
|
||
|
|
shape: RoundedRectangleBorder(
|
||
|
|
borderRadius: BorderRadius.circular(6),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
child: const Text(
|
||
|
|
'发送验证码',
|
||
|
|
style: TextStyle(
|
||
|
|
fontSize: 13,
|
||
|
|
fontWeight: FontWeight.w500,
|
||
|
|
color: AppColors.slate500,
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
const SizedBox(height: 12),
|
||
|
|
AppButton(text: '登录', onPressed: () {}),
|
||
|
|
const SizedBox(height: 12),
|
||
|
|
AppButton(
|
||
|
|
text: '使用密码登录',
|
||
|
|
isOutlined: true,
|
||
|
|
onPressed: () => context.pop(),
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
Widget _buildFooter() {
|
||
|
|
return GestureDetector(
|
||
|
|
onTap: () => context.push('/register'),
|
||
|
|
child: const Text(
|
||
|
|
'还没有账号?去注册',
|
||
|
|
style: TextStyle(
|
||
|
|
fontSize: 14,
|
||
|
|
fontWeight: FontWeight.w500,
|
||
|
|
color: AppColors.slate500,
|
||
|
|
),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|