Fruit-hub

**نبذة عن العمل:**

قمت بتنفيذ مجموعة من التحسينات الجوهرية على واجهة المستخدم (UI) وتجربة الاستخدام (UX) لتطبيق متجر إلكتروني مبني باستخدام إطار عمل فلاتر (Flutter)، بهدف جعل تصفح المنتجات أكثر سلاسة وجاذبية للمستخدمين، وتسهيل عملية اتخاذ قرار الشراء مباشرة من الشاشة الرئيسية.

**المهام والتحسينات التي تم إنجازها:**

* **تحديث مؤشر سلة المشتريات (Cart Badge):**

تمت إضافة أيقونة سلة مشتريات ديناميكية في الشريط العلوي (App Bar) تحتوي على إشعار (Badge) يوضح إجمالي عدد المنتجات المُضافة لحظياً، ليكون المستخدم على دراية دائمة بحالة سلة مشترياته أثناء التصفح.

* **عارض صور تفاعلي داخل كارت المنتج (Image Carousel):**

تم تحويل صورة المنتج في الشاشة الرئيسية إلى عارض صور (Carousel) قابل للسحب (Swipe) مزود بنقاط توضيحية (Dots Indicator)، مما يتيح للمستخدم استعراض جميع صور المنتج المتوفرة دون الحاجة للدخول إلى صفحة تفاصيل المنتج.

* **إعادة تصميم كارت المنتج الاحترافي (Product Tile Refactoring):**

تم فصل هيكل الكارت بحيث تأخذ الصورة المساحة العلوية بالكامل (Full Width) مع قص الزوايا بشكل احترافي ومتناسق (Anti-Alias Clipping)، وتم دمج أيقونة التفضيلات (Favorite Icon) لتظهر عائمة فوق الصورة بشكل جمالي ومدروس.

* **إضافة تفاعل لمسي (Haptic Feedback):**

لتعزيز تجربة المستخدم (UX)، تمت إضافة اهتزاز تفاعلي خفيف (Haptic Feedback) عند الضغط على زر إضافة المنتج للسلة، مما يعطي إحساساً ملموساً ومرضياً بالاستجابة.

**التقنيات المستخدمة:**

* Flutter & Dart

* إدارة الحالة (State Management) باستخدام BLoC / Cubit لربط سلة المشتريات والمفضلة.

* مكتبات مساعدة: `dots_indicator` لعرض مؤشر الصور، و `skeletonizer` لتحميل الواجهات بسلاسة، و التعامل مع خصائص `HapticFeedback` المدمجة في فلاتر.

***

**نصيحة:** يمكنك إرفاق فيديو قصير (Screen Recording) أو صور (Screenshots) متحركة توضح شكل الـ Carousel وتأثير إضافة منتج لسلة المشتريات وتغير الرقم، فهذا سيجذب انتباه العملاء في "مستقل" بشكل كبير جداً!