qzl/social-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(calendar): add dayweek, month and event detail screens

Browse Source
This commit is contained in:
qzl
2026-02-25 11:12:24 +08:00
parent 567b3d6712
commit b397d51dcc
3 changed files with 314 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/lib/features/calendar/ui/screens/calendar_event_detail_screen.dart
+312
View File
@@ -0,0 +1,312 @@
import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart';
import '../../../../core/theme/design_tokens.dart';
class CalendarEventDetailScreen extends StatelessWidget {
const CalendarEventDetailScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFFF8FAFC),
body: SafeArea(
child: Column(
children: [
_buildHeader(context),
Expanded(child: _buildDetailOverlay()),
_buildInputContainer(),
],
),
),
);
}
Widget _buildHeader(BuildContext context) {
return SizedBox(
height: 64,
child: Padding(
padding: const EdgeInsets.only(left: 16, right: 16, top: 12, bottom: 8),
child: Row(
children: [
GestureDetector(
onTap: () => Navigator.of(context).pop(),
child: Container(
width: 36,
height: 36,
decoration: BoxDecoration(
color: const Color(0xFFF8FAFF),
borderRadius: BorderRadius.circular(18),
border: Border.all(color: const Color(0xFFDEE7F6)),
),
child: const Icon(
LucideIcons.chevronLeft,
size: 16,
color: AppColors.slate700,
),
),
),
],
),
),
);
}
Widget _buildDetailOverlay() {
return Padding(
padding: const EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 12),
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(24),
border: Border.all(color: const Color(0xFFD8E3F5)),
),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildTitleRow(),
const SizedBox(height: 14),
Container(height: 1, color: const Color(0xFFE5E7EB)),
const SizedBox(height: 14),
_buildDetailField('日期', '2026年2月9日 周一'),
const SizedBox(height: 14),
_buildDetailField('时间范围', '16:00 - 17:30'),
const SizedBox(height: 14),
_buildDetailField('提醒时间', '开始前30分钟'),
const SizedBox(height: 14),
_buildColorField(),
const SizedBox(height: 14),
_buildDetailField('邀请人', 'Qiuzh'),
const SizedBox(height: 14),
_buildNotesField(),
],
),
),
),
);
}
Widget _buildTitleRow() {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
const Icon(
LucideIcons.calendarCheck2,
size: 18,
color: AppColors.blue600,
),
const SizedBox(width: 10),
const Text(
'购票提醒',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w700,
color: AppColors.slate900,
),
),
],
),
Row(
children: [
Container(
width: 36,
height: 36,
decoration: BoxDecoration(
color: const Color(0xFFF8FAFF),
borderRadius: BorderRadius.circular(12),
border: Border.all(color: const Color(0xFFDCE5F4)),
),
child: const Icon(
LucideIcons.pencil,
size: 18,
color: AppColors.slate600,
),
),
const SizedBox(width: 8),
Container(
width: 36,
height: 36,
decoration: BoxDecoration(
color: const Color(0xFFFFF1F2),
borderRadius: BorderRadius.circular(12),
border: Border.all(color: const Color(0xFFFECACA)),
),
child: const Icon(
LucideIcons.trash2,
size: 18,
color: AppColors.red500,
),
),
],
),
],
);
}
Widget _buildDetailField(String label, String value) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
label,
style: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600,
color: AppColors.slate400,
),
),
const SizedBox(height: 4),
Text(
value,
style: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
color: AppColors.slate900,
),
),
],
);
}
Widget _buildColorField() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'日程颜色',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600,
color: AppColors.slate400,
),
),
const SizedBox(height: 6),
Row(
children: [
_buildColorOption(const Color(0xFF3B82F6), isSelected: true),
const SizedBox(width: 10),
_buildColorOption(const Color(0xFF8B5CF6)),
const SizedBox(width: 10),
_buildColorOption(const Color(0xFF10B981)),
const SizedBox(width: 10),
_buildColorOption(const Color(0xFFF59E0B)),
const SizedBox(width: 10),
_buildColorOption(const Color(0xFFEF4444)),
],
),
],
);
}
Widget _buildColorOption(Color color, {bool isSelected = false}) {
return Container(
width: 28,
height: 28,
decoration: BoxDecoration(
color: color,
shape: BoxShape.circle,
border: isSelected
? Border.all(color: AppColors.slate900, width: 2)
: null,
),
child: isSelected
? const Icon(Icons.check, size: 16, color: Colors.white)
: null,
);
}
Widget _buildNotesField() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'备注',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600,
color: AppColors.slate400,
),
),
const SizedBox(height: 6),
Container(
width: double.infinity,
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: const Color(0xFFFDFEFF),
borderRadius: BorderRadius.circular(12),
border: Border.all(color: const Color(0xFFDCE5F4)),
),
child: const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'记得提前准备好身份证',
style: TextStyle(fontSize: 14, color: AppColors.slate700),
),
SizedBox(height: 8),
Text(
'出发前检查车票信息',
style: TextStyle(fontSize: 14, color: AppColors.slate700),
),
],
),
),
],
);
}
Widget _buildInputContainer() {
return Container(
height: 80,
padding: const EdgeInsets.all(16),
color: const Color(0xFFF8FAFC),
child: Row(
children: [
Container(
width: 36,
height: 36,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(18),
border: Border.all(color: const Color(0xFFE2E8F0)),
),
child: const Icon(
LucideIcons.plus,
size: 20,
color: AppColors.slate500,
),
),
const SizedBox(width: 8),
Expanded(
child: Container(
height: 48,
padding: const EdgeInsets.symmetric(horizontal: 16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(24),
),
child: Row(
children: [
const Expanded(
child: Text(
'输入消息...',
style: TextStyle(fontSize: 14, color: AppColors.slate400),
),
),
const Icon(
LucideIcons.mic,
size: 20,
color: AppColors.slate500,
),
],
),
),
),
],
),
);
}
}
apps/lib/features/calendar/ui/screens/calendar_month_screen.dart
+1
View File
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:lucide_icons/lucide_icons.dart'; import 'package:lucide_icons/lucide_icons.dart';
import '../../../../core/theme/design_tokens.dart'; import '../../../../core/theme/design_tokens.dart';
import '../widgets/bottom_dock.dart'; import '../widgets/bottom_dock.dart';
apps/lib/features/calendar/ui/widgets/bottom_dock.dart
+1 -6
View File
@@ -1,6 +1,5 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart'; import 'package:lucide_icons/lucide_icons.dart';
import '../../../../core/theme/design_tokens.dart';
enum DockTab { todo, calendar } enum DockTab { todo, calendar }
@@ -94,11 +93,7 @@ class BottomDock extends StatelessWidget {
borderRadius: BorderRadius.circular(18), borderRadius: BorderRadius.circular(18),
border: Border.all(color: const Color(0xFFC9D8EE)), border: Border.all(color: const Color(0xFFC9D8EE)),
), ),
child: const Icon( child: const Icon(LucideIcons.home, size: 20, color: Color(0xFF1E3A8A)),
LucideIcons.house,
size: 20,
color: Color(0xFF1E3A8A),
),
), ),
); );
} }