Files
mobile-app/lib/features/home/presentation/widgets/home_header.dart

348 lines
12 KiB
Dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:real_estate_mobile/core/constants/app_colors.dart';
import 'package:real_estate_mobile/features/auth/presentation/providers/auth_provider.dart';
class HomeHeader extends StatelessWidget {
const HomeHeader({super.key});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 23, vertical: 12),
decoration: BoxDecoration(
color: const Color(0xFF648188),
borderRadius: BorderRadius.circular(10),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// Logo
Image.asset(
'assets/icons/logo.png',
width: 109,
height: 29,
),
// Right side: notification + hamburger menu
Row(
children: [
// Notification bell
GestureDetector(
onTap: () {},
child: const Icon(
Icons.notifications_outlined,
color: AppColors.primaryDark,
size: 26,
),
),
const SizedBox(width: 16),
// Hamburger menu
GestureDetector(
onTap: () => _openDrawer(context),
child: const Icon(
Icons.menu,
color: AppColors.primaryDark,
size: 26,
),
),
],
),
],
),
);
}
void _openDrawer(BuildContext context) {
showModalBottomSheet(
context: context,
isScrollControlled: true,
backgroundColor: Colors.transparent,
builder: (context) => const _MenuDrawer(),
);
}
}
class _MenuDrawer extends ConsumerWidget {
const _MenuDrawer();
@override
Widget build(BuildContext context, WidgetRef ref) {
return DraggableScrollableSheet(
initialChildSize: 0.85,
minChildSize: 0.5,
maxChildSize: 0.95,
builder: (context, scrollController) {
return Container(
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
),
child: Column(
children: [
// Handle bar
const SizedBox(height: 12),
Container(
width: 40,
height: 4,
decoration: BoxDecoration(
color: AppColors.divider,
borderRadius: BorderRadius.circular(2),
),
),
const SizedBox(height: 16),
// Header with logo and close
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Image.asset(
'assets/icons/logo.png',
width: 109,
height: 29,
),
GestureDetector(
onTap: () => Navigator.pop(context),
child: Container(
width: 32,
height: 32,
decoration: BoxDecoration(
color: AppColors.inputFill,
borderRadius: BorderRadius.circular(8),
),
child: const Icon(
Icons.close,
color: AppColors.primaryDark,
size: 20,
),
),
),
],
),
),
const SizedBox(height: 24),
const Divider(color: AppColors.divider, height: 1),
// Menu items
Expanded(
child: ListView(
controller: scrollController,
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
children: [
_buildMenuItem(
context,
icon: Icons.home_outlined,
label: 'Home',
onTap: () {
Navigator.pop(context);
context.go('/home');
},
),
_buildMenuItem(
context,
icon: Icons.school_outlined,
label: 'Education',
onTap: () => Navigator.pop(context),
),
_buildMenuItem(
context,
icon: Icons.info_outline,
label: 'About Us',
onTap: () => Navigator.pop(context),
),
_buildMenuItem(
context,
icon: Icons.help_outline,
label: "FAQ's",
onTap: () {
Navigator.pop(context);
context.push('/faq');
},
),
_buildMenuItem(
context,
icon: Icons.mail_outline,
label: 'Contact',
onTap: () {
Navigator.pop(context);
context.push('/contact');
},
),
const SizedBox(height: 16),
const Divider(color: AppColors.divider, height: 1),
const SizedBox(height: 16),
if (ref.watch(authProvider).status ==
AuthStatus.authenticated) ...[
_buildMenuItem(
context,
icon: Icons.person_outline,
label: 'Account Settings',
onTap: () {
Navigator.pop(context);
context.push('/profile');
},
),
_buildMenuItem(
context,
icon: Icons.notifications_outlined,
label: 'Notification Settings',
onTap: () {
Navigator.pop(context);
context.push('/profile');
},
),
const SizedBox(height: 16),
const Divider(color: AppColors.divider, height: 1),
const SizedBox(height: 24),
// Log Out button
SizedBox(
width: double.infinity,
child: OutlinedButton.icon(
onPressed: () {
Navigator.pop(context);
ref.read(authProvider.notifier).logout();
},
icon: const Icon(
Icons.logout,
color: AppColors.accentOrange,
size: 20,
),
label: const Text(
'Log Out',
style: TextStyle(
fontFamily: 'Fractul',
fontSize: 16,
fontWeight: FontWeight.w700,
color: AppColors.accentOrange,
),
),
style: OutlinedButton.styleFrom(
padding:
const EdgeInsets.symmetric(vertical: 16),
side: const BorderSide(
color: AppColors.accentOrange,
width: 1.5,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
),
),
),
] else ...[
// Login button
SizedBox(
width: double.infinity,
child: ElevatedButton.icon(
onPressed: () {
Navigator.pop(context);
context.push('/login');
},
icon: const Icon(
Icons.login,
color: Colors.white,
size: 20,
),
label: const Text(
'Log In',
style: TextStyle(
fontFamily: 'Fractul',
fontSize: 16,
fontWeight: FontWeight.w700,
color: Colors.white,
),
),
style: ElevatedButton.styleFrom(
backgroundColor: AppColors.accentOrange,
padding:
const EdgeInsets.symmetric(vertical: 16),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
),
),
),
const SizedBox(height: 12),
// Sign Up button
SizedBox(
width: double.infinity,
child: OutlinedButton.icon(
onPressed: () {
Navigator.pop(context);
context.push('/signup');
},
icon: const Icon(
Icons.person_add_outlined,
color: AppColors.accentOrange,
size: 20,
),
label: const Text(
'Sign Up',
style: TextStyle(
fontFamily: 'Fractul',
fontSize: 16,
fontWeight: FontWeight.w700,
color: AppColors.accentOrange,
),
),
style: OutlinedButton.styleFrom(
padding:
const EdgeInsets.symmetric(vertical: 16),
side: const BorderSide(
color: AppColors.accentOrange,
width: 1.5,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
),
),
),
],
],
),
),
],
),
);
},
);
}
Widget _buildMenuItem(
BuildContext context, {
required IconData icon,
required String label,
required VoidCallback onTap,
}) {
return InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(10),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 14),
child: Row(
children: [
Icon(icon, color: AppColors.primaryDark, size: 24),
const SizedBox(width: 16),
Text(
label,
style: const TextStyle(
fontFamily: 'Fractul',
fontSize: 16,
fontWeight: FontWeight.w600,
color: AppColors.primaryDark,
),
),
const Spacer(),
const Icon(
Icons.chevron_right,
color: AppColors.hintText,
size: 22,
),
],
),
),
);
}
}