Flutter UI Demo هو مشروع محفظة يركز على واجهة المستخدم، يعرض متجر أثاث إلكتروني مبني بالكامل باستخدام Flutter. الهدف الرئيسي هو عرض تقنيات واجهة المستخدم المتقدمة، والحركات المخصصة، وإدارة الحالة التفاعلية باستخدام GetX — بدون أي تكامل مع الخلفية.
الميزات الرئيسية:
- البانر الرئيسي: بانرات ترويجية تدور تلقائيًا (فاصل 3.5 ثانية) مع خلفيات متدرجة، ومؤشرات نقاط متحركة، وأزرار "تسوق الآن".
- عمود المنتجات ثلاثي الأبعاد: عمود تراكم بطاقات مخصص مع تأثير طبقة Z — البطاقة المركزية بحجم كامل، والبطاقات الجانبية مصغرة ومحاذية أفقيًا. يدعم إيماءات السحب والنقر للتوسيط.
- شريط بحث متحرك: شريط بحث ي.cycle من خلال عبارات التلميح مع تأثير كتابة مؤشر مومض، وتوقف، ورسوم متحركة للحذف.
- تصفية الفئات: رقائق تصفية أفقية (الكل، أريكة، كرسي، طاولة، مصباح) مع حالة تحديد متحركة.
- صفحة تفاصيل المنتج: ورقة سفلية كاملة مع تقييم نجوم متحرك، عداد سعر متحرك، منتقي ألوان، منتقي الكمية، وإضافة إلى السلة.
- نظام المفضلة: تبديل المفضلة لكل منتج، مع التخزين عبر SharedPreferences. صفحة مفضلات مع رسوم متحركة للحذف الفردي والمحو الجماعي.
- صفحة الملف الشخصي: معلومات المستخدم، بطاقات إحصائية تفاعلية، أزرار إعدادات، وبانر تذكير السلة الشرطي.
- شريط تنقل مخصص: شريط تنقل عائم على شكل حبوب مع 3 علامات تبويب ومؤشر نشط متحرك.
التقنيات المستخدمة:
- الإطار: Flutter 3.10+ (Dart)
- إدارة الحالة: GetX (קקObservableات تفاعلية، حقن التبعية)
- التخزين المحلي: SharedPreferences (تخزين المفضلة)
- المظهر: Material 3 مع لون بذرة كهرماني
- الصور: صور شبكة من picsum.photos و pravatar.cc
الهندسة المعمارية:
هندسة معمارية GetX بأ控制 واحد، حيث تُدار جميع الحالة في AppController واحد. الواجهة مقسمة إلى صفحات (الرئيسية، المفضلة، الملف الشخصي) وملفات تعريف الارتباط إعادة الاستخدام. بدون خلفية، بدون استدعاءات API — جميع البيانات مثبتة لأغراض العرض.
