دورة Flutter: أساسيات تطوير التطبيقات

قبل أن نبدأ، سأوضح لك لماذا أصبحت فلاتر من أكثر التقنيات انتشارًا في تطوير التطبيقات، وما الفرق بينها وبين تطوير التطبيقات بالطريقة التقليدية. كما ستتعرف على مفهوم الكروس بلاتفورم، ولماذا تعتمد الشركات عليه، ثم ننتقل إلى أبرز المزايا التي جعلت فلاتر خيارًا مفضلًا لدى كثير من المطورين والشركات.

في هذه الحلقة سننشئ أول مشروع باستخدام Flutter، ثم آخذك في جولة سريعة داخل بيئة العمل لتتعرف على أهم أجزاء المشروع ووظيفة كل منها. كما سأوضح لك الملفات والمجلدات التي ستتعامل معها باستمرار خلال الكورس، حتى تبدأ رحلتك وأنت تمتلك تصورًا واضحًا عن بنية مشاريع Flutter.

قبل أن نبدأ في كتابة الكود، سأشرح لك أهم المفاهيم التي ستعتمد عليها طوال رحلتك مع Flutter. ستتعرف على فكرة الـ Widgets وكيفية بناء واجهات التطبيق من خلالها، إلى جانب مفهوم Widget Tree، والفرق بين Stateless وStateful، حتى تصبح مستعدًا لتطبيق كل ذلك عمليًا في الحلقات القادمة.

في هذه الحلقة سنبدأ بكتابة أول كود فعلي في مشروعنا، حيث سننشئ الهيكل الأساسي للتطبيق باستخدام MaterialApp وScaffold، ثم نبدأ بتنفيذ أول جزء من التصميم وهو شريط التطبيق (AppBar). كما سأوضح لك بعض المفاهيم المهمة التي ستستخدمها باستمرار أثناء تطوير تطبيقات Flutter، لتتمكن من متابعة تنفيذ الواجهة بثقة في الحلقات القادمة.

في هذه الحلقة سأوضح لك كيفية تنظيم المشروع من خلال فصل مكونات التطبيق إلى Widgets مستقلة، لتصبح الشيفرة أكثر ترتيبًا وأسهل في التطوير والصيانة. كما ستتعرف على مفهوم الـ Root Widget، وطريقة استخدام StatelessWidget في بناء الواجهات، إلى جانب بعض الاختصارات التي ستوفر عليك الوقت أثناء كتابة الكود.

في هذه الحلقة سنتعمق في التعامل مع Text Widget، ونتعرف على أهم الخصائص التي تمنحك تحكمًا كاملًا في تنسيق النصوص ومحاذاتها وطريقة عرضها داخل الواجهة. كما سأوضح لك كيفية الاستفادة من الـ Documentation واكتشاف خصائص الـ Widgets، حتى تتمكن من تطبيقها بسهولة أثناء تطوير واجهاتك.

في هذا الدرس سأشرح لك كيفية استخدام Column لترتيب عدة عناصر فوق بعضها داخل واجهة التطبيق، مع توضيح الفرق بينه وبين Center، وكيفية التحكم في محاذاة العناصر وتوزيع المسافات بينها باستخدام MainAxisAlignment وCrossAxisAlignment، حتى تتمكن من تنفيذ تصميمات Figma بدقة.

في هذه الحلقة سأشرح لك كيفية استخدام Row لوضع العناصر بجانب بعضها بطريقة صحيحة، مع توضيح الفرق بينها وبين Column، وكيفية التحكم في توزيع العناصر ومحاذاتها داخل الواجهة. كما سنتعرف على بعض الأدوات التي تساعدك على فهم طريقة توزيع المساحات، لتصبح قادرًا على بناء واجهات أكثر تنظيمًا.

في هذه الحلقة سأشرح لك كيفية إضافة الصور إلى مشروعك بدايةً من تصديرها من Figma، ثم تنظيمها داخل المشروع واستخدامها داخل الواجهة. كما ستتعرف على طرق عرض الصور المختلفة، وأهم الخصائص التي تساعدك على التحكم في حجمها وطريقة ظهورها بما يتناسب مع تصميم التطبيق.

في هذه الحلقة سأوضح لك كيفية استخدام CircleAvatar لعرض الصور داخل إطار دائري، مع التعرف على أهم الخصائص التي تساعدك على التحكم في حجمها ومظهرها. كما ستتعلم كيف تستخدمها مع الصور المحلية أو صور الإنترنت، وحتى مع النصوص والعناصر الأخرى داخل التطبيق.

في هذه الحلقة سنواصل تنفيذ تصميم بطاقة الأعمال من خلال إضافة النصوص وتنسيقها بما يتوافق مع التصميم. كما سأوضح لك كيفية استخراج خصائص النصوص والمسافات من Figma، واستخدام SizedBox لإنشاء تباعد منظم بين عناصر الواجهة، لتصبح أقرب ما تكون إلى التصميم الأصلي.

في هذه الحلقة سأوضح لك كيفية إضافة الخطوط المخصصة إلى مشروعك وربطها بالتطبيق، حتى تحصل على نفس المظهر الموجود في التصميم. كما ستتعرف على الطريقة الصحيحة لتطبيق الخط على جميع النصوص من مكان واحد، لتجنب تكرار الكود وجعل مشروعك أكثر تنظيمًا وسهولة في التعديل.

في هذه الحلقة سأوضح لك كيفية استخدام Divider لإضافة فواصل بين عناصر الواجهة بطريقة احترافية، مع التعرف على أهم الخصائص التي تساعدك على التحكم في سمك الخط ولونه والمسافات المحيطة به، حتى تحصل على تصميم أكثر ترتيبًا وقربًا من النموذج الأصلي.

في هذه الحلقة سأوضح لك كيف تجعل مشروعك أكثر تنظيمًا من خلال إنشاء مكونات قابلة لإعادة الاستخدام بدلًا من تكرار الكود. ستتعرف على كيفية تحويل العناصر المتكررة إلى Widgets مستقلة، وتمرير الخصائص إليها، لتسهّل عملية التعديل والصيانة مع نمو المشروع.

في هذه الحلقة سنستخدم Container لبناء أحد أهم أجزاء التصميم، حيث سنجمع الأيقونات والنصوص داخل عنصر واحد مع إضافة الخلفية والمسافات والتنسيقات اللازمة. كما سأوضح لك الفرق بين Margin وPadding، وكيفية استخدام BoxDecoration لإنشاء عناصر أكثر احترافية وقربًا من التصميم.

في هذه الحلقة سأوضح لك كيف تجعل المكونات القابلة لإعادة الاستخدام أكثر مرونة من خلال استخدام القيم الافتراضية. ستتعرف على طريقة تعيين لون افتراضي للنصوص مع إمكانية تغييره عند الحاجة، لتقلل تكرار الكود وتحافظ على سهولة تطوير المشروع وتعديله.

في هذه الحلقة سننهي تنفيذ تطبيق بطاقة الأعمال من خلال استكمال آخر عناصر الواجهة، ثم نعيد تنظيم الكود بتحويل الأجزاء المتكررة إلى مكونات قابلة لإعادة الاستخدام. وبذلك تنهي أول مشروع عملي لك، مع تطبيق عدد من أهم المفاهيم التي ستبني عليها مشاريعك القادمة.

في هذه الحلقة سنبدأ العمل على مشروع جديد من خلال إنشاء شاشة تسجيل الدخول، مع إعادة تنظيم ملفات المشروع وفصل مكوناته بطريقة تسهّل تطويره وصيانته. كما ستتعرف على كيفية استخدام AppBar وإضافة العنوان والأيقونات وتخصيصها، لتضع الأساس الذي سنبني عليه بقية عناصر الشاشة التفاعلية.

في هذه الحلقة سأعرفك على TextField، وهو أحد أهم العناصر التفاعلية في التطبيقات. سنتعلم كيفية إنشاء حقول إدخال مخصصة، واختيار نوع لوحة المفاتيح المناسب، وتنسيق الحقل باستخدام InputDecoration، مع التعرف على أبرز الخصائص التي تمنحك تحكمًا كاملًا في مظهره وسلوكه.

في هذه الحلقة سنستكمل التعرف على أهم خصائص TextField، بدءًا من تخصيص مظهر حقل الإدخال، ووصولًا إلى التعامل مع تفاعل المستخدم أثناء الكتابة وبعد الانتهاء منها. كما ستتعرف على استخدام الأيقونات داخل الحقول، لتتمكن من إنشاء حقول إدخال أكثر احترافية وسهولة في الاستخدام.

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

في هذه الحلقة ستتعرف على كيفية تحويل الأيقونات إلى عناصر تفاعلية باستخدام IconButton، وتنفيذ أوامر عند الضغط عليها أو الضغط المطول. كما سأجهز معك الأساس اللازم لتطبيق ميزة إظهار كلمة المرور وإخفائها في الحلقات التالية.

في هذا الدرس سأشرح لك كيفية تنفيذ ميزة إظهار وإخفاء كلمة المرور داخل حقل الإدخال، مع توضيح سبب استخدام متغير من النوع Boolean لإدارة هذه الحالة. كما ستكتشف لماذا لا تتحدث واجهة المستخدم تلقائيًا عند تغيير قيمة المتغير داخل StatelessWidget، تمهيدًا للانتقال إلى الحل الصحيح في الدرس التالي.

في هذا الدرس سأشرح لك كيفية تحويل StatelessWidget إلى StatefulWidget، مع توضيح الفرق بينهما ودور كل جزء منهما. كما ستتعلم كيفية استخدام setState لتحديث واجهة المستخدم عند تغيير البيانات، وتطبيق ذلك عمليًا لإكمال ميزة إظهار وإخفاء كلمة المرور.

في هذه الحلقة سنتعرف على كيفية إنشاء زر تسجيل الدخول باستخدام ElevatedButton، ثم نبدأ بتخصيص شكله ليطابق التصميم من خلال التحكم في الألوان والحواف والمسافات والأبعاد. كما سأوضح لك كيفية استخدام Spacer لتوزيع العناصر داخل الواجهة بطريقة مرنة تناسب مختلف أحجام الشاشات.

في هذه الحلقة سنتعرف على كيفية استخدام TextButton لإضافة عناصر نصية قابلة للتفاعل داخل الواجهة، مثل رابط "Forgot Password?". كما سأوضح لك بعض الممارسات التي تساعد على تنظيم الكود وجعله أكثر وضوحًا، تمهيدًا للتعامل مع عناصر تفاعلية أكثر تقدمًا في الحلقات القادمة.

في هذه الحلقة ستتعرف على Widget مهمة تمنح أي عنصر داخل الواجهة إمكانية التفاعل مع المستخدم، دون الحاجة إلى استخدام الأزرار التقليدية. كما سأوضح لك كيفية استخدام InkWell مع عناصر مختلفة، والتحكم في مساحة النقر للحصول على تجربة استخدام أكثر احترافية.

في هذه الحلقة سأوضح لك كيفية استخدام IconButton لإضافة التفاعل إلى أيقونة حقل كلمة المرور، لتصبح قابلة للنقر وتنفيذ الأوامر. كما سنتعرف على أهم الخصائص المرتبطة بها، تمهيدًا لتطبيق ميزة إظهار كلمة المرور وإخفائها في الخطوة التالية.

في هذه الحلقة سنجري مجموعة من التحسينات على حقول الإدخال لجعل تجربة الاستخدام أكثر احترافية وتناسقًا مع تصميم التطبيق. كما سأوضح لك كيفية تخصيص مظهر النص الذي يكتبه المستخدم ولون مؤشر الكتابة، مع تنفيذ بعض عمليات تنظيم الكود التي تسهّل تطوير المشروع وصيانته.

في هذا الدرس سأشرح لك كيفية استخدام TextFormField للتحقق من صحة البيانات التي يُدخلها المستخدم قبل تنفيذ أي عملية. كما ستتعرف على كيفية استخدام Form وGlobalKey وvalidator لكتابة قواعد التحقق، مع تطبيق ذلك عمليًا على حقول البريد الإلكتروني وكلمة المرور، والتعرف على أساسيات استخدام Regex في عمليات التحقق المتقدمة.

بعد الانتهاء من التحقق من صحة بيانات تسجيل الدخول، جاء الوقت للتعرف على أول أسلوب للتنقل بين الشاشات في Flutter باستخدام Navigator.push. في هذه الحلقة ستتعلم كيفية فتح شاشة جديدة بعد نجاح عملية التحقق، وستفهم دور Navigator وMaterialPageRoute وBuilder، وكيفية ربط عملية تسجيل الدخول بالانتقال إلى صفحة أخرى بطريقة صحيحة ومنظمة.

في هذه الحلقة ستتعرف على الأنواع الأساسية للتنقل بين الشاشات في Flutter، وستفهم الفرق بين Push وPushReplacement وPop من خلال مفهوم Stack، وكيف يؤثر كل أسلوب في تجربة المستخدم. كما ستتعلم متى تستخدم كل طريقة، ولماذا تُستخدم PushReplacement في شاشات تسجيل الدخول، مع تطبيق عملي يوضح الفرق بين الاحتفاظ بالشاشة الحالية واستبدالها بالكامل.

في هذه الحلقة ستتعرف على طريقة استخدام Navigator.pop للعودة إلى الشاشة السابقة، وستفهم علاقته بمفهوم Stack وآلية التنقل بين الصفحات في Flutter. كما سأوضح لك الفرق العملي بين Push وPushReplacement وPop، وكيفية إنشاء زر رجوع مخصص والتحكم في سلوك التنقل داخل التطبيق.

في هذه الحلقة ستتعلم أول طريقة لتمرير البيانات بين الشاشات في Flutter، وذلك بالاعتماد على الـ Constructor. سأوضح لك كيفية استقبال البيانات داخل الشاشة الجديدة، وتمريرها أثناء عملية التنقل، ثم استخدامها لعرض محتوى ديناميكي بدلًا من القيم الثابتة، تمهيدًا للتعامل مع بيانات المستخدم الحقيقية في الخطوات التالية.

في هذه الحلقة ستتعرف على TextEditingController ودوره في التحكم ببيانات حقول الإدخال داخل التطبيق. سأوضح لك كيفية قراءة النص الذي يكتبه المستخدم، وتعديله أو مسحه برمجيًا، ثم استخدام هذه البيانات الحقيقية بدلًا من القيم الثابتة، تمهيدًا لربطها بعمليات تسجيل الدخول والتنقل بين الشاشات.

في هذه الحلقة ستتعرف على SingleChildScrollView ودورها في جعل الواجهات قابلة للتمرير عند زيادة المحتوى أو ظهور لوحة المفاتيح. كما سأوضح لك كيفية استخدامها مع Column وRow، والتحكم في اتجاه التمرير، لتتجنب مشكلات Overflow وتوفر تجربة استخدام أكثر سلاسة داخل تطبيقاتك.

في هذه الحلقة ستتعرف على ListView كأحد أهم عناصر التمرير في Flutter، وستفهم متى يمكن استخدامها بدلًا من SingleChildScrollView مع Column، وكيفية التحكم في اتجاه التمرير داخلها. كما سأقدم لك تمهيدًا لأنواع ListView المختلفة، ولماذا يُعد اختيار النوع المناسب منها مهمًا لتحسين أداء التطبيق.

في هذه الحلقة ستتعرف على SingleChildScrollView ودورها في حل مشكلات Overflow وجعل الواجهات قابلة للتمرير بسلاسة. كما سأوضح لك أهم حالات استخدامها مع Column وRow وحقول الإدخال، وكيفية التحكم في اتجاه التمرير وسلوكه لتحسين تجربة المستخدم داخل التطبيق.

في هذه الحلقة ستتعلم كيفية إنشاء مكون إدخال (Reusable TextFormField) يمكن إعادة استخدامه في جميع أجزاء التطبيق، مع دعم تمرير الخصائص المختلفة مثل Controller ونوع لوحة المفاتيح ورسائل التحقق من صحة البيانات، بالإضافة إلى التعامل مع حقول كلمة المرور وإظهارها أو إخفائها باستخدام مكون واحد مرن يسهل تطويره وصيانته ويقلل تكرار الكود وفق مبدأ DRY.

في هذه الحلقة ستتعلم كيف تستفيد من المكونات القابلة لإعادة الاستخدام (Reusable Components) لإجراء التعديلات من مكان واحد فقط، ثم ستتعرف على كيفية تمرير بيانات الاسم والوظيفة ورقم الهاتف من شاشة تسجيل الدخول إلى شاشة بطاقة الأعمال باستخدام الـ Controllers والـ Constructor، مع استبدال البيانات الثابتة بالبيانات التي يُدخلها المستخدم وعرضها داخل الواجهة.

في هذه الحلقة ستتعرف على Widget ‏ListTile وكيفية استخدامها لبناء عناصر القوائم بطريقة احترافية مع تقليل كمية الكود، كما ستتعلم الفرق بينها وبين استخدام Row التقليدي، وكيفية الاستفادة من الأجزاء الجاهزة مثل العنوان والعنوان الفرعي والعناصر الجانبية، بالإضافة إلى دعم النقر على العنصر بالكامل لبناء صفحات المستخدم والإعدادات والقوائم المشابهة بسهولة.

في هذه الحلقة ستتعلم كيفية استخدام ListView.builder لبناء قوائم ديناميكية بكفاءة عالية، مع تحويل عناصر ListTile إلى مكونات قابلة لإعادة الاستخدام، والاعتماد على القوائم والمؤشرات لعرض البيانات تلقائيا بدلا من تكرار الكود، كما ستتعرف على الفرق في الأداء بين ListView العادية وListView.builder ولماذا يعد الأخير الخيار الأفضل عند التعامل مع عدد كبير من العناصر.

في هذه الحلقة ستتعلم كيفية استخدام ListView.separated لإنشاء قوائم تحتوي على فواصل أو مسافات بين العناصر، مع التعرف على دور separatorBuilder وكيفية استخدامه لإضافة Divider أو أي مكون مخصص بين عناصر القائمة، بالإضافة إلى فهم الفرق بين ListView.builder وListView.separated والتعرف على أسلوب كتابة الدوال المختصر (Arrow Function) لتنظيم الكود بصورة أفضل.

في هذه الحلقة ستتعرف على وظيفة الخاصية shrinkWrap داخل ListView، ومتى تحتاج إلى استخدامها عند وضع القائمة داخل عناصر أخرى مثل Column، كما ستفهم تأثيرها على الأداء، والفرق بينها وبين استخدام Expanded، وكيفية التعامل مع تعارض التمرير بين العناصر الأب والابن للوصول إلى واجهات أكثر كفاءة وتنظيماً.

في هذه الحلقة ستتعرف على عنصر Floating Action Button وكيفية إضافته داخل Scaffold، مع تخصيص شكله وموقعه باستخدام الخصائص المختلفة مثل الأيقونة والألوان وموضع الزر. كما ستتعلم كيفية استخدام أكثر من زر عائم في الوقت نفسه من خلال دمجه مع عناصر مثل Column، لتفهم كيف يمكن تركيب مكونات Flutter معًا لبناء واجهات أكثر مرونة واحترافية.

في هذه الحلقة ستتعرف على Badge Widget وكيفية استخدامها لإظهار شارة صغيرة فوق أي عنصر في الواجهة، مثل عرض عدد الإشعارات أو العناصر داخل سلة التسوق. كما ستتعلم كيفية إضافة محتوى الشارة باستخدام label، وتخصيص مظهرها من خلال تغيير حجم النص والألوان وبعض خصائص التنسيق الأساسية للحصول على تصميم يتوافق مع واجهة التطبيق.

في هذه الحلقة ستتعرف على GridView وكيفية استخدامها لعرض العناصر في شبكة بدلاً من قائمة، مع التحكم في عدد العناصر داخل كل صف باستخدام Cross Axis Count. كما ستتعلم كيفية ضبط المسافات بين العناصر والصفوف، وتحديد أبعاد كل عنصر باستخدام Child Aspect Ratio، بالإضافة إلى التعرف على أهم خصائص GridView مثل اتجاه التمرير وPadding، تمهيدًا للانتقال إلى GridView.builder في الحلقة القادمة.

في هذه الحلقة ستتعرف على GridView.builder وكيفية استخدامها لعرض عدد كبير من العناصر بكفاءة أعلى، من خلال بناء العناصر الظاهرة على الشاشة فقط. كما ستتعلم كيفية استخدام itemBuilder وitemCount مع القوائم الديناميكية، والاستفادة من index لعرض بيانات مختلفة لكل عنصر، مما يساعد على تحسين أداء التطبيق عند التعامل مع أعداد كبيرة من العناصر.

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

في هذه الحلقة ستتعلم كيفية إعادة هيكلة شاشة GridView بعد اكتمال بنائها، من خلال فصل نموذج البيانات (Model)، واستخراج عناصر الواجهة إلى مكونات قابلة لإعادة الاستخدام، وتنظيم الملفات داخل المشروع. كما ستتعرف على أفضل الممارسات لتمرير الكائنات (Models) إلى المكونات بدلاً من الاعتماد على الفهرس، مما يجعل الكود أكثر تنظيماً وأسهل في التطوير والصيانة مستقبلاً.

في هذه الحلقة ستتعرف على Widget ‏Stack وكيفية استخدامها لوضع عدة عناصر فوق بعضها البعض، مثل عرض نص أو شارة فوق صورة. كما ستتعلم ترتيب العناصر داخل Stack، وتأثير ترتيبها على الواجهة، وإضافة مسافات وتنسيقات بسيطة للوصول إلى تصميم قريب من النموذج، تمهيدًا لتعلم كيفية التحكم في مواضع العناصر داخل Stack في الحلقة القادمة.

في هذه الحلقة ستتعرف على Widget ‏Align وكيفية استخدامها مع Stack لمحاذاة العناصر في أماكن مختلفة مثل أعلى أو أسفل أو يمين أو يسار المكون. كما ستتعلم التحكم في موضع النصوص والعناصر المتراكبة باستخدام خيارات المحاذاة الجاهزة، وتتعرف على حدود Align، ولماذا نحتاج إلى Widgets أخرى عندما نريد تحديد موضع عنصر بدقة أكبر داخل الواجهة.

في هذه الحلقة ستتعرف على Widget ‏Positioned وكيفية استخدامها مع Stack لوضع العناصر في أماكن محددة بدقة داخل الواجهة. ستتعلم الفرق بينها وبين Align، وكيفية التحكم في المسافات من الأعلى والأسفل واليمين واليسار، بالإضافة إلى طريقة استخراج هذه القيم من التصميم في Figma للحصول على واجهات مطابقة للتصميم الأصلي.

في هذه الحلقة ستتعرف على Widget ‏Bottom Navigation Bar وكيفية استخدامها لإنشاء شريط تنقل سفلي يتيح الانتقال بين صفحات التطبيق. ستتعلم كيفية إضافة عناصر التنقل باستخدام BottomNavigationBarItem، وتخصيص الأيقونات والعناوين والألوان، مع التعرف على أهم الخصائص التي تمهد لربط الشريط بالتنقل بين الشاشات في الفيديوهات القادمة.

في هذه الحلقة ستتعلم كيفية تفعيل التنقل بين صفحات التطبيق باستخدام Bottom Navigation Bar، وذلك من خلال تحويل الشاشة إلى Stateful Widget واستخدام setState لتحديث واجهة المستخدم. كما ستتعرف على آلية عرض الصفحات بالاعتماد على Current Index وقائمة الشاشات، بالإضافة إلى تخصيص بعض خصائص شريط التنقل السفلي وتنفيذ مهمة عملية لإضافة تبويب جديد وربطه بشاشة مستقلة.

في هذه الحلقة ستتعرف على Widget ‏TabBar وكيفية استخدامها لإنشاء تبويبات للتنقل بين صفحات التطبيق من أعلى الشاشة. ستتعلم كيفية إعداد DefaultTabController وربط TabBar مع TabBarView، وإضافة تبويبات جديدة، بالإضافة إلى تخصيص مظهرها من خلال أهم الخصائص، مع التعرف على أفضل الممارسات لاستكشاف خصائص Widgets والاعتماد على التوثيق الرسمي أثناء التطوير.

في هذه الحلقة ستتعرف على مفهوم البرمجة غير المتزامنة (Asynchronous Programming) في Dart، ولماذا نحتاج إليها عند التعامل مع العمليات التي تستغرق وقتًا طويلًا مثل الاتصال بالإنترنت أو قواعد البيانات وقراءة الملفات. كما ستفهم طبيعة تنفيذ المهام في Dart بنظام الخيط الواحد (Single Thread)، وكيف يمكن للعمليات البطيئة أن تؤثر في استجابة التطبيق، تمهيدًا للتعرف على الحلول العملية في الدروس القادمة.

في هذه الحلقة ستتعرف على أول أدوات البرمجة غير المتزامنة في Dart، وهي Future، وكيف تساعد على تنفيذ المهام التي تستغرق وقتًا دون إيقاف التطبيق. كما ستتعلم استخدام then لاستقبال النتائج بعد انتهاء التنفيذ، وcatchError لمعالجة الأخطاء، وتحويل الدوال إلى دوال غير متزامنة باستخدام Future وasync، بالإضافة إلى استخدام Future.delayed لتأخير تنفيذ المهام لفترة زمنية محددة.

في هذه الحلقة ستتعرف على الكلمتين المفتاحيتين async وawait، وكيفية استخدامهما مع Future للتحكم في ترتيب تنفيذ العمليات غير المتزامنة. كما ستتعلم الفرق بين await وthen، وطريقة التعامل مع الأخطاء باستخدام try وcatch وfinally، لضمان تنفيذ المهام التي تعتمد على نتائج عمليات مثل استدعاء واجهات API أو قواعد البيانات بصورة صحيحة وآمنة.

في هذه الحلقة ستتعرف على FutureBuilder وكيفية استخدامه داخل واجهات Flutter لعرض نتائج العمليات غير المتزامنة. كما ستتعلم كيفية التعامل مع حالات التحميل واكتمال التنفيذ من خلال ConnectionState، واستخدام Snapshot للوصول إلى البيانات القادمة من Future، وعرض واجهات مختلفة بحسب حالة العملية والبيانات المستلمة.

في هذه الحلقة ستتعرف على مفهوم Stream في Dart، والفرق بينه وبين Future، وكيف يُستخدم لاستقبال تدفق مستمر من البيانات بدلاً من نتيجة واحدة. كما ستتعلم استخدام Stream.periodic لإنشاء تدفق بيانات دوري، والاستماع إلى التحديثات باستخدام listen، مع التعرف على أبرز الحالات العملية التي يعتمد فيها التطبيق على التحديثات اللحظية مثل الرسائل الفورية وبيانات الحساسات.

في هذه الحلقة ستتعرف على StreamBuilder وكيفية استخدامه داخل Flutter لبناء واجهات تتحدث تلقائيًا مع تدفق البيانات المستمر. كما ستتعلم كيفية التعامل مع حالات ConnectionState، واستخدام AsyncSnapshot للوصول إلى البيانات القادمة من Stream، والفرق العملي بين StreamBuilder وFutureBuilder، ومتى يكون كل منهما الخيار المناسب داخل التطبيق.

في هذه الحلقة ستتعرف على Shared Preferences وكيفية استخدامها لحفظ البيانات البسيطة محليًا داخل تطبيقات Flutter باستخدام نظام المفتاح والقيمة. كما ستتعلم كيفية تثبيت الحزمة وإضافة البيانات واسترجاعها، والتعامل معها باستخدام Future وasync وawait، مع تطبيق عملي يوضح تحديث واجهة المستخدم وحفظ البيانات واستعادتها حتى بعد إعادة تشغيل التطبيق.

في هذه الحلقة ستتعرف على أساسيات التعامل مع واجهات البرمجة (API) داخل Flutter من خلال إرسال طلب HTTP وجلب البيانات باستخدام حزمة HTTP. كما ستتعلم كيفية استخدام FutureBuilder لانتظار البيانات القادمة من الإنترنت، وفك ترميز JSON للوصول إلى محتوى الاستجابة، مع تطبيق عملي يمهد لبناء واجهات تعتمد على البيانات الخارجية.

في هذه الحلقة ستتعلم كيفية عرض جميع البيانات القادمة من API داخل التطبيق باستخدام FutureBuilder وقائمة ديناميكية، مع تحويل بيانات JSON إلى قائمة من الخرائط، وبناء عناصر الواجهة اعتمادًا على البيانات المسترجعة، والتعامل مع الأخطاء الشائعة مثل أنواع البيانات وحدود القوائم، حتى تتمكن من إنشاء واجهات تعرض بيانات حقيقية قادمة من الإنترنت.

في هذه الحلقة ستتعلم كيفية عرض جميع البيانات القادمة من API داخل Flutter باستخدام ListView Builder وFutureBuilder، مع التعامل مع بيانات JSON، وتحويل أنواع البيانات عند الحاجة، وبناء قائمة ديناميكية تعرض المنشورات كاملة، إضافة إلى فهم دور JSON Decode وأفضل الممارسات لتطبيق مفاهيم البرمجة غير المتزامنة عمليًا.

في هذه الحلقة ستتعرف على أبرز مشكلات setState في Flutter، مثل تمرير البيانات بين المكونات، وتعقيد تنظيم الكود، وإعادة بناء أجزاء كبيرة من الواجهة دون حاجة، مع تطبيق عملي يوضح تأثير هذه المشكلات ولماذا نلجأ إلى حلول إدارة الحالة في التطبيقات الكبيرة.

في هذه الحلقة ستتعرف على مفهوم إدارة الحالة في Flutter، ولماذا نحتاج إلى حلول مثل Cubit وBLoC بدلًا من الاعتماد على setState، مع فهم كيفية حل مشكلات تمرير البيانات، وفصل منطق التطبيق عن واجهة المستخدم، وتقليل عمليات إعادة بناء الواجهة، تمهيدًا لتطبيق إدارة الحالة عمليًا في الدروس القادمة.

في هذه الحلقة ستتعرف على آلية عمل Cubit في Flutter ودوره في إدارة الحالة، وكيف يعمل وسيطًا بين واجهة المستخدم ومصادر البيانات، مع فهم مفهوم الحالات (States)، وطريقة تنظيم ملفات Cubit وState، وكيفية فصل منطق التطبيق عن واجهة المستخدم تمهيدًا لتطبيق إدارة الحالة عمليًا.

في هذه الحلقة ستتعلم كيفية استخدام BlocProvider لتوفير Cubit داخل شجرة الويدجت في Flutter، وكيفية الوصول إلى الدوال والمتغيرات الموجودة داخل Cubit من أي جزء في التطبيق، مع فهم سبب ظهور أخطاء السياق (Context) وطريقة حلها، تمهيدًا لتحديث واجهة المستخدم باستخدام حالات Cubit في الدروس التالية.

في هذه الحلقة ستتعلم كيفية استخدام BlocBuilder لتحديث واجهة المستخدم عند تغيّر الـ State داخل Cubit، وستفهم دور emit في إرسال الحالات الجديدة، ولماذا لا يكفي تعديل البيانات وحده، بالإضافة إلى الطريقة الصحيحة لاستخدام BlocBuilder لتحديث الأجزاء التي تتغير فقط وتحسين أداء التطبيق.

في هذه الحلقة ستتعلم كيفية استخدام BlocListener للاستماع إلى تغيّر الـ State داخل Cubit، والفرق بينه وبين BlocBuilder، وأهم حالات استخدامه مثل عرض رسائل Snackbar، والتنقل بين الصفحات، وتنفيذ الإجراءات التي تعتمد على تغيّر الحالة دون إعادة بناء واجهة المستخدم.

في هذه الحلقة ستتعلم كيفية استخدام BlocConsumer للجمع بين BlocListener وBlocBuilder داخل Widget واحدة، وستفهم متى تستخدم BlocConsumer، ومتى يكون BlocListener أو BlocBuilder هو الخيار الأنسب، وكيفية تنفيذ الاستماع إلى الـ State وإعادة بناء واجهة المستخدم في الوقت نفسه.

في هذه الحلقة ستتعلم كيفية استخدام BlocObserver لمراقبة دورة حياة الـ Cubit وتتبع انتقالات الـ State، مع التعرف على دوره في تسجيل الأحداث مثل إنشاء الـ Cubit وإغلاقه وانتقال الحالات والأخطاء، وكيف يساعد في تصحيح الأخطاء وفهم سير التطبيق أثناء التطوير.

في هذه الحلقة ستطبق مفاهيم Cubit عمليًا من خلال تنفيذ طلب إلى API وإدارة دورة حياة البيانات باستخدام حالات التحميل والنجاح والخطأ، مع بناء واجهة تتفاعل مع كل حالة عبر BlocProvider وBlocBuilder، والتعرف على كيفية تنظيم منطق التطبيق وفصل إدارة البيانات عن واجهة المستخدم.

في هذه الحلقة ستتعرف على خريطة الطريق الكاملة لتعلم Flutter، بدايةً من إتقان لغة Dart وتصميم واجهات المستخدم، مرورًا بالبرمجة غير المتزامنة وإدارة الحالة، وصولًا إلى التصميم المتجاوب والتعامل مع Figma وواجهات البرمجة وFirebase، مع توضيح أفضل ترتيب لتعلّم هذه المهارات والاستعداد للانتقال إلى المشاريع الاحترافية.