رفرفة البرنامج التعليمي الجزء 1: بناء التطبيق رفرفة من نقطة الصفر

تعرّف على كيفية بدء إنشاء تطبيق Flutter ، الجزء الأول من سلسلة البرنامج التعليمي flutter.

الجزء 1: كيفية بناء التطبيق رفرفة من نقطة الصفر

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

هذا البرنامج التعليمي هو الجزء الأول من سلسلة البرنامج التعليمي الرفرفة: -

  1. كيفية بناء التطبيق رفرفة من نقطة الصفر
  2. كيفية تخطيط تطبيق في الرفرفة (قريبًا)
  3. كيفية تنظيم البيانات في الرفرفة (قريبًا)
  4. سرد البيانات في الرفرفة (قريبًا)

المزيد من التحديثات على المحتوى ونحن نمضي قدمًا.

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

نحن في AviaCommerce نبحث بنشاط عن أطر جديدة تعيد تعريف تطوير البرمجيات. يتعقب فريقنا عن كثب النشاط في Flutter منذ إصداره التجريبي الأول.

أعلنت Google أخيرًا عن Flutter 1.0 ، وهو أول إصدار ثابت لمجموعة أدوات واجهة المستخدم لإنشاء تجارب محلية جميلة لنظامي التشغيل iOS و Android من قاعدة بيانات واحدة.

يحتوي Flutter على وثائق استثنائية لإعداد بيئة التطوير. اتبع دليل التثبيت الرسمي هذا للاستمرار.

بمجرد اكتمال الإعداد ، يمكننا البدء بمشروع اختبار جديد. أفضل تطبيق Android Studio لأنه يوفر تجربة IDE متكاملة ومتكاملة لـ Flutter. سيتطلب Android Studio مكونًا إضافيًا لمحرر Dart.

إطلاق Android Studio. يمكنك أن ترى خيارًا لتهيئة مشروع يستند إلى Flutter.

اختر تطبيق Flutter من قائمة التكوينات.

التفكير في اسم يتوهم لأول تطبيق رفرفة الخاص بك. أو اذهب مع المؤقت إذا كنت سيئًا في تسمية الأشياء مثلي .

خطوة أخيرة في العملية ، سيطلب منك مربع الحوار اسم حزمة التطبيق.

بعد هذه الخطوة ، ستقوم Flutter SDK بإنشاء بنية دليل أولية للتطبيق. كل الإجراءات تدخل داخل مجلد lib و main.dart هي نقطة الانطلاق في تنفيذ التطبيق.

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

النقطة الجيدة هي أن Flutter SDK ينشئ أداة تفاعلية في جذر التطبيق هنا نفسه. لتسهيل الأمور قليلاً ، دعنا نزيل ذلك ونبدأ بتصميم بسيط عاري (Hello World!).

يجب أن يبدو ملف main.dart الخاص بك كما يلي:

يؤدي إطلاق محاكي Android إلى فتحه باستخدام أداة نصية تحية "Hello World!"

لاحظ القطعة في التركيز هنا. سنحاول تعديل نص MaterialApp لإظهار الواجهة كما نريدها. النسخة الأصلية هي ما يظهر أدناه.

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

تقديم تخطيط الصف مع ثلاثة أطفال من الحاجيات النصية.

قبل أن نواصل تصميم المكونات ونصممها ، يُنصح بإنشاء عنصر واجهة تعامل مستخدم جديد يتعامل مع التصميم بحيث نتبع مبدأ DRY.

استبدل الأطفال الثلاثة بعنصر واجهة مستخدم مخصص تم تحديده لاحقًا في نفس الملف. يصبح الملف main.dart الآن

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

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

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

الضغط على زر تبديل isActive متغير.

دارت يأتي مع وحدة نمطية أنيقة لعمليات المزامنة. يمكننا استخدام فئة Timer لمساعدتنا في زيادة الثواني. تم تعديل TimerAppState الموضح أدناه. لاحظ أننا قمنا بإعادة تشكيل فئة Timer إلى TimerApp لمنع الغموض مع فئة Timer في الوحدة النمطية غير المتزامن.

التطبيق يعمل بكامل طاقته الآن. يمكن العثور على رمز main.dart الكامل هنا. آمل أن يوضح أساسيات إطار الرفرفة.

FLUTTERFORUM: مكان حيث يرفرف DEV HANGOUT

FlutterForum هو المكان الذي يتعطل فيه مطورو flutter ويشاركون في المحادثات والأسئلة.

زيارة https://flutterforum.co

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