Polish health app UI
This commit is contained in:
@@ -4,6 +4,7 @@ import '../core/app_colors.dart';
|
||||
import '../core/navigation_provider.dart';
|
||||
import '../providers/auth_provider.dart';
|
||||
import '../providers/data_providers.dart';
|
||||
import 'drawer_shell.dart';
|
||||
|
||||
class HealthDrawer extends ConsumerWidget {
|
||||
const HealthDrawer({super.key});
|
||||
@@ -13,37 +14,25 @@ class HealthDrawer extends ConsumerWidget {
|
||||
final auth = ref.watch(authProvider);
|
||||
final latestHealth = ref.watch(latestHealthProvider);
|
||||
|
||||
return Drawer(
|
||||
width: MediaQuery.of(context).size.width * 0.9,
|
||||
backgroundColor: Colors.transparent,
|
||||
elevation: 0,
|
||||
child: DecoratedBox(
|
||||
decoration: const BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [Color(0xFF87CEEB), Color(0xFFFFFFFF)],
|
||||
stops: [0.0, 0.35],
|
||||
),
|
||||
),
|
||||
child: SafeArea(
|
||||
child: CustomScrollView(
|
||||
physics: const BouncingScrollPhysics(),
|
||||
slivers: [
|
||||
SliverPadding(
|
||||
padding: const EdgeInsets.fromLTRB(18, 18, 18, 24),
|
||||
sliver: SliverList.list(
|
||||
children: [
|
||||
_AccountHeader(user: auth.user, ref: ref),
|
||||
const SizedBox(height: 18),
|
||||
_HealthDashboard(latestHealth: latestHealth, ref: ref),
|
||||
const SizedBox(height: 18),
|
||||
_NavigationSection(ref: ref),
|
||||
],
|
||||
),
|
||||
return DrawerShell(
|
||||
widthFactor: 0.9,
|
||||
child: SafeArea(
|
||||
child: CustomScrollView(
|
||||
physics: const BouncingScrollPhysics(),
|
||||
slivers: [
|
||||
SliverPadding(
|
||||
padding: const EdgeInsets.fromLTRB(18, 18, 18, 24),
|
||||
sliver: SliverList.list(
|
||||
children: [
|
||||
_AccountHeader(user: auth.user, ref: ref),
|
||||
const SizedBox(height: 18),
|
||||
_HealthDashboard(latestHealth: latestHealth, ref: ref),
|
||||
const SizedBox(height: 18),
|
||||
_NavigationSection(ref: ref),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
@@ -75,12 +64,12 @@ class _AccountHeader extends StatelessWidget {
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
shape: BoxShape.circle,
|
||||
border: Border.all(color: const Color(0xFFE9EEF5)),
|
||||
border: Border.all(color: Colors.white, width: 2),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: const Color(0xFF101828).withValues(alpha: 0.06),
|
||||
blurRadius: 14,
|
||||
offset: const Offset(0, 6),
|
||||
color: const Color(0xFF7C5CFF).withValues(alpha: 0.16),
|
||||
blurRadius: 20,
|
||||
offset: const Offset(0, 10),
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -152,9 +141,9 @@ class _HealthDashboard extends StatelessWidget {
|
||||
),
|
||||
titleColor: Colors.white,
|
||||
backgroundGradient: const LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [Color(0xFF89F7FE), Color(0xFF66A6FF)],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [Color(0xFF60A5FA), Color(0xFF8B5CF6), Color(0xFFF472B6)],
|
||||
),
|
||||
child: latestHealth.when(
|
||||
data: (data) => _DashboardMetrics(data: data, ref: ref),
|
||||
@@ -282,7 +271,11 @@ class _MetricTile extends StatelessWidget {
|
||||
if (info.unit != null)
|
||||
Text(
|
||||
info.unit!,
|
||||
style: const TextStyle(fontSize: 12, fontWeight: FontWeight.w600, color: Color(0xE0FFFFFF)),
|
||||
style: const TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Color(0xE0FFFFFF),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
@@ -311,7 +304,7 @@ class _NavigationSection extends StatelessWidget {
|
||||
icon: Icons.folder_shared_rounded,
|
||||
title: '档案',
|
||||
route: 'healthArchive',
|
||||
colors: const [Color(0xFF6EE7B7), Color(0xFF14B8A6)],
|
||||
colors: const [Color(0xFF93C5FD), Color(0xFF60A5FA)],
|
||||
),
|
||||
_NavItem(
|
||||
icon: Icons.description_rounded,
|
||||
@@ -329,13 +322,13 @@ class _NavigationSection extends StatelessWidget {
|
||||
icon: Icons.restaurant_rounded,
|
||||
title: '饮食',
|
||||
route: 'dietRecords',
|
||||
colors: const [Color(0xFFFED7AA), Color(0xFFFDBA74)],
|
||||
colors: const [Color(0xFFFBCFE8), Color(0xFFF472B6)],
|
||||
),
|
||||
_NavItem(
|
||||
icon: Icons.calendar_month_rounded,
|
||||
title: '日历',
|
||||
route: 'calendar',
|
||||
colors: const [Color(0xFFA7F3D0), Color(0xFF86EFAC)],
|
||||
colors: const [Color(0xFFC4B5FD), Color(0xFF8B5CF6)],
|
||||
),
|
||||
_NavItem(
|
||||
icon: Icons.event_available_rounded,
|
||||
@@ -354,9 +347,9 @@ class _NavigationSection extends StatelessWidget {
|
||||
return _Panel(
|
||||
title: '功能入口',
|
||||
backgroundGradient: const LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [Color(0xFFEAF4FB), Color(0xFFF4F9FD)],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [Color(0xFAFFFFFF), Color(0xF5EFF6FF)],
|
||||
),
|
||||
child: GridView.builder(
|
||||
itemCount: items.length,
|
||||
@@ -394,13 +387,13 @@ class _NavTile extends StatelessWidget {
|
||||
};
|
||||
|
||||
List<Color> get _colors => switch (item.route) {
|
||||
'healthArchive' => const [Color(0xFF34D399), Color(0xFF059669)],
|
||||
'healthArchive' => const [Color(0xFF93C5FD), Color(0xFF60A5FA)],
|
||||
'reports' => const [Color(0xFF60A5FA), Color(0xFF2563EB)],
|
||||
'medications' => const [Color(0xFFA78BFA), Color(0xFF7C3AED)],
|
||||
'dietRecords' => const [Color(0xFFF6D365), Color(0xFFF97316)],
|
||||
'calendar' => const [Color(0xFF34D399), Color(0xFF059669)],
|
||||
'dietRecords' => const [Color(0xFFFBCFE8), Color(0xFFF472B6)],
|
||||
'calendar' => const [Color(0xFFC4B5FD), Color(0xFF8B5CF6)],
|
||||
'followups' => const [Color(0xFFF472B6), Color(0xFFDB2777)],
|
||||
'exercisePlan' => const [Color(0xFF22D3EE), Color(0xFF0891B2)],
|
||||
'exercisePlan' => const [Color(0xFF7DD3FC), Color(0xFF60A5FA)],
|
||||
_ => item.colors,
|
||||
};
|
||||
|
||||
@@ -413,7 +406,8 @@ class _NavTile extends StatelessWidget {
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
border: Border.all(color: Colors.white, width: 1.2),
|
||||
border: Border.all(color: AppColors.borderLight, width: 1.1),
|
||||
boxShadow: AppColors.cardShadowLight,
|
||||
),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
@@ -479,7 +473,10 @@ class _Panel extends StatelessWidget {
|
||||
],
|
||||
),
|
||||
borderRadius: BorderRadius.circular(28),
|
||||
border: Border.all(color: Colors.white, width: 1.4),
|
||||
border: Border.all(
|
||||
color: Colors.white.withValues(alpha: 0.82),
|
||||
width: 1.2,
|
||||
),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: const Color(0xFF6D5DF6).withValues(alpha: 0.08),
|
||||
|
||||
Reference in New Issue
Block a user