تطبيقات فلاتر
تطبيق حساب المصروفات خطوة بخطوة
ماذا ستتعلم؟
- فهم فكرة تطبيق حساب المصروفات
- إنشاء مشروع فلاتر
- تصميم شاشة التطبيق
- إنشاء النموذج
- استخدام مكتبة خارجية لعرض التاريخ
- إضافة ستايل عام للتطبيق
- إضافة اللوجيك للتطبيق
- تعديل عرض البيانات وإضافة بيانات جديدة
- عرض نسب الأيام
- إنهاء التطبيق
عن الدورة
يشرح هذا الكورس بناء تطبيق لحساب المصروفات باستخدام فلاتر Flutter خطوة بخطوة، وهو تطبيق عملي تتعلم فيه كيف تحول الفكرة إلى تطبيق يعمل على الهاتف. يبدأ الكورس بنظرة عامة على التطبيق، ثم المرحلة الأولى وهي إنشاء المشروع والتصميم المبدئي لشاشة التطبيق وإنشاء النموذج. بعد ذلك تستخدم مكتبة خارجية لعرض التاريخ وتضيف ستايل عاما للتطبيق. وفي المرحلة الثانية تضيف اللوجيك للتطبيق، بما في ذلك اللوجيك الخاص بدورة حياة التطبيق، وتجري تعديلات في عرض البيانات وتضيف بيانات جديدة. وفي المرحلة الأخيرة تهيئ عرض نسب الأيام ثم تنهي التطبيق. يناسب الكورس من تعلم أساسيات فلاتر ولغة دارت ويريد تطبيقا عمليا، ويفضل أن تكون لديك معرفة أولية بهما قبل البدء. وبعده ستكون قادرا على إنشاء مشروع فلاتر وتصميم شاشاته وربطها بالبيانات وإضافة المنطق البرمجي وإنهاء تطبيق كامل بنفسك. الشرح عملي ومتدرج، وتتبع الدروس بالترتيب لتنتقل من الفكرة إلى التطبيق خطوة بعد خطوة.
نتائج متوقعة من الدورة
- تطوير تطبيقات احترافية باستخدام فلاتر
- إنشاء واجهات مستخدم جذابة وعالية الجودة
- تحسين أداء التطبيقات على أنظمة التشغيل المختلفة
- استخدام أدوات فلاتر لبناء تطبيقات بسرعة
- فهم كيفية التعامل مع البيانات في التطبيقات
- تطبيق مفاهيم البرمجة بلغة دارت
- تطوير مهارات البرمجة في بيئة حديثة
تقييمات المتدربين
محتوى الدورة
1تطبيق حساب المصروفات باستحدام فلاتر
12 درس
- نظرة عامه على التطبيقنظرة عامة على تطبيق المصاريف الشخصية الأسبوعية: عرض مصاريف كل يوم، وإضافة عملية شراء بالاسم والمبلغ والتاريخ، وتوزيع النسب، والمكونات التي سيبنى بها.4:55
- المرحلة الاولى - انشاء المشروعإنشاء مشروع Flutter جديد في Android Studio وضبط إعداداته الأساسية، ثم تنظيف كود main وتسمية التطبيق وتشغيله على المحاكي.7:41
- التصميم المبدئي لشاشة التطبيقيبني التصميم المبدئي للشاشة الرئيسية بفصل الـ Widgets في ملفات مستقلة، وإضافة IconButton وonPressed لإضافة مشتريات، وتوزيع Container وCard بالمسافات والظل.14:33
- انشاء النموذجينشئ نموذج Transaction داخل مجلد models، ويعرّف قائمة المعاملات، ثم يصمم عرض كل معاملة بعناصر مثل Container وText وIconButton لإضافة إمكانية حذف العنصر.13:43
- استخدام مكتبة خارجية لعرض التاريخيفصل الكود في ملفات ومجلدات منظمة، وينشئ widgets مستقلة، ثم يستخدم حزمة intl لعرض التاريخ بتنسيق مناسب بعد إضافتها في pubspec.yaml وإعادة تشغيل التطبيق.9:03
- اضافة ستايل عام للتطبيقيضبط الثيم العام للتطبيق في ملف main.dart، مثل الخط والصورة الافتراضية عند غياب البيانات وتسجيلها في pubspec.yaml، ويثبّت اتجاه الشاشة باستخدام SystemChrome.8:00
- المرحلة الثانية - اضافة اللوجيك للتطبيقيبدأ كتابة منطق التطبيق في ملف home، فيعرّف getter لإرجاع المعاملات، وميثود لإضافة معاملة جديدة بعنوان ومبلغ، وميثود لحذف معاملة بحسب المعرّف.12:20
- إضافة اللوجيك الخاص بدورة حياة التطبيقيفتح نافذة إضافة معاملة من زر الأيقونة، ويحسب الارتفاع المتاح بـ MediaQuery لتوزيع الشاشة بين الرسم البياني والقائمة بنسب، ويضيف FloatingActionButton.13:10
- تعديلات في عرض البياناتيعدّل طريقة عرض المعاملات، فيستبدل Container بـ CircleAvatar داخل ListTile، وينشئ widget مستقلة لقائمة المعاملات، ويعرض صورة ورسالة عندما تكون القائمة فارغة.16:24
- اضافة بيانات جديدةينشئ شاشة إدخال معاملة جديدة بحقول نصية وزر لاختيار التاريخ عبر date picker، ويتحقق من القيم المدخلة، ثم يضيف المعاملة ويغلق النافذة باستخدام Navigator.pop.24:40
- المرحلة الاخيرة - تهيئة عرض نسب الاياميبدأ بناء الرسم البياني، فيحسب مجموع مبالغ المعاملات لكل يوم من الأيام الأخيرة، ويستخرج اسم اليوم، ثم يجهز هذه القيم لتمريرها إلى widget عمود الرسم.17:13
- انهاء التطبيقينشئ widget اسمها ChartBar تستقبل اليوم والمبلغ والنسبة، وتعرض المبلغ داخل FittedBox وعمودا بارتفاع يتناسب مع النسبة وحواف دائرية، ثم يختبرها بإضافة معاملات.17:19
المحاضر
م/عمرو عبد الفتاح
