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

refactor(apps): 主题系统迁移至 ColorScheme + 扩展架构并支持 Dark Mode

Browse Source
This commit is contained in:
qzl
2026-03-27 19:07:39 +08:00
parent ecc1ec6ce4
commit ae29a8209b
146 changed files with 4301 additions and 3200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/lib/features/calendar/presentation/widgets/bottom_dock.dart
-139
View File
@@ -1,139 +0,0 @@
import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart';
import '../../../../core/theme/design_tokens.dart';
enum DockTab { todo, calendar }
class BottomDock extends StatelessWidget {
final DockTab activeTab;
final VoidCallback? onTodoTap;
final VoidCallback? onCalendarTap;
final VoidCallback? onHomeTap;
const BottomDock({
super.key,
required this.activeTab,
this.onTodoTap,
this.onCalendarTap,
this.onHomeTap,
});
@override
Widget build(BuildContext context) {
return Container(
height: 72,
padding: const EdgeInsets.only(
left: AppSpacing.xl,
right: AppSpacing.xl,
top: AppSpacing.md,
bottom: AppSpacing.sm,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [_buildToggle(), _buildHomeBtn()],
),
);
}
Widget _buildToggle() {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 4),
decoration: BoxDecoration(
color: AppColors.todoToggleBg,
borderRadius: BorderRadius.circular(AppRadius.xxl),
border: Border.all(color: AppColors.todoToggleBorder),
boxShadow: [
BoxShadow(
color: AppColors.slate200.withValues(alpha: 0.45),
blurRadius: AppRadius.sm,
offset: const Offset(0, AppSpacing.xs / 2),
),
],
),
child: Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
_buildToggleItem(
icon: LucideIcons.listTodo,
isActive: activeTab == DockTab.todo,
onTap: onTodoTap,
),
const SizedBox(width: 4),
_buildToggleItem(
icon: LucideIcons.calendar,
isActive: activeTab == DockTab.calendar,
onTap: onCalendarTap,
),
],
),
);
}
Widget _buildToggleItem({
required IconData icon,
required bool isActive,
VoidCallback? onTap,
}) {
return Material(
color: Colors.transparent,
child: InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(AppRadius.xl),
child: AnimatedContainer(
duration: const Duration(milliseconds: 140),
curve: Curves.easeOut,
width: 44,
height: 44,
decoration: BoxDecoration(
color: isActive ? AppColors.todoToggleActiveBg : Colors.transparent,
borderRadius: BorderRadius.circular(AppRadius.xl),
border: Border.all(
color: isActive
? AppColors.todoToggleActiveBorder
: Colors.transparent,
),
),
child: Icon(
icon,
size: 20,
color: isActive ? AppColors.blue600 : AppColors.slate700,
),
),
),
);
}
Widget _buildHomeBtn() {
return Material(
color: Colors.transparent,
child: InkWell(
key: const ValueKey('bottom_dock_home_button'),
onTap: onHomeTap,
borderRadius: BorderRadius.circular(AppRadius.xl),
child: Container(
width: 44,
height: 44,
decoration: BoxDecoration(
color: AppColors.todoToggleBg,
borderRadius: BorderRadius.circular(AppRadius.xl),
border: Border.all(color: AppColors.todoToggleBorder),
boxShadow: [
BoxShadow(
color: AppColors.slate200.withValues(alpha: 0.42),
blurRadius: AppRadius.sm,
offset: const Offset(0, AppSpacing.xs / 2),
),
],
),
child: const Icon(
LucideIcons.home,
size: 20,
color: AppColors.slate700,
),
),
),
);
}
}
apps/lib/features/calendar/presentation/widgets/calendar_share_dialog.dart
+12 -4
View File
@@ -32,7 +32,9 @@ class CalendarShareDialog extends StatefulWidget {
return showModalBottomSheet(
context: context,
isScrollControlled: true,
backgroundColor: Colors.transparent,
backgroundColor: Theme.of(
context,
).colorScheme.surface.withValues(alpha: 0),
builder: (context) => CalendarShareDialog(
eventId: eventId,
eventTitle: eventTitle,
@@ -108,13 +110,14 @@ class _CalendarShareDialogState extends State<CalendarShareDialog> {
@override
Widget build(BuildContext context) {
final l10n = context.l10n;
final colorScheme = Theme.of(context).colorScheme;
return Container(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom,
),
decoration: BoxDecoration(
color: AppColors.background,
color: colorScheme.surface,
borderRadius: const BorderRadius.vertical(
top: Radius.circular(AppRadius.lg),
),
@@ -200,6 +203,7 @@ class _CalendarShareDialogState extends State<CalendarShareDialog> {
bool value,
ValueChanged<bool>? onChanged,
) {
final colorScheme = Theme.of(context).colorScheme;
final enabled = onChanged != null;
return Padding(
padding: const EdgeInsets.symmetric(vertical: AppSpacing.xs),
@@ -211,13 +215,17 @@ class _CalendarShareDialogState extends State<CalendarShareDialog> {
children: [
Text(
title,
style: TextStyle(color: enabled ? null : Colors.grey),
style: TextStyle(
color: enabled
? colorScheme.onSurface
: colorScheme.onSurfaceVariant,
),
),
Text(
description,
style: TextStyle(
fontSize: 12,
color: enabled ? Colors.grey : Colors.grey.shade400,
color: colorScheme.onSurfaceVariant,
),
),
],
apps/lib/features/calendar/presentation/widgets/create_event_sheet.dart
+66 -45
View File
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart';
import 'package:social_app/core/l10n/l10n.dart';
import '../../../../app/di/injection.dart';
import '../../../../features/notification/data/services/local_notification_service.dart';
import '../../../../data/services/local_notification_service.dart';
import '../../../../core/theme/design_tokens.dart';
import '../../../../shared/widgets/app_loading_indicator.dart';
import '../../../../shared/widgets/app_selection_sheet.dart';
@@ -11,8 +11,10 @@ import '../../../../shared/widgets/back_title_page_header.dart';
import '../../../../shared/widgets/toast/toast.dart';
import '../../../../shared/widgets/toast/toast_type.dart';
import 'date_time_picker_sheet.dart';
import '../../data/models/schedule_item_model.dart';
import '../../data/services/calendar_service.dart';
import '../../../../data/repositories/models/schedule_item_model.dart';
import '../../../../data/services/calendar_service.dart';
final _defaultColors = AppColorPalette.light.eventPresetColors;
class CreateEventSheet extends StatefulWidget {
final DateTime? initialDate;
@@ -36,7 +38,9 @@ class CreateEventSheet extends StatefulWidget {
return showModalBottomSheet(
context: context,
isScrollControlled: true,
backgroundColor: Colors.transparent,
backgroundColor: Theme.of(
context,
).colorScheme.surface.withValues(alpha: 0),
builder: (context) =>
CreateEventSheet(initialDate: initialDate, onSaved: onSaved),
);
@@ -50,7 +54,9 @@ class CreateEventSheet extends StatefulWidget {
return showModalBottomSheet(
context: context,
isScrollControlled: true,
backgroundColor: Colors.transparent,
backgroundColor: Theme.of(
context,
).colorScheme.surface.withValues(alpha: 0),
builder: (context) =>
CreateEventSheet(editingEvent: event, onSaved: onSaved),
);
@@ -149,12 +155,13 @@ class _CreateEventSheetState extends State<CreateEventSheet>
@override
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
if (widget.pageMode) {
return GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () => FocusScope.of(context).unfocus(),
child: Container(
color: AppColors.background,
color: colorScheme.surface,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
@@ -175,8 +182,8 @@ class _CreateEventSheetState extends State<CreateEventSheet>
),
child: Container(
height: MediaQuery.of(context).size.height * 0.85,
decoration: const BoxDecoration(
color: AppColors.white,
decoration: BoxDecoration(
color: colorScheme.surface,
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
),
child: Column(
@@ -188,7 +195,7 @@ class _CreateEventSheetState extends State<CreateEventSheet>
width: AppSpacing.xl + AppSpacing.sm,
height: AppSpacing.xs,
decoration: BoxDecoration(
color: AppColors.slate200,
color: colorScheme.outlineVariant,
borderRadius: BorderRadius.circular(AppRadius.full),
),
),
@@ -204,6 +211,7 @@ class _CreateEventSheetState extends State<CreateEventSheet>
}
Widget _buildPageHeader() {
final colorScheme = Theme.of(context).colorScheme;
return BackTitlePageHeader(
title: _isEditing
? context.l10n.calendarCreateEditTitle
@@ -226,14 +234,16 @@ class _CreateEventSheetState extends State<CreateEventSheet>
? const AppLoadingIndicator(
variant: AppLoadingVariant.button,
size: 18,
trackColor: AppColors.blue200,
trackColor: null,
)
: Text(
context.l10n.commonSave,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: enabled ? AppColors.blue600 : AppColors.slate400,
color: enabled
? colorScheme.primary
: colorScheme.outline,
),
),
),
@@ -244,6 +254,7 @@ class _CreateEventSheetState extends State<CreateEventSheet>
}
Widget _buildHeader() {
final colorScheme = Theme.of(context).colorScheme;
return Container(
height: 56,
padding: const EdgeInsets.symmetric(horizontal: 16),
@@ -261,10 +272,10 @@ class _CreateEventSheetState extends State<CreateEventSheet>
borderRadius: BorderRadius.circular(AppRadius.full),
),
),
child: const Icon(
child: Icon(
LucideIcons.x,
size: AppSpacing.xxl,
color: AppColors.slate700,
color: colorScheme.onSurfaceVariant,
),
),
),
@@ -272,10 +283,10 @@ class _CreateEventSheetState extends State<CreateEventSheet>
_isEditing
? context.l10n.calendarCreateEditTitle
: context.l10n.calendarCreateNewTitle,
style: const TextStyle(
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w600,
color: AppColors.slate900,
color: colorScheme.onSurface,
),
),
ValueListenableBuilder<TextEditingValue>(
@@ -297,7 +308,7 @@ class _CreateEventSheetState extends State<CreateEventSheet>
? const AppLoadingIndicator(
variant: AppLoadingVariant.button,
size: 18,
trackColor: AppColors.blue200,
trackColor: null,
)
: Text(
context.l10n.commonSave,
@@ -305,8 +316,8 @@ class _CreateEventSheetState extends State<CreateEventSheet>
fontSize: 17,
fontWeight: FontWeight.w600,
color: enabled
? AppColors.blue600
: AppColors.slate400,
? colorScheme.primary
: colorScheme.outline,
),
),
),
@@ -319,15 +330,16 @@ class _CreateEventSheetState extends State<CreateEventSheet>
}
Widget _buildTabBar() {
final colorScheme = Theme.of(context).colorScheme;
return Container(
decoration: const BoxDecoration(
border: Border(bottom: BorderSide(color: AppColors.border)),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: colorScheme.outlineVariant)),
),
child: TabBar(
controller: _tabController,
labelColor: AppColors.blue600,
unselectedLabelColor: AppColors.slate600,
indicatorColor: AppColors.blue600,
labelColor: colorScheme.primary,
unselectedLabelColor: colorScheme.onSurfaceVariant,
indicatorColor: colorScheme.primary,
tabs: [
Tab(text: context.l10n.calendarCreateTabBasic),
Tab(text: context.l10n.calendarCreateTabAdvanced),
@@ -491,15 +503,16 @@ class _CreateEventSheetState extends State<CreateEventSheet>
bool isOptional = false,
DateTime? minTime,
}) {
final colorScheme = Theme.of(context).colorScheme;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
isOptional ? context.l10n.calendarCreateOptionalField(label) : label,
style: const TextStyle(
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: AppColors.slate700,
color: colorScheme.onSurfaceVariant,
),
),
const SizedBox(height: 8),
@@ -515,33 +528,33 @@ class _CreateEventSheetState extends State<CreateEventSheet>
child: Container(
padding: const EdgeInsets.all(AppSpacing.md),
decoration: BoxDecoration(
color: AppColors.slate50,
color: colorScheme.surfaceContainerLowest,
borderRadius: BorderRadius.circular(AppRadius.md),
border: Border.all(color: AppColors.borderSecondary),
border: Border.all(color: colorScheme.outlineVariant),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Icon(
Icon(
LucideIcons.calendar,
size: 16,
color: AppColors.slate600,
color: colorScheme.onSurfaceVariant,
),
const SizedBox(width: AppSpacing.sm),
Expanded(
child: Text(
_formatDateTimeLabel(date, time),
style: const TextStyle(
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w500,
color: AppColors.slate900,
color: colorScheme.onSurface,
),
),
),
const Icon(
Icon(
LucideIcons.chevronRight,
size: 16,
color: AppColors.slate400,
color: colorScheme.outline,
),
],
),
@@ -568,7 +581,9 @@ class _CreateEventSheetState extends State<CreateEventSheet>
}) async {
final result = await showModalBottomSheet<(DateTime, DateTime)>(
context: context,
backgroundColor: Colors.transparent,
backgroundColor: Theme.of(
context,
).colorScheme.surface.withValues(alpha: 0),
isScrollControlled: true,
builder: (context) => DateTimePickerSheet(
initialDate: date,
@@ -580,6 +595,7 @@ class _CreateEventSheetState extends State<CreateEventSheet>
}
Widget _buildColorPicker() {
final colorScheme = Theme.of(context).colorScheme;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
@@ -588,15 +604,19 @@ class _CreateEventSheetState extends State<CreateEventSheet>
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: AppColors.slate700,
color: colorScheme.onSurfaceVariant,
),
),
const SizedBox(height: 8),
Row(
children: defaultColors.map((color) {
children: _defaultColors.map((color) {
final colorHex =
'#${color.toARGB32().toRadixString(16).substring(2).toUpperCase()}';
final isSelected = _selectedColor == colorHex;
final checkColor =
ThemeData.estimateBrightnessForColor(color) == Brightness.dark
? Colors.white
: Colors.black;
return GestureDetector(
onTap: () => setState(() => _selectedColor = colorHex),
child: Container(
@@ -607,11 +627,11 @@ class _CreateEventSheetState extends State<CreateEventSheet>
color: color,
shape: BoxShape.circle,
border: isSelected
? Border.all(color: AppColors.slate900, width: 2)
? Border.all(color: colorScheme.onSurface, width: 2)
: null,
),
child: isSelected
? const Icon(Icons.check, size: 16, color: Colors.white)
? Icon(Icons.check, size: 16, color: checkColor)
: null,
),
);
@@ -622,6 +642,7 @@ class _CreateEventSheetState extends State<CreateEventSheet>
}
Widget _buildReminderPicker() {
final colorScheme = Theme.of(context).colorScheme;
String labelOf(int? value) {
if (value == null) {
return context.l10n.calendarCreateReminderNone;
@@ -640,7 +661,7 @@ class _CreateEventSheetState extends State<CreateEventSheet>
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: AppColors.slate700,
color: colorScheme.onSurfaceVariant,
),
),
const SizedBox(height: 8),
@@ -666,9 +687,9 @@ class _CreateEventSheetState extends State<CreateEventSheet>
width: double.infinity,
padding: const EdgeInsets.all(AppSpacing.md),
decoration: BoxDecoration(
color: AppColors.slate50,
color: colorScheme.surfaceContainerLowest,
borderRadius: BorderRadius.circular(AppRadius.md),
border: Border.all(color: AppColors.borderSecondary),
border: Border.all(color: colorScheme.outlineVariant),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
@@ -676,17 +697,17 @@ class _CreateEventSheetState extends State<CreateEventSheet>
Expanded(
child: Text(
labelOf(_reminderMinutes),
style: const TextStyle(
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w500,
color: AppColors.slate900,
color: colorScheme.onSurface,
),
),
),
const Icon(
Icon(
LucideIcons.chevronRight,
size: 16,
color: AppColors.slate400,
color: colorScheme.outline,
),
],
),
apps/lib/features/calendar/presentation/widgets/date_time_picker_sheet.dart
+30 -20
View File
@@ -1,8 +1,7 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:social_app/core/l10n/l10n.dart';
import '../../../../core/theme/design_tokens.dart';
class DateTimePickerSheet extends StatefulWidget {
final DateTime initialDate;
final DateTime initialTime;
@@ -132,11 +131,12 @@ class _DateTimePickerSheetState extends State<DateTimePickerSheet> {
@override
Widget build(BuildContext context) {
final l10n = context.l10n;
final colorScheme = Theme.of(context).colorScheme;
return Container(
height: 420,
decoration: const BoxDecoration(
color: AppColors.white,
decoration: BoxDecoration(
color: colorScheme.surface,
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
),
child: Column(
@@ -172,7 +172,7 @@ class _DateTimePickerSheetState extends State<DateTimePickerSheet> {
l10n.calendarDateTimePickerYearUnit,
style: TextStyle(
fontSize: 14,
color: AppColors.slate600,
color: colorScheme.onSurfaceVariant,
),
),
Expanded(
@@ -193,7 +193,7 @@ class _DateTimePickerSheetState extends State<DateTimePickerSheet> {
l10n.calendarDateTimePickerMonthUnit,
style: TextStyle(
fontSize: 14,
color: AppColors.slate600,
color: colorScheme.onSurfaceVariant,
),
),
Expanded(
@@ -208,7 +208,7 @@ class _DateTimePickerSheetState extends State<DateTimePickerSheet> {
l10n.calendarDateTimePickerDayUnit,
style: TextStyle(
fontSize: 14,
color: AppColors.slate600,
color: colorScheme.onSurfaceVariant,
),
),
],
@@ -217,7 +217,11 @@ class _DateTimePickerSheetState extends State<DateTimePickerSheet> {
],
),
),
Container(width: 1, height: 180, color: AppColors.border),
Container(
width: 1,
height: 180,
color: colorScheme.outlineVariant,
),
Expanded(
flex: 2,
child: Column(
@@ -256,12 +260,12 @@ class _DateTimePickerSheetState extends State<DateTimePickerSheet> {
itemExtent: 50,
),
),
const Text(
Text(
' : ',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: AppColors.slate600,
color: colorScheme.onSurfaceVariant,
),
),
Expanded(
@@ -289,12 +293,13 @@ class _DateTimePickerSheetState extends State<DateTimePickerSheet> {
Widget _buildHeader() {
final l10n = context.l10n;
final colorScheme = Theme.of(context).colorScheme;
return Container(
height: 56,
padding: const EdgeInsets.symmetric(horizontal: 16),
decoration: const BoxDecoration(
border: Border(bottom: BorderSide(color: AppColors.border)),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: colorScheme.outlineVariant)),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -304,7 +309,10 @@ class _DateTimePickerSheetState extends State<DateTimePickerSheet> {
onTap: () => Navigator.pop(context),
child: Text(
l10n.commonCancel,
style: const TextStyle(fontSize: 17, color: AppColors.slate600),
style: TextStyle(
fontSize: 17,
color: colorScheme.onSurfaceVariant,
),
),
),
Text(
@@ -312,7 +320,7 @@ class _DateTimePickerSheetState extends State<DateTimePickerSheet> {
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w600,
color: AppColors.slate900,
color: colorScheme.onSurface,
),
),
GestureDetector(
@@ -324,10 +332,10 @@ class _DateTimePickerSheetState extends State<DateTimePickerSheet> {
},
child: Text(
l10n.commonConfirm,
style: const TextStyle(
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w600,
color: AppColors.blue600,
color: colorScheme.primary,
),
),
),
@@ -337,14 +345,15 @@ class _DateTimePickerSheetState extends State<DateTimePickerSheet> {
}
Widget _buildPickerLabel(String label) {
final colorScheme = Theme.of(context).colorScheme;
return Padding(
padding: const EdgeInsets.symmetric(vertical: 12),
child: Text(
label,
style: const TextStyle(
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: AppColors.slate700,
color: colorScheme.onSurfaceVariant,
),
textAlign: TextAlign.center,
),
@@ -358,6 +367,7 @@ class _DateTimePickerSheetState extends State<DateTimePickerSheet> {
String Function(int) formatter, {
double itemExtent = 40,
}) {
final colorScheme = Theme.of(context).colorScheme;
return CupertinoPicker(
scrollController: controller,
itemExtent: itemExtent,
@@ -369,7 +379,7 @@ class _DateTimePickerSheetState extends State<DateTimePickerSheet> {
decoration: BoxDecoration(
border: Border.symmetric(
horizontal: BorderSide(
color: AppColors.blue100.withValues(alpha: 0.5),
color: colorScheme.primary.withValues(alpha: 0.3),
width: 1,
),
),
@@ -379,7 +389,7 @@ class _DateTimePickerSheetState extends State<DateTimePickerSheet> {
return Center(
child: Text(
formatter(items[index]),
style: const TextStyle(fontSize: 18, color: AppColors.slate900),
style: TextStyle(fontSize: 18, color: colorScheme.onSurface),
),
);
}),