Flutter بالعربي #2 🔥 | تصميم شاشة الأهداف والديون المالية UI | تطبيق مصروفي

بسم الله والصلاة والسلام على رسول الله ❤️ أهلًا بيكم في الحلقة الثانية من سلسلة بناء تطبيق **مصروفي (Masrofy) باستخدام Flutter**، والنهارده هنكمل بناء واجهات التطبيق، وهنصمم شاشتين مهمتين لإدارة الأهداف المالية والديون، مع تنظيم الكود بطريقة احترافية وقابلة للتطوير. 🚀 *محتويات الحلقة:* 🎯 أولًا: تصميم شاشة الأهداف المالية (Goals Screen) 1. إنشاء شاشة الأهداف المالية وربطها بالـ GoRouter. 2. تقسيم الأهداف إلى نشطة ومكتملة باستخدام Tabs. 3. تصميم كارت ملخص الأهداف وعدد الأهداف المكتملة. 4. إنشاء Goal Card لعرض اسم الهدف والمبلغ الحالي والمبلغ المستهدف. 5. عرض نسبة الإنجاز باستخدام Linear Progress Indicator. 6. تغيير ألوان الكروت والأيقونات حسب الـ Theme. 7. تصنيف الأهداف وعرضها حسب حالتها. 💳 ثانيًا: تصميم شاشة الديون (Debts Screen) 1. إنشاء شاشة الديون وإضافتها إلى نظام الـ Routing. 2. تقسيم الديون إلى جميع الديون والمتبقية والمسددّة. 3. تصميم كارت الملخص المالي لإجمالي الديون والمبالغ المتبقية. 4. عرض نسبة السداد باستخدام Circular Progress Indicator. 5. إنشاء Debt Card لعرض تفاصيل كل دين. 6. عرض المبلغ الإجمالي والمتبقي ونسبة السداد. 7. تصنيف الديون تلقائيًا حسب حالة السداد. 🧩 ثالثًا: تنظيم الكود تقسيم الواجهات إلى Widgets قابلة لإعادة الاستخدام. استخدام Lists و Maps لتنظيم البيانات وعرض العناصر. استخدام ListView.separated لعرض الكروت مع فواصل بينها. استخدام GoRouter للتنقل بين الشاشات. دعم Light Mode و Dark Mode. استخدام Progress Indicators لعرض نسب الإنجاز والسداد. 💻 *الكود المصدري للمشروع على GitHub:* https://github.com/osama-sn/masrofy/t... 🎯 هدفنا إننا نبني تطبيق Flutter حقيقي خطوة بخطوة، ونتعلم إزاي ننظم الواجهات والكود بطريقة تسهّل إضافة Features جديدة مستقبلًا. لو الفيديو أفادك، متنساش تعمل Like 👍 وتشترك في القناة وتفعّل الجرس 🔔 علشان تتابع باقي أجزاء السلسلة. 💬 *سؤال ليك:* تحب نكمل في الحلقات الجاية تصميم باقي الشاشات، ولا نبدأ ربط التطبيق بالـ Backend؟ #Flutter #FlutterArabic #Dart #FlutterUI #GoRouter #MobileDevelopment #FlutterTutorial #CleanCode