Hamza/intaleq
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2026-04-06 redesign splash screen and drawer menu

Browse Source
This commit is contained in:
Hamza-Ayed
2026-04-06 22:00:13 +03:00
parent 531c6d07ef
commit 45222d2887
8 changed files with 1112 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

534
lib/views/home/map_widget.dart/map_menu_widget.dart
View File

@@ -1,4 +1,4 @@
import 'dart:ui'; // مهم لإضافة تأثير الضبابية
import 'dart:ui';
import 'package:Intaleq/constant/box_name.dart';
import 'package:Intaleq/main.dart';
@@ -22,7 +22,15 @@ import '../HomePage/share_app_page.dart';
import '../setting_page.dart';
import '../profile/passenger_profile_page.dart';
// --- الويدجت الرئيسية بالتصميم الجديد ---
// ─── ألوان النظام ───────────────────────────────────────────────────────────
const _kBg = Color(0xFF060B18);
const _kBgSurface = Color(0xFF0D1525);
const _kCyan = Color(0xFF00D4FF);
const _kAmber = Color(0xFFFFB700);
const _kBorder = Color(0x1A00D4FF);
const _kText = Colors.white;
const _kTextMuted = Color(0xFF7A8FA8);
class MapMenuWidget extends StatelessWidget {
const MapMenuWidget({super.key});
@@ -33,51 +41,58 @@ class MapMenuWidget extends StatelessWidget {
return GetBuilder<MapPassengerController>(
builder: (controller) => Stack(
children: [
// --- خلفية معتمة عند فتح القائمة ---
// ── تعتيم الخلفية ───────────────────────────────────────────────
if (controller.widthMenu > 0)
GestureDetector(
onTap: controller.getDrawerMenu,
child: Container(
color: Colors.black.withOpacity(0.4),
),
child: Container(color: Colors.black.withOpacity(0.55)),
),
// --- القائمة الجانبية المنزلقة ---
_buildSideMenu(controller),
// --- زر القائمة العائم ---
_buildMenuButton(controller),
],
),
);
}
// --- ويدجت لبناء زر القائمة ---
// ── زر القائمة العائم ────────────────────────────────────────────────────
Widget _buildMenuButton(MapPassengerController controller) {
return Positioned(
top: 45,
left: 16,
child: SafeArea(
child: InkWell(
child: GestureDetector(
onTap: controller.getDrawerMenu,
borderRadius: BorderRadius.circular(50),
child: ClipRRect(
borderRadius: BorderRadius.circular(50),
borderRadius: BorderRadius.circular(16),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
filter: ImageFilter.blur(sigmaX: 12, sigmaY: 12),
child: AnimatedContainer(
duration: const Duration(milliseconds: 300),
padding: const EdgeInsets.all(12),
curve: Curves.easeOut,
width: 48,
height: 48,
decoration: BoxDecoration(
color: AppColor.secondaryColor.withOpacity(0.8),
shape: BoxShape.circle,
border:
Border.all(color: AppColor.writeColor.withOpacity(0.2)),
color: _kBg.withOpacity(0.88),
borderRadius: BorderRadius.circular(16),
border: Border.all(color: _kCyan.withOpacity(0.25), width: 1),
boxShadow: [
BoxShadow(
color: _kCyan.withOpacity(0.12),
blurRadius: 16,
),
],
),
child: Icon(
controller.widthMenu > 0 ? Icons.close : Icons.menu,
color: AppColor.writeColor,
size: 26,
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 200),
child: Icon(
controller.widthMenu > 0
? Icons.close_rounded
: Icons.menu_rounded,
key: ValueKey(controller.widthMenu > 0),
color: _kCyan,
size: 22,
),
),
),
),
@@ -87,109 +102,125 @@ class MapMenuWidget extends StatelessWidget {
);
}
// --- ويدجت لبناء القائمة الجانبية ---
// ── القائمة الجانبية ─────────────────────────────────────────────────────
Widget _buildSideMenu(MapPassengerController controller) {
return AnimatedPositioned(
duration: const Duration(milliseconds: 400),
duration: const Duration(milliseconds: 420),
curve: Curves.fastOutSlowIn,
top: 0,
bottom: 0,
left: controller.widthMenu > 0 ? 0 : -Get.width,
child: ClipRRect(
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
child: Container(
width: Get.width * 0.8,
constraints: const BoxConstraints(maxWidth: 320),
decoration: BoxDecoration(
color: AppColor.secondaryColor.withOpacity(0.95),
color: _kBg.withOpacity(0.97),
border: Border(
right: BorderSide(color: _kCyan.withOpacity(0.12), width: 1),
),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.2),
blurRadius: 20,
)
color: Colors.black.withOpacity(0.5),
blurRadius: 32,
),
],
),
child: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildMenuHeader(),
_buildQuickActionButtons(),
const Divider(
color: Colors.white24,
indent: 16,
endIndent: 16,
height: 24),
Expanded(
child: ListView(
padding: const EdgeInsets.symmetric(horizontal: 8),
children: [
MenuListItem(
title: 'My Balance'.tr,
icon: Icons.account_balance_wallet_outlined,
onTap: () => Get.to(() => const PassengerWallet())),
MenuListItem(
title: 'Order History'.tr,
icon: Icons.history_rounded,
onTap: () => Get.to(() => const OrderHistory())),
MenuListItem(
title: 'Promos'.tr,
icon: Icons.local_offer_outlined,
onTap: () =>
Get.to(() => const PromosPassengerPage())),
MenuListItem(
title: 'Contact Us'.tr,
icon: Icons.contact_support_outlined,
onTap: () => Get.to(() => ContactUsPage())),
MenuListItem(
title: 'Complaint'.tr,
icon: Icons.flag_outlined,
onTap: () => Get.to(() => ComplaintPage())),
MenuListItem(
title: 'Driver'.tr,
icon: Ionicons.car_sport_outline,
onTap: () => _launchDriverAppUrl()),
MenuListItem(
title: 'Share App'.tr,
icon: Icons.share_outlined,
onTap: () => Get.to(() => ShareAppPage())),
MenuListItem(
title: 'Privacy Policy'.tr,
icon: Icons.shield_outlined,
onTap: () => launchUrl(Uri.parse(
'${AppLink.server}/privacy_policy.php')),
child: Stack(
children: [
// شبكة خلفية
Positioned.fill(
child: CustomPaint(painter: _MenuGridPainter())),
// المحتوى
SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildMenuHeader(),
_buildQuickActionButtons(),
_buildDivider(),
Expanded(
child: ListView(
padding: const EdgeInsets.symmetric(
horizontal: 12, vertical: 4),
children: [
MenuListItem(
title: 'My Balance'.tr,
icon: Icons.account_balance_wallet_outlined,
onTap: () =>
Get.to(() => const PassengerWallet()),
),
MenuListItem(
title: 'Order History'.tr,
icon: Icons.history_rounded,
onTap: () => Get.to(() => const OrderHistory()),
),
MenuListItem(
title: 'Promos'.tr,
icon: Icons.local_offer_outlined,
onTap: () =>
Get.to(() => const PromosPassengerPage()),
),
MenuListItem(
title: 'Contact Us'.tr,
icon: Icons.contact_support_outlined,
onTap: () => Get.to(() => ContactUsPage()),
),
MenuListItem(
title: 'Complaint'.tr,
icon: Icons.flag_outlined,
onTap: () => Get.to(() => ComplaintPage()),
),
MenuListItem(
title: 'Driver'.tr,
icon: Ionicons.car_sport_outline,
onTap: () => _launchDriverAppUrl(),
),
MenuListItem(
title: 'Share App'.tr,
icon: Icons.share_outlined,
onTap: () => Get.to(() => ShareAppPage()),
),
MenuListItem(
title: 'Privacy Policy'.tr,
icon: Icons.shield_outlined,
onTap: () => launchUrl(
Uri.parse(
'${AppLink.server}/privacy_policy.php'),
),
),
],
),
],
),
),
const Divider(
color: Colors.white24,
indent: 16,
endIndent: 16,
height: 1),
Padding(
padding: const EdgeInsets.all(8.0),
child: MenuListItem(
title: 'Logout'.tr,
icon: Icons.logout_rounded,
onTap: () {
Get.defaultDialog(
title: "Logout".tr,
middleText: "Are you sure you want to logout?".tr,
textConfirm: "Logout".tr,
textCancel: "Cancel".tr,
onConfirm: () {
// controller.logout();
Get.back();
),
_buildDivider(),
// زر الخروج
Padding(
padding: const EdgeInsets.fromLTRB(12, 4, 12, 12),
child: MenuListItem(
title: 'Logout'.tr,
icon: Icons.logout_rounded,
isDestructive: true,
onTap: () {
Get.defaultDialog(
title: "Logout".tr,
middleText: "Are you sure you want to logout?".tr,
textConfirm: "Logout".tr,
textCancel: "Cancel".tr,
onConfirm: () {
// controller.logout();
Get.back();
},
);
},
);
},
color: Colors.red.shade300,
),
),
),
],
),
],
),
),
],
),
),
),
@@ -197,33 +228,96 @@ class MapMenuWidget extends StatelessWidget {
);
}
// --- ويدجت رأس القائمة ---
// ── رأس القائمة ──────────────────────────────────────────────────────────
Widget _buildMenuHeader() {
return Padding(
padding: const EdgeInsets.fromLTRB(20, 30, 20, 16),
return Container(
margin: const EdgeInsets.fromLTRB(16, 24, 16, 16),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: _kBgSurface,
borderRadius: BorderRadius.circular(16),
border: Border.all(color: _kCyan.withOpacity(0.15), width: 1),
),
child: Row(
children: [
const CircleAvatar(
radius: 30,
backgroundColor: AppColor.primaryColor,
child: Icon(Icons.person, color: AppColor.writeColor, size: 35),
// أفاتار المستخدم
Stack(
children: [
Container(
width: 56,
height: 56,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
_kCyan.withOpacity(0.2),
_kAmber.withOpacity(0.12),
],
),
border:
Border.all(color: _kCyan.withOpacity(0.35), width: 1.5),
),
child:
const Icon(Icons.person_rounded, color: _kCyan, size: 28),
),
// نقطة الحضور
Positioned(
bottom: 1,
right: 1,
child: Container(
width: 12,
height: 12,
decoration: BoxDecoration(
color: const Color(0xFF00E676),
shape: BoxShape.circle,
border: Border.all(color: _kBg, width: 2),
boxShadow: [
BoxShadow(
color: const Color(0xFF00E676).withOpacity(0.5),
blurRadius: 6,
),
],
),
),
),
],
),
const SizedBox(width: 16),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
box.read(BoxName.name) ?? 'Guest',
style: AppStyle.headTitle.copyWith(fontSize: 20),
style: const TextStyle(
color: _kText,
fontSize: 17,
fontWeight: FontWeight.w700,
letterSpacing: 0.3,
),
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 4),
Text(
"Intaleq Passenger".tr,
style: AppStyle.title.copyWith(
color: AppColor.writeColor.withOpacity(0.7),
fontSize: 14),
const SizedBox(height: 5),
Row(
children: [
Container(
width: 5,
height: 5,
decoration: const BoxDecoration(
color: _kCyan, shape: BoxShape.circle),
),
const SizedBox(width: 6),
Text(
"Intaleq Passenger".tr,
style: const TextStyle(
color: _kTextMuted,
fontSize: 12,
letterSpacing: 0.4,
),
),
],
),
],
),
@@ -233,47 +327,44 @@ class MapMenuWidget extends StatelessWidget {
);
}
// --- ويدجت الأزرار السريعة ---
// ── أزرار الإجراءات السريعة ───────────────────────────────────────────────
Widget _buildQuickActionButtons() {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
_buildSmallActionButton(
icon: Icons.person_outline_rounded,
label: 'Profile'.tr,
onTap: () => Get.to(() => PassengerProfilePage())),
_buildSmallActionButton(
icon: Icons.notifications_none_rounded,
label: 'Alerts'.tr,
onTap: () => Get.to(() => const NotificationPage())),
_buildSmallActionButton(
icon: Icons.settings_outlined,
label: 'Settings'.tr,
onTap: () => Get.to(() => const SettingPage())),
_QuickBtn(
icon: Icons.person_outline_rounded,
label: 'Profile'.tr,
onTap: () => Get.to(() => PassengerProfilePage()),
),
const SizedBox(width: 8),
_QuickBtn(
icon: Icons.notifications_none_rounded,
label: 'Alerts'.tr,
onTap: () => Get.to(() => const NotificationPage()),
),
const SizedBox(width: 8),
_QuickBtn(
icon: Icons.settings_outlined,
label: 'Settings'.tr,
onTap: () => Get.to(() => const SettingPage()),
),
],
),
);
}
Widget _buildSmallActionButton(
{required IconData icon,
required String label,
required VoidCallback onTap}) {
return InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(12),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 12.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(icon, color: AppColor.writeColor.withOpacity(0.9), size: 24),
const SizedBox(height: 6),
Text(label,
style: AppStyle.subtitle.copyWith(
fontSize: 12, color: AppColor.writeColor.withOpacity(0.9))),
Widget _buildDivider() {
return Container(
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
height: 1,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.transparent,
_kCyan.withOpacity(0.15),
Colors.transparent,
],
),
),
@@ -304,7 +395,52 @@ class MapMenuWidget extends StatelessWidget {
}
}
// --- ويدجت عناصر القائمة بتصميم محسن ---
// ── زر الإجراء السريع ────────────────────────────────────────────────────────
class _QuickBtn extends StatelessWidget {
final IconData icon;
final String label;
final VoidCallback onTap;
const _QuickBtn({
required this.icon,
required this.label,
required this.onTap,
});
@override
Widget build(BuildContext context) {
return Expanded(
child: GestureDetector(
onTap: onTap,
child: Container(
padding: const EdgeInsets.symmetric(vertical: 12),
decoration: BoxDecoration(
color: _kBgSurface,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: _kCyan.withOpacity(0.12), width: 1),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(icon, color: _kCyan, size: 22),
const SizedBox(height: 6),
Text(
label,
style: const TextStyle(
color: _kTextMuted,
fontSize: 11,
letterSpacing: 0.4,
),
),
],
),
),
),
);
}
}
// ── عنصر القائمة ─────────────────────────────────────────────────────────────
class MenuListItem extends StatelessWidget {
const MenuListItem({
super.key,
@@ -312,33 +448,87 @@ class MenuListItem extends StatelessWidget {
required this.onTap,
required this.icon,
this.color,
this.isDestructive = false,
});
final String title;
final IconData icon;
final VoidCallback onTap;
final Color? color;
final bool isDestructive;
@override
Widget build(BuildContext context) {
return ListTile(
onTap: onTap,
leading: Icon(
icon,
size: 26,
color: color ?? AppColor.writeColor.withOpacity(0.8),
),
title: Text(
title.tr,
style: AppStyle.title.copyWith(
fontSize: 16,
color: color ?? AppColor.writeColor,
final iconColor = isDestructive
? const Color(0xFFFF5252)
: (color ?? _kCyan.withOpacity(0.80));
final textColor =
isDestructive ? const Color(0xFFFF5252) : (color ?? _kText);
return Material(
color: Colors.transparent,
child: InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(12),
splashColor: _kCyan.withOpacity(0.07),
highlightColor: _kCyan.withOpacity(0.04),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
child: Row(
children: [
// أيقونة بخلفية دقيقة
Container(
width: 36,
height: 36,
decoration: BoxDecoration(
color: isDestructive
? const Color(0xFFFF5252).withOpacity(0.08)
: _kCyan.withOpacity(0.07),
borderRadius: BorderRadius.circular(10),
),
child: Icon(icon, size: 19, color: iconColor),
),
const SizedBox(width: 14),
Expanded(
child: Text(
title.tr,
style: TextStyle(
color: textColor,
fontSize: 15,
fontWeight: FontWeight.w500,
letterSpacing: 0.2,
),
),
),
Icon(
Icons.chevron_right_rounded,
color: _kTextMuted.withOpacity(0.4),
size: 18,
),
],
),
),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
splashColor: AppColor.primaryColor.withOpacity(0.2),
);
}
}
// ── رسّام الشبكة ──────────────────────────────────────────────────────────────
class _MenuGridPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = const Color(0xFF00D4FF).withOpacity(0.025)
..strokeWidth = 0.5;
const spacing = 36.0;
for (double y = 0; y < size.height; y += spacing) {
canvas.drawLine(Offset(0, y), Offset(size.width, y), paint);
}
for (double x = 0; x < size.width; x += spacing) {
canvas.drawLine(Offset(x, 0), Offset(x, size.height), paint);
}
}
@override
bool shouldRepaint(_MenuGridPainter old) => false;
}