تثبيت منصة Flutter:

حدد نظام التشغيل الذي تريد أن تقوم بتثبيت منصة Flutter  عليه:

نظام تشغيل Windows.

نظام تشغيل macOS.

نظام تشغيل Linux.

نظام تشغيل Chrome OS.

تثبيت منصة  Flutter على نظام تشغيل Windows:

يضم القسم التالي العناوين التالية:

• متطلبات النظام.
• احصل على Flutter SDK .
  • قم بتحديث المسار path.
  • قم بتشغيل التعليمة التالية flutter doctor ضمن محرر الاوامر.
•  إعداد المنصة لتطوير تطبيقات Android
  • قم بتثبيت Android Studio
  • قم بإعداد جهاز Android الخاص بك
  • قم بإعداد محاكي لجهاز Android
• إعداد المنصة لتطوير تطبيقات الويب
• الخطوات الواجب تنفيذها بعد تثبيت المنصة.

متطلبات النظام:

لتثبيت منصة  Flutter وتشغيلها ، يجب أن تفي بيئة التطوير لديك بالحد الأدنى من المتطلبات التالية:

• نظام تشغيل Windows 7 SP1 أو أحدث (64 بت أو مستند إلى x86-64).
• مساحة خالية على القرص: 1.64 جيجا بايت ( هذا لا يشمل مساحة القرص المطلوبة لتثبيت الـ IDE والأدوات الأخرى التي ستذكر في البند التالي).
• الأدوات: تعتمد Flutter على توفر هذه الأدوات في بيئتك:
  • Windows PowerShell 5.0 أو أحدث (يكون مثبت مسبقًا مع Windows 10).
  • Git for Windowsx: مع خيار (Use Git from the Windows Command Prompt)

إذا كانت Git for Windows مثبتة بالفعل ، فتأكد من أنه يمكنك تشغيل أوامر git من موجه الأوامر أو PowerShell.

احصل على Flutter SDK:

• قم بتنزيل حزمة التثبيت التالية للحصول على أحدث إصدار ثابت من Flutter SDK:

لتحميل قنوات الإصدار (release channels) الأخرى  أوالإصدارات الأقدم ، راجع صفحة إصدارات SDK.

• قم باستخراج الملف المضغوط ووضع مجلد Flutter في مسار التثبيت المطلوب (مثلا C:\src\flutter).

تحذير: لا تقم بتثبيت Flutter في مسار مثل C: \ Program Files \ الذي يتطلب سماحيات وصول(privileges) عالية.

إذا كنت لا ترغب في تثبيت إصدار ثابت من حزمة التثبيت  المذكورة أعلاه، فيمكنك تخطي الخطوتين 1 و 2. وبدلاً من ذلك ، احصل على شيفرة المصدر (source code) من Flutter repo على GitHub ، وقم بتغيير الفروع (branches) أو العلامات (tags) حسب الحاجة. علي سبيل المثال، إذهب للمسار  C:/src وقم بتنفيذ التعليمة التالية:

git clone https://github.com/flutter/flutter.git -b stable

أنت جاهز الآن لتشغيل أوامر Flutter في Flutter Console.

قم بتحديث المسار path:

إذا كنت ترغب في تشغيل أوامر Flutter في محرر أوامر ويندوز العادية (cmd) ، فاتبع هذه الخطوات لإضافة Flutter إلى متغير البيئة  PATH:

• من شريط البحث الظاهر في قائمة إبدأ، أدخل كلمة “env” واختر النتيجة التالية “تعديل متغيرات البيئة لحسابك”.
• ضمن الـUser variables تحقق مما إذا كان هناك خيار يسمى Path:
  • إذا كان الخيار موجودًا، فقم بإضافة فاصلة منقوطة بعد القيم الموجودة أساسا، ثم قم بإضافة المسار الكامل لمجلد flutter\bin . على سبيل المثال: (;C:\src\flutter\bin).
  • إذا لم يكن الخيار موجوداً، فقم بإنشاء user variable جديد يسمى Path وأسند المسار الكامل للمجلد flutter\bin كقيمة له.
• يجب عليك إغلاق أي محرر أوامر cmd مفتوح، ثم عليك أن تشغل محرر الاوامر من جديد حتى تصبح هذه التغييرات سارية المفعول.

ملاحظة: يخبرك الأمر التالي ما إذا كانت أوامر flutter و dart تنشأ من نفس المجلد bin (ما يعني أنهما متوافقان):

where flutter dart

إذا ظهرت لك النتيجة التالية:

C:\path-to-flutter-sdk\bin\flutter

C:\path-to-flutter-sdk\bin\flutter.bat

C:\path-to-dart-sdk\bin\dart.exe        :: this should go after `C:\path-to-flutter-sdk\bin\` commands

C:\path-to-flutter-sdk\bin\dart

C:\path-to-flutter-sdk\bin\dart.bat

كما هو موضح أعلاه فإن الأمرين flutter و dart غير موجودين في نفس المسار. ولحل هذه المشكلة عليك تحديث المسار الخاص ب dart لكي يظهر في نفس مسار flutter . بعد اجراء التغييرات المناسبة وإغلاق محرر  أوامر cmd وتشغيله من جديد وتنفيذ الأمر السابق where flutter dart فالنتيجة يجب أن تظهر بشكل مشابه لما يلي:

where flutter dart

C:\dev\src\flutter\bin\flutter

C:\dev\src\flutter\bin\flutter.bat

C:\dev\src\flutter\bin\dart

C:\dev\src\flutter\bin\dart.bat

C:\dev\src\dart-sdk\bin\dart.exe

ولكن إذا كنت تستخدم PowerShell فإن عليك أن تستخدم الامر التالي:

where.exe flutter dart

لمعرفة المزيد حول الأمر dart ، قم بكتابة dart -h  ضمن محرر الأوامر ، أو راجع صفحة أداة  dart.

قم بتشغيل التعليمة التالية flutter doctor ضمن محرر الاوامر:

بعد أن تقوم بتحديث المسار كما هو موضح في الفقرة السابقة، قم بتشغيل الأمر التالي لمعرفة ما إذا كانت هناك أي تبعيات للنظام الأساسي (platform dependencies) ما زلت تحتاجها لإكمال تثبيت منصة flutter على جهازك بشكل صحيح:

C:\src\flutter>flutter doctor

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

لاحظ النتيجة التالية التي ظهرت على أحد الأجهزة التي تم تثبيت flutter عليها ،وبعد تنفيذ الامر السابق:

[-] Android toolchain – develop for Android devices

• Android SDK at D:\Android\sdk

✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ

• Try re-installing or updating your Android SDK,

visit https://flutter.dev/setup/#android-setup for detailed instructions.

تظهر النتيجة السابقة أن هناك نقصا في بعض التبعيات (Android SDK). سنتعلم ضمن الأقسام التالية من التوثيق طريقة حل هذه المشكلة. بعد أن تحل أي مشكلة تصادفك أثناء التثبيت، قم بتنفيذ التعليمة flutter doctor مجددا لتتحقق من أنك قمت بإعداد كل شيء بشكل صحيح.

ملاحظة: إذا ظهر لك ضمن نتيجة التعليمة السابقة أن (Flutter plugin or Dart plugin of Android Studio are not installed) فيمكنك حل المشكلة من خلال اتباع التعليمات الموجودة ضمن التوثيق تحت عنوان “قم بإعداد المحرر” (Set up an editor).

تحذير: تستخدم أداة Flutter أدوات Google Analytics لإعداد تقرير مجهول (anonymously report) عن إحصائيات استخدام المنصة وتقارير الأعطال الأساسية. تُستخدم هذه البيانات للمساعدة في تحسين أدوات Flutter بمرور الوقت.

لا يتم إرسال تحليلات أداة Flutter عند تشغيلها لأول مرة. لتعطيل ميزة إعداد التقارير ، اكتب الامر التالي ضمن محرر الأوامر flutter config –no-analytics. لعرض الإعدادات الحالية ، اكتب flutter config. إذا قمت بإلغاء الاشتراك في التحليلات ، فسيتم إرسال حدث لإلغاء الاشتراك ، ومن ثم لا يتم إرسال أي معلومات أخرى بواسطة أداة Flutter.

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

علاوة على ذلك ، يشتمل Flutter على Dart SDK ، والتي قد ترسل مقاييس الاستخدام وتقارير الأعطال إلى Google.

إعداد المنصة لتطوير تطبيقات Android:

ملاحظة: تعتمد Flutter على التثبيت الكامل لـ Android Studio لتوفير تبعيات نظام Android الأساسي (Android platform dependencies). ومع ذلك ، يمكنك كتابة تطبيقات Flutter الخاصة بك في عدد من المحررات الأخرى، وسنناقش هذه المسألة في فقرة لاحقة.

تثبيت Android Studio:

• قم بتنزيل وتثبيتAndroid Studio من الرابط التالي (https://developer.android.com/studio) .
• قم بتشغيل Android Studio ، وانتقل إلى ‘Android Studio Setup Wizard’. يقوم هذا بتثبيت أحدث ‘Android SDK’ ، و’Android SDK Command-line Tools’ ،و ‘ Android SDK Build-Tools’ ، والتي تتطلبها Flutter عند التطوير لنظام Android.

قم بإعداد جهاز Android الخاص بك:

للاستعداد لتشغيل واختبار تطبيق Flutter على جهاز Android ، تحتاج إلى جهاز Android يعمل بنظام Android 4.1 (مستوى API 16) أو أعلى.

ولتشغيل واختبار تطبيق Flutter على جهاز Android قم بما يلي:

• قم بتمكين خيارات المطور (Enable Developer options) وتصحيح أخطاء USB (USB debugging) على جهازك. التعليمات التفصيلية للقيام بذلك متوفرة ضمن توثيق  Android.
• قم بتثبيت Google USB Driver من خلال الرابط التالي.
• قم بتوصيل هاتفك بالكمبيوتر باستخدام كبلUSB ، وامنح الكمبيوتر السماح بالوصول إلى جهازك إذا طُلب منك ذلك.
• ضمن محرر الاوامر قم بتنفيذ الامر التالي flutter devices، يقوم هذا الامر بالتحقق ما إذا تم التعرف على جهاز الاندرويد المتصل بالحاسوب كجهاز جاهز لاخبتار التطبيقات عليه أم لا.

ملاحظة: بشكل افتراضي ، تستخدم Flutter إصدار Android SDK حيث توجد أداة adb الخاصة بك. إذا كنت تريد من Flutter استخدام  Android SDK مختلف، فيجب عليك تعيين متغير بيئة ANDROID_SDK_ROOT تكون قيمته دليل   Android SDK  المختلف الذي تريده.

قم بإعداد محاكي لجهاز Android :

للاستعداد لتشغيل واختبار تطبيق Flutter على محاكي Android ، اتبع الخطوات التالية:

• قم بتمكين VM acceleration على جهازك.
• قم بتشغيل Android Studio ، وانقر فوق رمز AVD Manager ، واختر إنشاء جهاز افتراضي (Create Virtual Device) …
  1. في الإصدارات القديمة من Android Studio ، يجب عليك بدلاً من ذلك تشغيل Android Studio> Tools> Android> AVD Manager وتحديد إنشاء جهاز افتراضي…. (قائمة Android الفرعية موجودة فقط عندما تكون داخل مشروع Android.).
  2. إذا لم يكن لديك مشروع مفتوح ، يمكنك اختيار Configure> AVD Manager وتحديد إنشاء جهاز افتراضي (Create Virtual Device) …
• اختر مواصفات الجهاز واضغط التالي.
• حدد system image واحدة أو أكثر لإصدارات Android التي تريد محاكاتها ، واضغط التالي. يوصى باستخدام x86 أو  x86_64 system image.
• ضمن الخيار Emulated Performance ، اختر Hardware – GLES 2.0 لتمكين خاصية hardware acceleration.
• تحقق لمرة أخيرة من أنك اخترت الخيارات الصحيحة لإعداد المحاكي ، ثم اضغط إنهاء.

للحصول على تفاصيل حول الخطوات المذكورة أعلاه ، راجع Managing AVDs.

• في Android Virtual Device Manager ، انقر فوق تشغيل (Run) في شريط الأدوات. يبدأ المحاكي في العمل ويعرض الشاشة الافتراضية لإصدار نظام التشغيل والجهاز الذي اخترته.

إعداد المنصة لتطوير تطبيقات الـ Web:

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

الخطوات الواجب تنفيذها بعد تثبيت المنصة:

قم بتثبيت المحرر المفضل لديك لتقوم بتطوير التطبيقات باستخدام منصة Flutter من خلاله.

توثيق منصة Flutter

التثبيت علىmacOS :

تثبيت منصة Flutter على نظام تشغيل macOS:

يضم القسم التالي العناوين التالية:

• متطلبات النظام.
• احصل على Flutter SDK .
  • قم بتشغيل التعليمة التالية flutter doctor ضمن محرر الاوامر.
  • التنزيل مباشرة من GitHub بدلاً من استخدام الملف المضغوط (archive).
  • قم بتحديث المسار path.
• إعداد المنصة (Platform setup)
• إعداد المنصة لتطوير تطبيقات iOS
  • قم بتثبيت Xcode
  • قم بإعداد المحاكي (iOS simulator)
  • قم بإنشاء وتشغيل تطبيق Flutter بسيط.
  • شغل التطبيق على جهاز يعمل بنظام iOS (iOS device).
• إعداد المنصة لتطوير تطبيقات Android
  • قم بتثبيت Android Studio
  • قم بإعداد جهاز Android الخاص بك
  • قم بإعداد محاكي لجهاز Android
• إعداد المنصة لتطوير تطبيقات الويب
• الخطوات الواجب تنفيذها بعد تثبيت المنصة.

متطلبات النظام:

لتثبيت منصة Flutter وتشغيلها ، يجب أن تفي بيئة التطوير لديك بالحد الأدنى من المتطلبات التالية:

• نظام تشغيل macOS (64-bit) .
• مساحة خالية على القرص: 2.8 جيجا بايت ( هذا لا يشمل مساحة القرص المطلوبة لتثبيت الـ IDE والأدوات الأخرى التي ستذكر في البند التالي).
• الأدوات: تستخدم Flutter الأداة git للتثبيت (installation) والترقية (upgrade). نوصي بتثبيت Xcode ، والذي يتضمن git ، كما يمكنك أيضًا تثبيت git بشكل منفصل.

ملاحظة هامة: إذا كنت تقوم بالتثبيت على جهاز Mac بأحدث معالج Apple M1 ، فقد تجد هذه الملاحظات التكميلية مفيدة لأننا نكمل الدعم لبنية Apple Silicon الجديدة.

احصل على Flutter SDK:

1. قم بتنزيل حزمة التثبيت التالية للحصول على أحدث إصدار مستقر من Flutter SDK:

flutter_macos_2.0.4-stable.zip

لتحميل قنوات الإصدار (release channels) الأخرى أوالإصدارات الأقدم ، راجع صفحة إصدارات SDK.

1. قم باستخراج الملف المضغوط ووضع مجلد Flutter في مسار التثبيت المطلوب، على سبيل المثال:

1. أضف أداة Flutter إلى المسار path:

يقوم الأمر السابق بتعيين متغير PATH الخاص بك من أجل نافذة الـ terminal الحالية. لإضافة Flutter إلى المسار path بشكل دائم ، راجع الفقرة التي بعنوان “قم بتحديث المسار” في هذا الملف.

أنت جاهز الآن لتشغيل أوامر Flutter.

ملاحظة: لتحديث إصدار Flutter الموجود لديك، راجع ترقية Flutter.

قم بتشغيل التعليمة التالية flutter doctor ضمن محرر الاوامر:

قم بتشغيل الأمر التالي لمعرفة ما إذا كانت هناك أي تبعيات للنظام الأساسي (platform dependencies) ما زلت تحتاجها لإكمال تثبيت منصة flutter على جهازك بشكل صحيح (للحصول على verbose output أضف الـflag التالي -v):

يتحقق هذا الأمر من بيئتك ويعرض تقريرًا عن حالة تثبيت منصة Flutter .

تم تجميع الـ Dart SDK مع Flutter وبالتالي فليس من الضروري تثبيت Dart بشكل منفصل.

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

لاحظ النتيجة التالية التي ظهرت على أحد الأجهزة التي تم تثبيت flutter عليها ،وبعد تنفيذ الامر السابق:

تظهر النتيجة السابقة أن هناك نقصا في بعض التبعيات (Android SDK). سنتعلم ضمن الأقسام التالية من التوثيق طريقة حل هذه المشكلة. بعد أن تحل أي مشكلة تصادفك أثناء التثبيت، قم بتنفيذ التعليمة flutter doctor مجددا لتتحقق من أنك قمت بإعداد كل شيء بشكل صحيح.

التنزيل مباشرة من GitHub بدلاً من استخدام الملف المضغوط (archive):

هذا مقترح فقط لحالات الاستخدام المتقدمة (advanced use cases).

يمكنك أيضًا استخدام git مباشرةً بدلاً من تنزيل الملف المضغوط. على سبيل المثال ، لتنزيل الـ stable branch:

قم بتحديث المسار كما هو موضح في الفقرة التالية من هذا الملف، قم بتشغيل الأمر flutter doctor لمعرفة ما إذا كانت هناك أي تبعيات للنظام الأساسي (platform dependencies) ما زلت تحتاجها لإكمال تثبيت منصة flutter على جهازك بشكل صحيح (Android SDK مثلا).

إذا لم تستخدم ملف الـ archive ، فسيقوم Flutter بتنزيل الـ development binaries الضرورية عند الحاجة لها ( أما إذا كنت تستخدم الأرشيف ، فسيتم تضمينها في الملف المضغوط). قد ترغب في تنزيل الـ development binaries الضرورية هذه مسبقًا (على سبيل المثال ، قد ترغب في القيام بذلك عند إعداد hermetic build environments ، أو إذا كان لديك intermittent network availability). للقيام بذلك ، قم بتشغيل الأمر التالي:

للحصول على خيارات تنزيل إضافية ، راجع flutter help precache.

تحذير: تستخدم أداة Flutter أدوات Google Analytics لإعداد تقرير مجهول (anonymously report) عن إحصائيات استخدام المنصة وتقارير الأعطال الأساسية. تُستخدم هذه البيانات للمساعدة في تحسين أدوات Flutter بمرور الوقت.

لا يتم إرسال تحليلات أداة Flutter عند تشغيلها لأول مرة. لتعطيل ميزة إعداد التقارير ، اكتب الامر التالي ضمن محرر الأوامر flutter config –no-analytics. لعرض الإعدادات الحالية ، اكتب flutter config. إذا قمت بإلغاء الاشتراك في التحليلات ، فسيتم إرسال حدث لإلغاء الاشتراك ، ومن ثم لا يتم إرسال أي معلومات أخرى بواسطة أداة Flutter.

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

علاوة على ذلك ، يشتمل Flutter على Dart SDK ، والتي قد ترسل مقاييس الاستخدام وتقارير الأعطال إلى Google.

قم بتحديث المسار path:

يمكنك تحديث متغير PATH للجلسة الحالية في سطر الأوامر ، كما هو موضح في الفقرة السابقة احصل على الـ Flutter SDK. ولكنك قد ترغب على الأرجح في تحديث هذا المتغير بشكل دائم ، بحيث يمكنك تشغيل أوامر flutter في أي جلسة للـ terminal.

خطوات تعديل هذا المتغير بشكل دائم لجميع جلسات الـ terminal هو أمر متعلق بالجهاز الذي تعمل حاليا تحديدا (machine-specific). عادةً ما يكون بإضافة سطر إلى ملف يتم تنفيذه كلما فتحت نافذة جديدة للـterminal. على سبيل المثال:

1. حدد مسار الـ Flutter SDK على جهازك وانسخه إلى الحافظة، ستحتاجه في الخطوة الثالثة.
2. افتح (أو أنشئ) ملف rc الخاص بالـshell التي تستخدمها. يخبرك الأمر التالي echo $ SHELL ضمن الـ terminal ما هي الـ shell التي تستخدمها.

إذا كنت تستخدم Bash ، فعدِّل $HOME/.bash_profile أو $HOME/.bashrc. إذا كنت تستخدم Z shell ، فعدِّل $HOME/.zshrc. إذا كنت تستخدم shell مختلفة ، فسيختلف مسار الملف واسمه على جهازك.

1. أضف السطر التالي وغيّر [PATH_OF_FLUTTER_GIT_DIRECTORY] ليكون مسار الـ Flutter git repo على جهازك (لقد قمت بتجهيز هذا المسار في الخطوة الأولى):

1. نفذ الأمر source $HOME/.<rc file> لتقوم بعمل refresh للنافذة الحالية للـterminal . أو قم بإغلاق الـ terminal وفتحه من جديد.
2. تحقق من أن المسار flutter/bin قد تم إضافته إلى الـ Path من خلال الامر التالي:

1. تحقق من ان الأمر flutter متوفر في الـ terminal الحالية من خلال الأمر التالي:

ملاحظة: اعتبارًا من الإصدار Flutter’s 1.19.0 dev release تحتوي Flutter SDK على أمر dart جنبًا إلى جنب مع أمر flutter بحيث يمكنك تشغيل الـ Dart command-line programs بسهولة أكبر. يؤدي تنزيل Flutter SDK أيضًا إلى تنزيل الإصدار المتوافق من Dart ، ولكن إذا قمت بتنزيل Dart SDK بشكل منفصل ، فتأكد من أن إصدار dart الخاص بـ Flutter يكون أولاً في مسارك ، حيث قد لا يكون الإصداران متوافقين. يخبرك الأمر التالي ما إذا كانت أوامر flutter و dart تنشأ من نفس المجلد bin (وبالتالي فهي متوافقة):

كما هو موضح أعلاه ، لا يأتي الأمران من المجلد bin نفسه. قم بتحديث المسار الخاص بك لاستخدام الأوامر من / path-to-flutter-sdk / bin قبل الأوامر من / usr / local / bin (في هذه الحالة). بعد إغلاق الـ shell الذي تستخدمه وتشغيله مرة أخرى، فإن تشغيل الأمر السابق سيظهر أن أوامر flutter و dart ينشآن من نفس المجلد:

لمعرفة المزيد حول أمر dart ، قم بتشغيل dart -h في الـ terminal، أو راجع صفحة dart tool.

إعداد المنصة (Platform setup):

يدعم macOS تطوير تطبيقات Flutter لأجهزة iOS و Android، وكما يدعم تطوير تطبيقات الويب (technical preview release). أكمل واحدة على الأقل من خطوات الـPlatform setup الآن ، لتتمكن من إنشاء وتشغيل أول تطبيق Flutter.

إعداد المنصة لتطوير تطبيقات iOS:

تثبيت Xcode:

لتطوير تطبيقات Flutter لنظام iOS ، تحتاج إلى جهاز Mac مثبت عليه Xcode.

1. قم بتثبيت أحدث إصدار مستقر من Xcode (باستخدام الـ web download أو من Mac App Store).
2. قم بتغيير إعدادات الـ Xcode command-line tools لتستخدم الإصدار المثبت حديثًا من Xcode عن طريق تشغيل الأمرين التاليين:

sudo xcode-select –switch /Applications/Xcode.app/Contents/Developer

sudo xcodebuild -runFirstLaunch

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

1. تأكد من توقيع اتفاقية ترخيص Xcode (Xcode license agreemen) إما عن طريق فتح Xcode مرة واحدة و عمل تأكيد على الموافقة أو من خلال تشغيل الأمر sudo xcodebuild -license من الـterminal.

قد تستمر الإصدارات السابقة من Xcode (الأقدم من أحدث إصدار مستقر) في العمل، ولكن لا ينصح بها لتطوير باستخدام Flutter. استخدام الإصدارات القديمة من Xcode لاستهداف bitcode غير مدعوم ومن المحتمل ألا يعمل.

باستخدام Xcode ، ستتمكن من تشغيل تطبيقات Flutter على جهاز iOS أو على المحاكي (simulator).

إعداد الـ iOS simulator:

للاستعداد لتشغيل واختبار تطبيق Flutter على iOS simulator، اتبع الخطوات التالية:

1. على جهاز Mac الخاص بك ، ابحث عن الـ Simulator عبر Spotlight أو باستخدام الأمر التالي:

1. تأكد من أن المحاكي لجهاز 64 بت (iPhone 5s أو أحدث) من خلال التحقق من الإعدادات من خلال الضغط على الخيار Device ضمن القائمة Hardware > Device
2. اعتمادًا على حجم شاشة حاسوبك ، قد يتجاوز حجم شاشة المحاكي ذو كثافة الشاشة العالية حجم شاشتك. اضغط على زاوية جهاز المحاكاة واسحبه لتغيير مقاسه. يمكنك أيضًا باستخدام الخيارات ضمن الـ Pixel Accurate من Window > Physical Size or Window > Pixel Accurateوذلك إذا كانت دقة شاشة حاسوبك عالية بما يكفي.
   1. ملاحظة: إذا كنت تستخدم إصدارًا من Xcode أقدم من 1.9 ، فيجب عليك بدلاً من ذلك ضبط مقياس الجهاز من القائمة Window> Scale.

قم بإنشاء وتشغيل تطبيق Flutter بسيط:

لإنشاء تطبيق Flutter الأول الخاص بك واختبار عملية تثبيت المنصة، اتبع الخطوات التالية:

1. أنشئ تطبيق Flutter جديد عن طريق تشغيل الأمر التالي ضمن الـ terminal:

1. يتم إنشاء مجلد my_app يحتوي على تطبيق Flutter جديد. أدخل هذا المجلد:

1. لتشغيل التطبيق في الـ Simulator ، تأكد من تشغيل الـ Simulator واكتب في الـ terminal:

شغل تطبيق Flutter على جهاز فعلي يعمل بنظام iOS:

لتشغيل تطبيق Flutter على جهاز iOS فعلي ، ستحتاج إلى إعداد الـ physical device deployment في Xcode كما ستحتاج حساب Apple Developer. إذا كان تطبيقك يستخدم Flutter plugins، فستحتاج أيضًا إلى third-party CocoaPods dependency manager.

1. يمكنك تخطي هذه الخطوة إذا كانت تطبيقاتك لا تعتمد على Flutter plugins ضمن كود iOS الأصلي. قم بتثبيت وإعداد CocoaPods عن طريق تشغيل الأوامر التالية:

ملاحظة: الإصدار الافتراضي من Ruby يتطلب sudo لتثبيت CocoaPods gem. إذا كنت تستخدم Ruby Version manager ، فقد تحتاج إلى تشغيل الامر السابق بدون sudo.

1. قم باتباع الـ Xcode signing flow لكي تقوم بعمل provision لمشروعك:
   1. افتح الـdefault Xcode workspace في مشروعك عن طريق تشغيل الأمر open ios/Runner.xcworkspace ضمن الـ terminal المفتوح في مجلد مشروع Flutterالحالي.
   2. حدد الجهاز الذي تنوي تشغيل التطبيق عليه من خلال القائمة المنسدلة للأجهزة (device drop-down menu) الموجودة بجوار زر التشغيل Run.
   3. حدد مشروع Runner في الـ navigation panel اليسرى.
   4. في صفحة إعدادات الـ Runner target ، تأكد من تحديد الـ Development Team الخاص بك ضمن القائمة Signing & Capabilities > Team.

عند تحديد team، يقوم Xcode بإنشاء وتنزيل Development Certificate، ويسجل جهازك في حسابك (registers your device with your account)، ويقوم بإنشاء وتنزيل ملف provisioning profile (إذا لزم الأمر).

• • • لبدء مشروعك الأول لتطوير تطبيقات iOS ، قد تحتاج إلى تسجيل الدخول إلى Xcode باستخدام الـ Apple ID الخاص بك.

التطوير والاختبار مدعومان لأي Apple ID. التسجيل في برنامج Apple Developer مطلوب لرفع تطبيقك على App Store. للحصول على تفاصيل حول أنواع العضويات (membership types) ، راجع اختيار العضوية.

• • • في المرة الأولى التي تستخدم فيها جهازًا فعلياً متصلًا لتطوير تطبيقات iOS ، يجب أن تثق بكل من جهاز Mac الخاص بك وشهادة التطوير (Development Certificate) على هذا الجهاز. حدد الخيار “Trust” في مربع الحوار عند توصيل جهاز iOS بجهاز Mac الخاص بك لأول مرة.

بعد ذلك ، انتقل إلى تطبيق الإعدادات على جهاز iOS ، واختر General > Device Management وثق في الـ Certificate الخاصة بك. بالنسبة للمستخدمين الذين يقومون بهذا الشيء لأول مرة ، قد تحتاجون إلى اختيار General > Profiles > Device Management بدلاً من ذلك.

• • • إذا فشل الـ automatic signing في Xcode ، فتحقق من أن قيمة معرف الحزمة الـ General > Identity > Bundle Identifier الخاصة بمشروعك فريدة(unique).

1. شغل تطبيقك عن طريق تشغيل الأمر flutter run أو النقر فوق الزر Run في Xcode

إعداد المنصة لتطوير تطبيقات Android:

ملاحظة: تعتمد Flutter على التثبيت الكامل لـ Android Studio لتوفير تبعيات نظام Android الأساسي (Android platform dependencies). ومع ذلك ، يمكنك كتابة تطبيقات Flutter الخاصة بك في عدد من المحررات الأخرى، وسنناقش هذه المسألة في فقرة لاحقة.

تثبيت Android Studio:

1. قم بتنزيل وتثبيت Android Studio.
2. قم بتشغيل Android Studio ، وانتقل إلى ‘Android Studio Setup Wizard’. يقوم هذا بتثبيت أحدث ‘Android SDK’ ، و’Android SDK Command-line Tools’ ،و ‘ Android SDK Build-Tools’ ، والتي تتطلبها Flutter عند التطوير لنظام Android.

قم بإعداد جهاز Android الخاص بك:

للاستعداد لتشغيل واختبار تطبيق Flutter على جهاز Android ، تحتاج إلى جهاز Android يعمل بنظام Android 4.1 (مستوى API 16) أو أعلى.

ولتشغيل واختبار تطبيق Flutter على جهاز Android قم بما يلي:

1. قم بتمكين خيارات المطور (Enable Developer options) وتصحيح أخطاء USB (USB debugging) على جهازك. التعليمات التفصيلية للقيام بذلك متوفرة ضمن توثيق Android.
2. قم بتوصيل هاتفك بالكمبيوتر باستخدام كبلUSB ، وامنح الكمبيوتر السماح بالوصول إلى جهازك إذا طُلب منك ذلك.
3. ضمن محرر الاوامر قم بتنفيذ الامر التالي flutter devices، يقوم هذا الامر بالتحقق ما إذا تم التعرف على جهاز الاندرويد المتصل بالحاسوب كجهاز جاهز لاخبتار التطبيقات عليه أم لا.

ملاحظة: بشكل افتراضي ، تستخدم Flutter إصدار Android SDK حيث توجد أداة adb الخاصة بك. إذا كنت تريد من Flutter استخدام Android SDK مختلف، فيجب عليك تعيين متغير بيئة ANDROID_SDK_ROOT تكون قيمته دليل Android SDK المختلف الذي تريده.

قم بإعداد محاكي لجهاز Android :

للاستعداد لتشغيل واختبار تطبيق Flutter على محاكي Android ، اتبع الخطوات التالية:

1. قم بتمكين VM acceleration على جهازك.
2. قم بتشغيل Android Studio ، وانقر فوق رمز AVD Manager ، واختر إنشاء جهاز افتراضي (Create Virtual Device) …
   1. في الإصدارات القديمة من Android Studio ، يجب عليك بدلاً من ذلك تشغيل Android Studio> Tools> Android> AVD Manager وتحديد إنشاء جهاز افتراضي…. (قائمة Android الفرعية موجودة فقط عندما تكون داخل مشروع Android.).
   2. إذا لم يكن لديك مشروع مفتوح ، يمكنك اختيار Configure> AVD Manager وتحديد إنشاء جهاز افتراضي (Create Virtual Device) …
3. اختر مواصفات الجهاز واضغط التالي.
4. حدد system image واحدة أو أكثر لإصدارات Android التي تريد محاكاتها ، واضغط التالي. يوصى باستخدام x86 أو x86_64 image.
5. ضمن الخيار Emulated Performance ، اختر Hardware – GLES 2.0 لتمكين خاصيةhardware acceleration.
6. تحقق لمرة أخيرة من أنك اخترت الخيارات الصحيحة لإعداد المحاكي ، ثم اضغط إنهاء.

للحصول على تفاصيل حول الخطوات المذكورة أعلاه ، راجع Managing AVDs.

1. في Android Virtual Device Manager ، انقر فوق تشغيل (Run) في شريط الأدوات. يبدأ المحاكي في العمل ويعرض الشاشة الافتراضية لإصدار نظام التشغيل والجهاز الذي اخترته.

إعداد المنصة لتطوير تطبيقات الـ Web:

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

الخطوات الواجب تنفيذها بعد تثبيت المنصة:

قم بتثبيت المحرر المفضل لديك لتقوم بتطوير التطبيقات باستخدام منصة Flutter من خلاله.

يمكنك إنشاء تطبيقات باستخدام Flutter باستخدام أي محرر نصوص مدمج مع command-line tools الخاصة بنا. ومع ذلك ، فإننا نوصي باستخدام مكونات المحرر الاضافية editor plugins)) الخاصة بنا للحصول على تجربة أفضل. توفر لك هذه المكونات الإضافية كلا من الميزات التالية: إكمال التعليمات البرمجية (code completion) ، وإبراز البنية (syntax highlighting) ، ومساعدات تحرير الـ Widgets (widget editing assists) ، كما توفر دعما لعمليات التشغيل وتصحيح الاخطاء (run & debug) والمزيد.

اتبع الخطوات أدناه لإضافة (editor plugin) لأحد المحررات التالية Android Studio أو IntelliJ أو VS Code أو Emacs. إذا كنت تريد استخدام محرر مختلف ، فلا بأس بذلك ، فقم بالانتقال إلى الخطوة التالية: Test drive.

Android Studio and IntelliJ:

تثبيتAndroid Studio :

يقدم Android Studio بيئة تطوير متميزة ومتكاملة لـ Flutter.

• Android Studio ، الإصدار 3.0 أو أحدث.

كما يمكنك أيضًا استخدام IntelliJ:

• IntelliJ IDEA Community الإصدار 2017.1 أو أحدث.
• IntelliJ IDEA Ultimate الإصدار 2017.1 أو أحدث.

قم بتثبيت إضافات Flutter و Dart (Flutter and Dart plugins):

تعليمات التثبيت تختلف حسب نظام التشغيل المستخدم :

• نظام تشغيل Mac:

استخدم الإرشادات التالية ضمن نظام التشغيل macOS:

• • قم بتشغيل Android Studio.
  • افتح الخيار التالي plugin preferences أو (Configure > Plugins ضمن الإصدار v3.6.3.0 أو أحدث).
  • اختر Flutter plugin واضغط تثبيت.
  • انقر فوق “نعم” عندما يُطلب منك تثبيت Dart plugin.
  • انقر فوق ‘إعادة تشغيل المحرر’ (Restart) عندما يُطلب منك ذلك.
• نظام تشغيل Linux or Windows.

استخدم الإرشادات التالية لنظام التشغيل Linux أو Windows:

• • افتح plugin prefrences من خلال (File > Settings > Plugins).
  • اختر Marketplace ثم اختر Flutter plugin ثم انقر على تثبيت.

تثبيت VS Code:

يعتبر VS Code محررا خفيفا (lightweight editor) قادر على تشغيل وتصحيح أخطاء (debug) تطيبقات Flutter.

• قم بتثبيت الإصدار الأخير المستقر VS Code .

تثبيت Flutter and Dart plugins:

1. قم بتشغيل VS Code.
2. اضغط على View > Command Palette…
3. اكتب ‘install’ واختر Extensions: Install Extensions.
4. اكتب ‘ flutter’ ضمن مربع البحث عم ال Extensions ، ثم اختر Flutter من القائمة واضغط على تثبيت. يؤدي هذا أيضًا إلى تثبيت Dart plugins المطلوب.

تحقق من صحة عملية الاعداد التي قمت بها من خلال Flutter Doctor كما يلي:

1. اضغط على View > Command Palette…
2. اكتب ‘doctor’ واختر Flutter: Run Flutter Doctor.
3. راجع الoutput في جزء الoutput pane ضمن vscode وتحقق من عدم وجود أي مشكلة. تأكد من تحديد Flutter من القائمة المنسدلة في خيارات الoutput pane.

تثبيت Emacs:

يعتبر Emacs محررا خفيفا (lightweight editor) قادر على تشغيل وتصحيح أخطاء (debug) تطيبقات Flutter.

• قم بتثبيت الإصدار الأخير المستقر Emacs .

تثبيت حزمة lsp-dart:

للحصول على معلومات حول كيفية تثبيت الحزمة واستخدامها ، راجع توثيق lsp-dart.

تشرح هذه الصفحة كيفية إنشاء تطبيق Flutter جديد من أحد القوالب (templates)، وتشغيله ، وتجربة “إعادة التحميل السريع” (hot reload) بعد إجراء تغييرات على التطبيق.

حدد بيئة التطوير التي تختارها لكتابة تطبيقات Flutter وإنشائها وتشغيلها (Android Studio أوVS Code أو Terminal & Editor).

Android Studio and IntelliJ:

قم بإنشاء التطبيق من خلال الخطوات التالية:

1. افتح ال IDE واختر Create New Flutter Project.
2. من خانة project type اختر Flutter Application واضفط التالي.
3. تحقق من أن مسار Flutter SDK يحدد موقع الـSDK (اختر Install SDK… إذا كان الحقل فارغًا).
4. أدخل اسم المشروع، (myapp) مثلا. واضغط التالي.
5. اضغط Finish.
6. انتظر ريثما يقوم Android Studio بتثبيت الـ SDK وإنشاء المشروع.

ملاحظة: عند إنشاء تطبيق Flutter جديد ، تطلب بعض مكونات Flutter IDE الإضافية رابط موقع الشركة (company domain name) التي تعمل لصالحها مرتباً بترتيب عكسي ، مثل com.example. يتم استخدام ال domain name واسم المشروع معًا كاسم حزمة (package name) لنظام Android (معرّف حزمة (Bundle ID) لنظام iOS) عند إصدار التطبيق على متجري Google play و App store. إذا كنت تعتقد أن التطبيق قد يتم رفعه على المتاجر، فمن الأفضل تحديد اسم الحزمة الآن. إذ لا يمكن تغيير اسم الحزمة بمجرد إصدار التطبيق، لذا اجعل الاسم فريدًا (unique).

تقوم الأوامر المذكورة أعلاه بإنشاء مجلد مشروع Flutter يسمى myapp يحتوي على تطبيق تجريبي بسيط يستخدم الـ Material Components.

تلميح: كود التطبيق موجود في الملف lib/main.dart. للحصول على وصف بسيط لما تقوم به كل كتلة تعليمات برمجية ، راجع التعليقات في الجزء العلوي من هذا الملف.

قم بتشغيل التطبيق:

1. لاحظ شريط أدوات Android Studio الرئيسي:

1. في الـ target selector، حدد جهاز Android لتشغيل التطبيق. إذا لم يتم إدراج أي منها على أنه متاح، فاضغط على Tools> Android> AVD Manager وأنشئ محاكيا هناك. للحصول على تفاصيل حول إنشاء محاكي، راجع Managing AVDs.
2. انقر فوق أيقونة التشغيل (Run) في شريط الأدوات، أو قم بالضغط على عنصر القائمة Run > Run.

بعد اكتمال إنشاء التطبيق ، سترى التطبيق على جهازك.

قم بتجريب Hot Reload:

تسرع Flutter عملية تطوير التطبيقات من خلال ميزة Stateful Hot Reload، وهي القدرة على إعادة تحميل كود تطبيق قيد التشغيل مباشرةً دون إعادة تشغيل أو فقدان حالة التطبيق.

قم بإجراء تغيير على كود التطبيق ، واضغط زر Hot Reload ، وشاهد التغيير مباشرة على الجهاز المتصل أو المحاكي.

1. افتح الملف lib/main.dart.
2. قم بتغيير السلسلة المحرفية string التالية:

‘You have pushed the button this many times’

إلى

‘You have clicked the button this many times’

ملاحظة مهمة: لا توقف تطبيقك. دع تطبيقك على حاله.

1. احفظ تغييراتك: من خلال الضغط على Save All من القائمة، أو انقر على Hot Reload.

سترى الstring الجديدة في التطبيق الذي ما زال قيد التشغيل على الفور تقريبًا.

تشغيل التطبيق في وضع Profile ووضع Release:

ملاحظة مهمة: لا تختبر أداء تطبيقك أثناء تمكين وضع التصحيح (debug) ووضع إعادة التحميل السريع (hot reload).

أنت الآن تشغل تطبيقك في وضع التصحيح (debug mode). يقدم الـdebug mode ميزات مفيدة للمطور مثل hot reload أو step debugging ولكنه يقدم هذه الميزات على حساب أداء التطبيق (app performance). فمن المتوقع أثناء تشغيل التطبيق في ال Debug mode أن ترى أداءً بطيئًا ورسومًا متحركة (animations) سيئة.

لمزيد من التفاصيل حول هذا الموضوع، راجع صفحة “أوضاع بناء تطبيق Flutter” (Flutter’s build modes).

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

Visual Studio Code:

قم بإنشاء التطبيق من خلال الخطوات التالية:

1. اضغط على View > Command Palette.
2. اكتب Flutter ثم اختر Flutter: New Application Project.
3. أدخل اسم المشروع، (myapp) مثلا. واضغط enter.
4. اختر المجلد الذي ترغب بإنشاء المشروع ضمنه.
5. انتظر حتى يكتمل إنشاء المشروع ويظهر ملف main.dart.

تقوم الأوامر المذكورة أعلاه بإنشاء مجلد مشروع Flutter يسمى myapp يحتوي على تطبيق تجريبي بسيط يستخدم الـ Material Components

ملاحظة: عند إنشاء تطبيق Flutter جديد ، تطلب بعض مكونات Flutter IDE الإضافية رابط موقع الشركة (company domain name) التي تعمل لصالحها مرتباً بترتيب عكسي ، مثل com.example. يتم استخدام ال domain name واسم المشروع معًا كاسم حزمة (package name) لنظام Android (معرّف حزمة (Bundle ID) لنظام iOS) عند إصدار التطبيق على متجري Google play و App store. إذا كنت تعتقد أن التطبيق قد يتم رفعه على المتاجر، فمن الأفضل تحديد اسم الحزمة الآن. إذ لا يمكن تغيير اسم الحزمة بمجرد إصدار التطبيق، لذا اجعل الاسم فريدًا (unique).

تحذير: إذا كان VS Code قيد التشغيل أثناء عملية تثبيت منصة Flutter ، فقد تحتاج إلى إعادة تشغيله حتى يتمكن Flutter plugin الخاص بـ VS Code من اكتشاف Flutter SDK.

تلميح: كود التطبيق موجود في الملف lib/main.dart. للحصول على وصف بسيط لما تقوم به كل كتلة تعليمات برمجية ، راجع التعليقات في الجزء العلوي من هذا الملف.

قم بتشغيل التطبيق:

1. لاحظ VS Code status bar (الشريط الأزرق أسفل النافذة):

1. من الـ Device Selector ، حدد جهاز Android لتشغيل التطبيق. للحصول على مزيد من التفاصيل حول هذا الموضوع ، راجع صفحة التبديل بين أجهزة Flutter بشكل سريع.
2. قم بالضغط على عنصر القائمة Run > Start Debugging ، أو اضغط F5.
3. انتظر حتى يتم تشغيل التطبيق – يمكنك متابعة التقدم في عملية تشغيل التطبيق ضمن جزء الـ Debug Console.

بعد اكتمال إنشاء التطبيق ، سترى التطبيق على جهازك.

قم بتجريب Hot Reload:

تسرع Flutter عملية تطوير التطبيقات من خلال ميزة Stateful Hot Reload، وهي القدرة على إعادة تحميل كود تطبيق قيد التشغيل مباشرةً دون إعادة تشغيل أو فقدان حالة التطبيق.

قم بإجراء تغيير على كود التطبيق ، واضغط زر Hot Reload ، وشاهد التغيير مباشرة على الجهاز المتصل أو المحاكي.

1. افتح الملف lib/main.dart.
2. قم بتغيير السلسلة المحرفية string التالية:

‘You have pushed the button this many times’

إلى

‘You have clicked the button this many times’

ملاحظة مهمة: لا توقف تطبيقك. دع تطبيقك على حاله.

1. احفظ تغييراتك: من خلال الضغط على Save All من القائمة، أو انقر على Hot Reload.

سترى الstring الجديدة في التطبيق الذي ما زال قيد التشغيل على الفور تقريبًا.

تشغيل التطبيق في وضع Profile ووضع Release:

ملاحظة مهمة: لا تختبر أداء تطبيقك أثناء تمكين وضع التصحيح (debug) ووضع إعادة التحميل السريع (hot reload).

أنت الآن تشغل تطبيقك في وضع التصحيح (debug mode). يقدم الـdebug mode ميزات مفيدة للمطور مثل hot reload أو step debugging ولكنه يقدم هذه الميزات على حساب أداء التطبيق (app performance). فمن المتوقع أثناء تشغيل التطبيق في ال Debug mode أن ترى أداءً بطيئًا ورسومًا متحركة (animations) سيئة.

لمزيد من التفاصيل حول هذا الموضوع، راجع صفحة “أوضاع بناء تطبيق Flutter” (Flutter’s build modes).

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

Terminal and editor:

قم بإنشاء التطبيق:

وذلك من خلال تنفيذ الامر flutter create ضمن محرر الأوامر:

يقوم الأمر السابق بإنشاء مجلد مشروع Flutter يسمى myapp يحتوي على تطبيق تجريبي بسيط يستخدم الـ Material Components.

تلميح: كود التطبيق موجود في الملف lib/main.dart. للحصول على وصف بسيط لما تقوم به كل كتلة تعليمات برمجية ، راجع التعليقات في الجزء العلوي من هذا الملف.

قم بتشغيل التطبيق:

1. تأكد من وجود جهاز Android متصل وذلك من خلال تنفيذ الامر التالي flutter devices:

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

1. قم بتشغيل التطبيق من خلال تنفيذ الامر التالي flutter run:

بعد اكتمال إنشاء التطبيق ، سترى التطبيق على جهازك.

قم بتجريب Hot Reload:

تسرع Flutter عملية تطوير التطبيقات من خلال ميزة Stateful Hot Reload، وهي القدرة على إعادة تحميل كود تطبيق قيد التشغيل مباشرةً دون إعادة تشغيل أو فقدان حالة التطبيق.

قم بإجراء تغيير على كود التطبيق ، واضغط زر Hot Reload ، وشاهد التغيير مباشرة على الجهاز المتصل أو المحاكي.

1. افتح الملف lib/main.dart.
2. قم بتغيير السلسلة المحرفية string التالية:

‘You have pushed the button this many times’

إلى

‘You have clicked the button this many times’

ملاحظة مهمة: لا توقف تطبيقك. دع تطبيقك على حاله.

1. احفظ التغييرات.
2. اكتب الحرف r ضمن نافذة محرر الأوامر.

سترى الstring الجديدة في التطبيق الذي ما زال قيد التشغيل على الفور تقريبًا.

تشغيل التطبيق في وضع Profile ووضع Release:

ملاحظة مهمة: لا تختبر أداء تطبيقك أثناء تمكين وضع التصحيح (debug) ووضع إعادة التحميل السريع (hot reload).

أنت الآن تشغل تطبيقك في وضع التصحيح (debug mode). يقدم الـdebug mode ميزات مفيدة للمطور مثل hot reload أو step debugging ولكنه يقدم هذه الميزات على حساب أداء التطبيق (app performance). فمن المتوقع أثناء تشغيل التطبيق في ال Debug mode أن ترى أداءً بطيئًا ورسومًا متحركة (animations) سيئة.

لمزيد من التفاصيل حول هذا الموضوع، راجع صفحة “أوضاع بناء تطبيق Flutter” (Flutter’s build modes).

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

يضم هذا القسم العناوين التالية:

• الخطوة 1: قم بإنشاء تطبيق Flutter.
• الخطوة 2: استخدم حزمة (pacakage) خارجية (مكتبة خارجية).
• الخطوة 3: إضافة Stateful widget
• الخطوة 4: إنشاء ListView لانهائية قابلة للتمرير (infinite scrolling ListView)
• تشغيل التطبيق في وضع Profile ووضع Release.

تلميح: يرشدك هذا الدرس إلى كتابة أول تطبيق Flutter على الهاتف المحمول. قد تفضل تجربة كتابة أول تطبيق Flutter على الويب.

يرشدك هذا الدرس إلى كتابة أول تطبيق Flutter، إذا كنت مضطلعا على مفاهيم البرمجة الأساسية مثل المتغيرات والحلقات والشروط، ومعتادا على البرمجة غرضية التوجه (object oreiented programming) فيمكنك إكمال هذا الدرس. إذ لا تحتاج إلى خبرة سابقة في لغة البرمجة Dart ولا في تطوير تطبيقات الجوال أو الويب.

هذا الدرس هو الجزء الأول من برنامج تعليمي مكون من جزأين. يمكنك العثور على الجزء 2 في Google Developers Codelabs (بالإضافة إلى الجزء الأول (يعني هذا الدرس)).

هذا ما سنبنيه في الجزء الأول:

توضح الصورة المتحركة السابقة كيف سيعمل التطبيق في نهاية هذا الدرس.

سنبني تطبيقًا بسيطًا يُنشئ أسماء مقترحة لشركة ناشئة (startup company). يمكن للمستخدم تحديد الأسماء وإلغاء تحديدها، وحفظ أفضلها. يولد الكود شيئا فشيئا (lazily) 10 أسماء في كل مرة. أثناء قيام المستخدم بالتمرير، يتم إنشاء المزيد من الأسماء. لا يوجد حد أقصى لمدى التمرير للقائمة (قائمة لانهائية).

يمكننا أن نلخص ما سنتعلمه في هذا الدرس ضمن النقاط التالية:

• كيفية كتابة تطبيق Flutter بحيث يبدو تطبيقا أصلياً على أنظمة iOS و Android والويب.
• البنية الأساسية لتطبيق Flutter.
• البحث عن الحزم (المكتبات) واستخدامها للاستفادة من الخدمات التي تقدمها.
• استخدام الـ hot reload لتسريع عملية تطوير التطبيقات.
• كيفية إنشاء الـ stateful widget.
• كيفية إنشاء listview لانهائية محملة ببطء (lazily loaded list).

في الجزء الثاني من هذا البرنامج التعليمي، ستضيف التفاعل (interactivity) مع التطبيق وتعديل الـtheme الخاصة بالتطبيق، كما ستضيف القدرة على التنقل من شاشة إلى أخرى (تسمى عملية التنقل هذه ‘route’ في Flutter).

هذا ما ستحتاجه لإتمام هذا الدرس:

لإكمال هذا التمرين ستحتاج الـ Flutter SDK وبيئة التطوير (IDE) التي تفضلها. سنفترض أنك ستستخدم Android Studio، ولكن يمكنك بالتأكيد استخدام المحرر المفضل لديك.

يمكنك استخدام أي من الأجهزة التالية لتجريب التطبيق الذي سنطوره خلال هذا الدرس:

• أي جهاز محمول يعمل بنظام تشغيل أندرويد أو iOS متصل بالحاسوب وتم ضبطه على الـ developer mode.
• محاكي iOS ( ولكن سيتطلب هذا تثبيت Xcode tools).
• محاكي Android (ولكن سيتطلب إعداده في Android Studio).
• متصفح إنترنت (Chrome مطلوب لتصحيح الأخطاء (debugging)).

الخطوة 1: قم بإنشاء تطبيق Flutter:

أنشئ تطبيق Flutter بسيط باستخدام التعليمات الواردة في صفحة “اختبار القيادة“. ولكن قم بإعطاء المشروع هذا الاسم “startup_namer” بدلا من “flutter_app”.

تلميح: إذا لم تجد “New Flutter Project” كخيار في الـ IDE ، فتأكد من تثبيت المكونات الإضافية (plugins) لـ Flutter و Dart.

بعد إنشاء المشروع، سنقوم بتعديل الملف lib/main.dart

1. استبدال محتوى الملف lib/main.dart:

قم بحذف محتوى الملف lib/main.dart. واستبدله بالكود التالي الذي يعرض عبارة “Hello world” في منتصف الشاشة.

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

• • في Android Studio and IntelliJ IDEA: إضغط على الكود بالزر اليميني للماوس واختر ” Reformat Code with dartfmt “.
  • في VS Code: إضغط على الكود بالزر اليميني للماوس واختر ” Format Document”.
  • في الـ Terminal: اكتب التعليمة التالية flutter format <filename>.

1. قم بتشغيل التطبيق: سيظهر ما يلي على الجهاز الذي تستخدمه لتشغيل التطبيق:

تلميح: في المرة الأولى التي تقوم فيها بالتشغيل على جهاز (physical device) ، قد يستغرق التحميل بعض الوقت. بعد ذلك ، يمكنك استخدام إعادة التحميل السريع (hot reload) للحصول على تحديثات سريعة. يؤدي الحفظ أيضًا إلى إعادة تحميل سريع إذا كان التطبيق قيد التشغيل. عند تشغيل تطبيق مباشرة من الـ terminal باستخدام flutter run ، أدخل r لإجراء إعادة التحميل السريع (hot reload).

ملاحظات:

– ينشئ هذا المثال ما يسمى Material app. Material هي visual design language قياسية على الهاتف المحمول والويب. تقدم Flutter مجموعة غنية من عناصر واجهة المستخدم (widgets) المتوافقة مع الـ Material Design.

من الجيد أن تضيف السطر التالي uses-material-design: true إلى ملف pubspec.yaml الموجود في مجلد المشروع تحت العنوان التالي flutter ضمن الملف. سيسمح لك ذلك باستخدام المزيد من ميزات الـ Material Design ،مثل مجموعة الـ Icons المعرفة مسبقًا والمتوافقة مع هذا التصميم.

– نلاحظ ضمن التابع main استخدام الـ arrow (=>) notation. استخدم هذا الكود مع التوابع التي تتكون من سطر واحد.

– يرث التطبيقapp الـ StatelessWidget ، مما يجعل التطبيق نفسه widget. في Flutter ، كل شيء تقريبًا عبارة عن widget ، بما في ذلك العناصر غير المرئية مثل alignment, padding, layout والتي ستدرسها بالتفصيل لاحقا.

– الـ Scaffold widget ( الموجودة ضمن مكتبة Material ) تقدم default app bar ، و body والتي تضم بدورها الـ widget tree الخاصة بالشاشة الرئيسية home screen. يمكن أن تكون الشجرة الفرعية (subtree) لعنصر واجهة المستخدم widget معقدة للغاية.

– تتمثل المهمة الرئيسية للـwidget في توفير تابع يسمى build مسؤول عن تقديم وصف لكيفية ظهور هذه الـ widget على الشاشة.

– يضم الـbody في هذا المثال Center widget والتي بدورها تحتوي Text widget (كإبن وحيد لها). تقوم الـ Center widget بمحاذاة “ابنها” (الـwidget الذي تحتويه) تقوم بمحاذاته إلى وسط الشاشة.

الخطوة 2: استخدم حزمة (pacakage) خارجية (مكتبة خارجية):

في هذه الخطوة ، ستبدأ في استخدام حزمة مفتوحة المصدر (open-source package) تسمى english_words ، والتي تحتوي على بضعة آلاف من الكلمات الإنجليزية الأكثر استخدامًا بالإضافة إلى بعض التوابع المساعدة.

يمكنك العثور على حزمة english_words ، بالإضافة إلى العديد من الحزم مفتوحة المصدر الأخرى ، على pub.dev.

1. يضم ملف pubspec.yaml كلاً من الـ assets والـ dependencies لتطبيق Flutter.

في pubspec.yaml، أضف سطرا لمكتبة english_words (الإصدار 3.1.5أو أحدث) إلى قائمة الـ dependencies:

1. أثناء عرض ملف pubspec.yaml في الـAndroid Studio ، انقر على Pub get. يؤدي هذا إلى تحميل الحزمة إلى مشروعك. يجب أن ترى ما يلي في وحدة التحكم:

يؤدي تشغيل الأمر Pub get أيضًا إلى إنشاء ملف pubspec.lock تلقائيًا. يضم هذا الملف قائمة بجميع الحزم التي تم تحميلها إلى المشروع مع أرقام إصداراتها.

1. انتقل إلى الملف lib/main.dart وقم بعمل استيراد (import) للحزمة الجديدة:

أثناء الكتابة في الـ Android Studio، يمنحك Android Studio اقتراحات لاستيراد المكتبات. ثم يعرض الـ import string باللون الرمادي ، مما يتيح لك معرفة أن المكتبة المستوردة غير مستخدمة (حتى الآن).

1. استخدم الـ English words package لإنشاء نصٍ ما بدلاً من استخدام السلسلة “Hello World”:

ملاحظة: ” Pascal case” (المعروفة أيضًا باسم ” upper camel case “) ، تعني أن كل كلمة في الـstring ، بما في ذلك الأولى ، تبدأ بحرف كبير. لذا ، فإن “uppercamelcase” تصبح “UpperCamelCase”.

1. إذا كان التطبيق قيد التشغيل ، فاضغط hot reload لتحديث التطبيق الذي ما يزال قيد التشغيل. في كل مرة تنقر فيها على إعادة التحميل السريع، أو تقوم بعمل حفظ للمشروع ، يجب أن ترى زوجًا مختلفًا من الكلمات ، يتم اختياره عشوائيًا. هذا لأنه يتم إنشاء الكلمات داخل التابع build ، والذي يتم استدعاؤه في كل مرة يتطلب فيها MaterialApp عملية الـ rendering ، أو عند الضغط على زر تبديل النظام الأساسي في الـ Flutter Inspector.

هل واجهت أي مشكلة؟

إذا كان تطبيقك لا يعمل بشكل صحيح ، فابحث عن الأخطاء الإملائية (typos) في الكود الذي كتبته. إذا كنت ترغب في تجربة بعض أدوات تصحيح الأخطاء في Flutter ، فراجع مجموعة الأدوات DevTools التي تضم أدوات الـ debugging and profiling. إذا لزم الأمر ، استخدم الكود الموجود على الروابط التالية لتضمن عدم وجود أي أخطاء إملائية وتستطيع أن تشغل التطبيق بشكل صحيح.

• pubspec.yaml
• lib/main.dart

الخطوة 3: إضافة Stateful widget:

تتميز الـ Stateless widgets بكونها غير قابلة للتغير (immutable)، وبالتالي فإن جميع الـproperties الخاصة بها لا يمكن أن تتغير إذ يتم سبق الـproperties فيها بالكلمة المحجوزة final مما يعني أنها ثابتة وغير قابلة للتعديل.

وعلى عكس سابقتها فإن الـ Stateful widgets قابلة للتغيرـ حيث يكون لها ما يسمى بالحالة (State) والتي قد تتغير خلال دورة حياة هذه الـwidget.

تحقيق الـ stateful widget برمجياً (Implementing a stateful widget) يتطلب تعريف صفين (2 classes):

1. StatefulWidget class.
2. State class.

يقوم الـ StatefulWidget class بإنشاء instance من الـ State class.

إن الـ StatefulWidget class في حد ذاته غير قابل للتغير (immutable)، ويمكن التخلص منه وإعادة إنشائه من جديد. ولكن الـ StatefulWidget class يقوم بإنشاء instance من الـ State class، والتي تكون بدورها قابلة للتغير وتستمر طوال دورة حياة الـ StatefulWidget وتحافظ على (maintain) ما يسمى بـ حالة الـ widget.

في هذه الخطوة ، ستضيف stateful widget تدعى RandomWords ، والتي ستنشئ الـState class الخاص بها الذي يدعى _RandomWordsState. ستستخدم بعد ذلك RandomWords كإبن (child) داخل الـ stateless widget التي تدعى MyApp.

1. أنشئ الـboilerplate code للـ stateful widget.

في الملف lib/main.dart ، ضع المؤشر في آخر سطر من الملف بعد الكود الموجود مسبقا ضمن الملف، واضغط enter عدة مرات عدة مرات للبدء في سطر جديد. في الـ IDE الخاص بك ، ابدأ في كتابة stful. سيسألك المحرر عما إذا كنت تريد إنشاء Stateful widget. اضغط على enter للقبول. سيظهر الـ boilerplate code للصفوف المطلوبة، وسيتم وضع المؤشر لك لإدخال اسم الـ Stateful widget الخاصة بك.

1. اكتب RandomWords كاسم للـ widget.

لا تقوم الـ RandomWords بالكثير بخلاف إنشاء الـ State class الخاصة بها.

بمجرد إدخال RandomWords كاسم للـ Stateful widget ، يقوم الـ IDE تلقائيًا بتحديث اسم الـ State class المصاحبة ، وتسميتها _RandomWordsState. بشكل افتراضي ، يكون اسم الـ State classمسبوقًا بـundersocre . يؤدي إضافة undersoce إلى بداية identifier (“معرف” أي اسم متحول أو تابع أو صف (class))إلى جعله “خاص” (private) في لغة Dart . وبالتالي لا يمكن الوصول لهذا المعرف الخاص خارج الملف الموجود فيه، وهي أفضل ممارسة يوصى بها للـ State objects.

يحدِّث الـ IDE أيضًا الـ state class تلقائيًا لترث الـ State<RandomWords> ، مما يشير إلى أنك تستخدم generic State class متخصصة للاستخدام مع RandomWords. معظم الـ app’s logicموجود هنا – فهو يحافظ على الـstate الخاصة بالـwidget RandomWords. يضم الـ_RandomWordsState قائمة أزواج الكلمات (word pairs) التي تم إنشاؤها ، والتي يزداد حجمها إلى ما لا نهاية مع قيام المستخدم بالتمرير ، وفي الجزء الثاني من هذا الدرس ، سيتمكن المستخدم من إضافة أزواج الكلمات إلى المفضلة أو إزالتها من القائمة عن طريق تبديل رمز القلب.

أصبح الكود الخاص بالـwidget كما يلي:

1. قم بتحديث التابع build في _RandomWordsStateليصبح كما يلي:

1. قم بإزالة الكود المسؤول عن إنشاء الكلمات من MyApp عن طريق إجراء التغييرات الموضحة كما يلي:

1. أعد تشغيل التطبيق. يجب أن يعمل التطبيق كما كان من قبل ، ويعرض أزواج الكلمات في كل مرة تقوم فيها بإعادة تحميل التطبيق من خلال hot reload أو القيام بعملية حفظ للملف(save).

تلميح: إذا رأيت تحذيرًا بشأن الـhot reload يقول بأنك قد تحتاج إلى عمل restart للتطبيق ، فقم بعمل restart للتطبيق . قد يكون التحذير خاطئًا ، ولكن عمل restart للتطبيق يضمن أن التغييرات التي أجريتها تتحقق في واجهة التطبيق.

هل واجهت أي مشكلة؟

إذا كان تطبيقك لا يعمل بشكل صحيح ، فابحث عن الأخطاء الإملائية (typos) في الكود الذي كتبته. إذا كنت ترغب في تجربة بعض أدوات تصحيح الأخطاء في Flutter ، فراجع مجموعة الأدوات DevTools التي تضم أدوات الـ debugging and profiling. إذا لزم الأمر ، استخدم الكود الموجود على الرابط التالي لتضمن عدم وجود أي أخطاء إملائية وتستطيع أن تشغل التطبيق بشكل صحيح.

• lib/main.dart

الخطوة 4: إنشاء ListView لانهائية قابلة للتمرير (infinite scrolling ListView):

في هذه الخطوة ، ستقوم بتعديل الكود في الـ _RandomWordsState لإنشاء وعرض list من أزواج الكلمات. أثناء قيام المستخدم بالتمرير ضمن القائمة (المعروضة في الـ ListView widget) يزداد حجم القائمة إلى ما لانهاية (list grows infinitely). يسمح لك الـ ListView’s builder factory constructor بإنشاء list view lazily، عند الطلب.

1. أضف قائمة تدعى _suggestions إلى الـ RandomWordsState class_ من أجل حفظ ازواج الكلمات المقترحة. وأضف أيضاً متحول يدعى _biggerFont من أجل طعل حجم الـFont أكبر.

بعد ذلك ، ستضيف التابع _buildSuggestions إلى الـ _RandomWordsState. يقوم هذا التابع بإنشاء الـListView التي تعرض أزواج الكلمات المقترحة.

الـ ListView class يوفر builder property ، وهي factory builder و callback function يتم تعريفه كـ anonymous function. يتم تمرير two parameters إلى الـ factory builder الأول BuildContext والثاني الـindex الذي يشير إلى الخانة الحالية ضمن الـ iterator ونرمز لهذا الـ index بـ i والذي يأخذ القيمة الابتدائية 0 ويزيد في كل مرة يتم فيها استدعاء الـ factory builder. يزيد هذا الـ index بمقدار 2 من أجل كل زوج من الكلمات، مرة من أجل الـ listTile (سطر ضمن الـ listView)، ومرة من أجل الـ Divider (خط يفصل بين سطرين ضمن الـlistView). يسمح هذا النموذج للـ suggested list بالاستمرار في النمو بينما يقوم المستخدم بالتمرير.

1. أضف التابع _buildSuggestions إلى الـ _RandomWordsState:

/*1*/ هنا يتم استدعاء الـ itemBuilder callback مرة واحدة لكل زوج من الكلمات المقترحة ، ويتم وضع كل اقتراح في ListTile (صف ضمن الـ listView). بالنسبة للصفوف الزوجية في الـ listView، يضيف التابع ListTile لزوج الكلمات. بالنسبة للصفوف الفردية ، يضيف التابع Divider (خط يفصل بين سطرين ضمن الـlistView) لفصل الصفوف عن بعضها. لاحظ أنه قد يكون من الصعب رؤية الـDivider على الأجهزة الأصغر حجمًا.

/*2*/ يضيف هذا السطر divider بارتفاع بكسل واحد قبل كل صف في ListView.

/*3*/ يقسم هذا الـexpression (i ~/ 2) الرقم i على 2 ويعيد النتيجة كعدد صحيح integer. على سبيل المثال: إن تقسيم الاعداد التالية 1, 2, 3, 4, 5 يعيد كنتيجة 0, 1, 1, 2, 2 على الترتيب. يحسب هذا الـexpression عدد أزواج الكلمات في الـ listView.

/*4*/ إذا وصلت إلى نهاية أزواج الكلمات المتاحة ، فقم بإنشاء 10 كلمات أخرى وأضفهم إلى قائمة الاقتراحات.

التابع _buildSuggestions يستدعي التابع buildRow_ مرة واحدة لكل زوج من الكلمات. يعرض هذا التابع كل زوج جديد في ListTile ، مما يسمح لك بجعل شكل صفوف الـlistView أكثر جاذبية في الخطوة التالية.

1. أضف التابع _buildRow إلى :_RandomWordsState

1. في فئة الـ_RandomWordsState ، قم بتحديث التابع build بحيث يستخدم التابع buildSuggestions ، بدلاً من استدعاء مكتبة إنشاء الكلمات مباشرةً. (تنفذ الـ Scaffold widget التخطيط المرئي (visual layout) الأساسي للـ Material Design.) استبدل الكود الموجود في التابع build بالكود المظلل باللون السماوي:

1. في الـ MyApp class ، حدِّث التابع build عن طريق تغيير العنوان وتغيير الـ home ليصبح هو الـ RandomWords widget، احذف الأجزاء المظللة بالأحمر واستبدلها بالاجزاء المظللة بالأخضر كما يلي:

1. أعد تشغيل التطبيق. يجب أن تتمكن من التمرير ضمن القائمة وتشاهد عدد غير منتهي من أزواج الكلمات طالما تقوم بالتمرير ضمنها.

هل واجهت أي مشكلة؟

إذا كان تطبيقك لا يعمل بشكل صحيح ، فابحث عن الأخطاء الإملائية (typos) في الكود الذي كتبته. إذا كنت ترغب في تجربة بعض أدوات تصحيح الأخطاء في Flutter ، فراجع مجموعة الأدوات DevTools التي تضم أدوات الـ debugging and profiling. إذا لزم الأمر ، استخدم الكود الموجود على الرابط التالي لتضمن عدم وجود أي أخطاء إملائية وتستطيع أن تشغل التطبيق بشكل صحيح.

• lib/main.dart

تشغيل التطبيق في وضع Profile ووضع Release:

ملاحظة مهمة: لا تختبر أداء تطبيقك أثناء تمكين وضع التصحيح (debug) ووضع إعادة التحميل السريع (hot reload).

أنت الآن تشغل تطبيقك في وضع التصحيح (debug mode). يقدم الـdebug mode ميزات مفيدة للمطور مثل hot reload أو step debugging ولكنه يقدم هذه الميزات على حساب أداء التطبيق (app performance). فمن المتوقع أثناء تشغيل التطبيق في ال Debug mode أن ترى أداءً بطيئًا ورسومًا متحركة (animations) سيئة.

لمزيد من التفاصيل حول هذا الموضوع، راجع صفحة “أوضاع بناء تطبيق Flutter” (Flutter’s build modes).

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

الخطوات الواجب تنفيذها اللآن:

تهانينا!

لقد كتبت تطبيق Flutter تفاعلي يعمل على كل من iOS و Android .

في هذا الـcodelab (الدرس المرفق بـ كود)، لقد قمت بما يلي:

• إنشاء تطبيق Flutter من الألف إلى الياء.
• كتبت دارت كود.
• قمت بالاستفادة من مكتبة خارجية (third-party library).
• استخدم الـ hot reload لتسرع من عملية تطوير التطيبقات.
• قمت بكتابة stateful widget.
• قمت بإنشاء قائمة تمرير لا نهائية محملة ببطء.

إذا كنت ترغب في توسيع هذا التطبيق ، فانتقل إلى الجزء الثاني من هذا الدرس على موقع Google Developers Codelabs ، حيث ستضيف الوظائف التالية:

ستضيف التفاعل (interactivity) إلى التطبيق من خلال إضافة أيقونة على شكل قلب يمكنك النقر عليها لتضيف زوجا من الكلمات إلى المفضلة.

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

ستقوم بتعديل الـtheme الخاصة بالتطبيق لتجعله أبيض بالكامل (all-white app).

توثيق منصة Flutter

تعلم المزيد:

يضم هذا القسم العناوين التالية:

• أساسيات Flutter.
• طبق ما تعرفه حالياً.
• مصادر أخرى.

تعرف على المزيد حول إطار عمل Flutter من الصفحات التالية:

أساسيات Flutter:

• مقدمة عن الـ Widgets.
• برنامج تعليمي عن Building layouts.
• برنامج تعليمي عن إضافة التفاعلية مع التطبيق (Add interactivity).

طبق ما تعرفه حالياً:

• Flutter لمطوري تطبيقات الأندرويد.
• برنامج تعليمي مرفق بـ كود (codelab) بعنوان من Java إلى Dart.
• Flutter لمطوري تطبيقات iOS.
• Flutter لمطوري تطبيقات React Native.
• Flutter لمطوري تطبيقات الوب.
• Flutter لمطوري تطبيقات Xamrin.Forms.

مصادر أخرى:

• نماذج تطبيقات مكتوبة باستخدام إطار عمل Flutter (Flutter samples).
• كتاب وصفات Flutter (Flutter cookbook).
• تمهيد إلى لغة البرمجة Dart: تعلم المزيد عن Dart.
• توثيق Flutter API .
• المعسكر التدريبي لمطور Flutter الكامل باستخدام Dart (The Complete Flutter Developer Bootcamp Using Dart).
• المحتوى التعليمي لـ Flutter على منصة Udacity(Udacity online Flutter training).

تواصل معنا على قائمتنا البريدية. يسعدنا أن نستمع إليك!

نرجو لك تجربة تطوير سعيدة وممتعة باستخدام Flutter.

هذا هو Dash

Dash تميمة الحظ السعيد للغة Dart و لبيئة العمل Flutter

ملاحظة: يمكنك الآن إنشاء Dash رقمي خاص بك باستخدام Dashatar ، تطبيق لـ Flutter للويب والجوال!

كيف قد بدأوا؟

بمجرد أن بدأت Shams Zakhour العمل بكتابة Dart في Google في ديسمبر 2013، بدأت بحماس ب جوهر Dart. بعد دراسة Java لمدة 14 عامًا، لاحظت مدى إعجابها بجوهر Java، Duke، وأرادت شيئًا مشابهًا لـ Dart.

لكن الفكرة لم تكتسب قوة حتى عام 2017، عندما اقترح Nina Chen أحد مهندسين Flutter، بقائمة الرسائل المحلية.

في ذلك الوقت كان Joshy Joseph هو flutter VP وقد وافق على الفكرة وطلب من Linda Rasmussen بتنظيم مؤتمر (2018 Dart)

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

هذا صحيح، كانت Dash في الأصل تميمة Dart، وليست تميمة Flutter.

فيما يلي بعض النماذج التجريبية المبكرة وأحد النماذج الأولية:

النموذج الأولي كان له عيون متفاوتة

لماذا الطائر الطنان؟

في وقت مبكر، تم إنشاء صورة طائر طنان لفريق Dart لاستخدامها في العروض التقديمية والويب. يمثل الطائر الطنان أن دارت لغة سريعة.

ومع ذلك، فإن الطيور الطنانة مدببة ولكن أردناه أن يكون طائرًا محبوبًا، لذلك اخترنا طائرًا طنانًا مستديرًا.

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

تقدمة Dash في مؤتمر Dart في يناير 2018:

بينما كانت عملية التصنيع جارية، اختار Shams اسمًا لامعا هو Dash، لأنه كان اسمًا تمهيدياً لمشروع Dart، وكان محايدًا بين الجنسين، ويبدو أنه مناسب للطائر الطنان.

وصلت العديد من صناديق Dash إلى جنوب كاليفورنيا في الوقت المناسب تمامًا للمؤتمر. تم تبنيها بشغف من قبل عشاق Dart وFlutter.

بسبب حديث الناس، أصبحت Dash الآن التميمة لـ Flutter وDart.

Dash 1.0

غنيمة المؤتمر

منذ إنشاء Dash 1.0، صنعنا نسختين إضافيتين. قام قسم التسويق بتغيير نظام ألوان Dart وFlutter بعد إنشاء Dash 1.0، لذا فإن Dash 2.0 يعكس المخطط القادم (الذي أزال اللون الأخضر). يعد Dash 2.1 حجمًا أصغر ويحتوي على عدد قليل من التعديلات اللونية. الحجم الأصغر أسهل في الشحن، ويتناسب بشكل أفضل مع مسننات الآلة

Dash 2.0 and 2.1

حقائق عن Dash :

Dash هي أنثى ، لكنها لا تمانع في أن يتم مناداتها بـ هو او هم

لدى Dash حساب على Instagram.

لـ Dash منقار مستقيم. من فضلك، لا تصف Dash بمنقار منحني.

لدينا أيضًا Mega-Dash، تميمة بالحجم الطبيعي تستريح حاليًا في مكتب Google مغلق.

ظهرت Mega-Dash لأول مرة في حدث Flutter Interact في بروكلين، نيويورك، في 11 ديسمبر 2019.

لدينا أيضًا دمية Dash التي صنعتها شمس في البداية.

يحتوي YouTube الخاص بنا على عدد من مقاطع الفيديو مع الدمية Dash ، التي اعلن عنها Emily Fortuna، أحد محامي Flutter Developer الأوائل (والمحبوبين كثيرًا).

هذه قائمة مرتبة أبجدياً لجميع عناصر الواجهة المستخدم تقريبًا مع Flutter. ويمكنك أيضا تصفح الحاجيات حسب الفئة.

قد ترغب أيضًا في الاطلاع على سلسلة مقاطع الفيديو Widget of the Week في قناة Flutter على YouTube. كل حلقة قصيرة تحتوي على أداة Flutter مختلفة. للمزيد من سلسلة الفيديو، انظر صفحة الفيديو الخاصة بنا.

العنصر من قائمة التشغيل الأسبوعية

Align عنصر واجهة مستخدم يقوم بمحاذاة العناصر داخله (طفله) واختيار حجمه نسبتاً لحجم العناصر داخله الوثائق	AlertDialog تنبيهات تقوم بمقاطعة عاجلة تتطلب قراراً من المستخدم لموقف ما. تقوم الأداة AlertDialog بتنفيذ هذه المكونات. الوثائق	AbsorbPointer عنصر واجهة مستخدم يتلقى المؤشرات أثناء النقر التجريبي. عندما يكون التلقي صحيحًا، فإن عنصر واجهة المستخدم يمنع شجرته الفرعية من تلقي أحداث المؤشر عن طريق إنهاء اختبار الدخول في حد ذاته. لكنها لا تزال تستهلك مساحة أثناء التخطيط وترسم أبناءها كالمعتاد. إنه يمنع أبناءه من أن يكونوا هدفًا للأحداث محددة، لأنه يعيد صح من RenderBox.hitTest. الوثائق
AnimatedContainer حاوية تقوم بتغير قيمها تدريجيًا خلال فترة زمنية. الوثائق	AnimatedBuilder عنصر واجهة مستخدم لإنشاء الرسوم المتحركة. AnimatedBuilder يمفيد في المتطلبات الأكثر تعقيدًا والتي نرغب في تضمين الرسوم المتحركة كجزء من وظيفة بناءها. لاستخدام AnimatedBuilder ، ما عليك سوى إنشاء عنصر واجهة المستخدم ومرره إلى وظيفة البناءه. الوثائق	AnimatedAlign إصدار متحرك من Align يقوم تلقائيًا بنقل موضع العناصر داخله (طفله) خلال مدة معينة و تغيرت المحاذاة المحددة. الوثائق
AnimatedListState حالة حاوية التمرير التي تحرك العناصر عند إدراجها أو إزالتها. الوثائق	AnimatedDefaultTextStyle إصدار متحرك من DefaultTextStyle يقوم تلقائيًا بتحويل نمط النص الافتراضي (النمط الذي يتم تطبيقه على النص في حال لم يتم تحديد نمط واضح) خلال مدة معينة بتغير النمط المحدد. الوثائق	AnimatedCrossFade عنصر واجهة مستخدم يتلاشى بين عنصرين ضمنه (طفلين) محددين ويغير نفسه بين حجمهما. الوثائق
AnimatedPhysicalModel نسخة متحركة من PhysicalModel. الوثائق	. AnimatedOpacity هي إصدار متحرك من خاصية (التعتيم والشفافية) يقوم تلقائيًا بنقل درجة عتامة العناصر ضمنه (طفله) خلال مدة معينة بتغير التعتيم المحدد الوثائق	AnimatedModalBarrier عنصر واجهة مستخدم يمنع المستخدم من التفاعل مع عناصر واجهة المستخدم الموجودة خلفه. الوثائق
AnimatedWidget عنصر واجهة مستخدم يعيد البناء عندما تغيير قيمة given Listenable الوثائق	AnimatedSize عنصر واجهة مستخدم يقوم بتغير حجمه خلال مدة معينة كلما تغير حجم الطفل الموضوع ضمنه الوثائق	AnimatedPositioned إصدار متحرك من Positioned والذي يقوم تلقائيًا بنقل موضع الطفل خلال مدة معينة كلما تغير الموضع المحدد. الوثائق
AspectRatio عنصر واجهة مستخدم يحاول تغيير حجم العناصر ضمنه (طفله) بنسبة عرض إلى ارتفاع محددة. الوثائق	Appbar شريط التطبيق المصمم بالأبعاد متعددة. يتكون شريط التطبيق من شريط أدوات ومن المحتمل أن تكون هناك عناصر واجهة مستخدم أخرى، مثل TabBar وFlexibleSpaceBar. الوثائق	AnimatedWidgetBaseState فئة أساسية لأدوات الرسوم المتحركة المضمنة. الوثائق
BackdropFilter عنصر واجهة مستخدم يقوم بتطبيق مرشح على المحتوى المطلي الموجود ثم يقوم برسم طفل. هذا التأثير مكلف نسبيًا، خاصةً إذا كان المرشح غير محلي، مثل تمويه. الوثائق	Autocomplete عنصر واجهة مستخدم لمساعدة المستخدم على الاختيار عن طريق إدخال بعض النصوص والاختيار من بين قائمة الخيارات. الوثائق	AssetBundle تحتوي حزم الأصول على الموارد، مثل الصور والسلاسل النصية، التي يمكن أن يستخدمها التطبيق. الوصول إلى هذه الموارد غير متزامن بحيث يمكن تحميلها ببساطة عبر الشبكة الانترنت (على سبيل المثال، من NetworkAssetBundle) أو من نظام الملفات المحلي دون حظر واجهة مستخدم التطبيق. الوثائق
BottomSheet توجد أسفل الشاشة للكشف عن المزيد من الخيارات. يمكنك استدعاء showBottomSheet () لتنفيذ ورقة سفلية ثابتة أو showModalBottomSheet () لتنفيذ ورقة سفلية مشروطة الوثائق	BottomNavigationBar تسهل أشرطة التنقل السفلية الاستكشاف والتبديل بين عروض الواجهة العلوية بنقرة واحدة. تقوم أداة BottomNavigationBar بتنفيذ هذا المكون. الوثائق	Baseline عنصر واجهة مستخدم يضع الطفل وفقًا لخط الأساس للطفل. الوثائق
Checkbox مربعات الاختيار تسمح للمستخدم بتحديد خيارات متعددة من مجموعة خيارات. تقوم أداة Checkbox بتنفيذ هذا المكون. الوثائق	Center عنصر واجهة يقوم بوضع العنصر الذي ضمنه في مركزه الوثائق	Card بطاقة مصممة متعدد الأبعاد. تحتوي البطاقة على زوايا دائرية قليلاً وظل الوثائق
ClipOval عنصر الواجهة التي تقطع طفلها باستخدام شكل بيضاوي الوثائق	CircularProgressIndicator مؤشر بشكل دائري، يدور للإشارة إلى أن التطبيق مشغول. الوثائق	Chip شريحة مصممة. تمثل الرقائق كيانات من كتل صغيرة، مثل جهة اتصال الوثائق
Column قم بتخطيط قائمة من عناصر واجهة المستخدم الفرعية في شكل عامودي الوثائق	ClipRect عنصر الواجهة التي تقطع طفلها باستخدام مستطيل الوثائق	ClipPath عنصر الواجهة التي تقطع طفلها باستخدام مسار الوثائق
CupertinoActionSheet قائمة اختيار سفلية نمطية على غرار iOS لاختيار خيار من بين العديد. الوثائق	Container أداة ملائمة تجمع بين أدوات الرسم وتحديد المواقع وتغيير الحجم. الوثائق	ConstrainedBox أداة تفرض قيودًا إضافية على عنصر الواجهة ضمنه (طفله) الوثائق
CupertinoButton زر بنمط ios الوثائق	CupertinoAlertDialog مربع حوار تنبيهي بنمط iOS الوثائق	CupertinoActivityIndicator مؤشر نشاط على غرار iOS. يعرض “سبينر” دائري الوثائق
CupertinoDialog مربع حوار بنمط iOS. الوثائق	CupertinoDataPicker لانتقاء التاريخ أو التاريخ والوقت بنمط iOS الوثائق	CupertinoContextMenu مسار يقوم بملء الشاشة على غرار iOS يفتح عند الضغط على الطفل لفترة طويلة. تستخدم لعرض الإجراءات ذات الصلة للمحتوى الخاص بك الوثائق
CupertinoNavigationBar شريط تنقل علوي بنمط iOS. تستخدم عادة مع CupertinoPageScaffold. الوثائق	CupertinoFullscreenDialogTransition يُستخدم لاستدعاء مربعات حوار ملء الشاشة. على غرار iOS الوثائق	CupertinoDialogAction زر يستخدم عادة في CupertinoAlertDialog الوثائق
CupertinoPicker عنصر تحكم منتقي بنمط iOS. يستخدم لتحديد عنصر في قائمة مختصرة الوثائق	CupertinoPageTransition يوفر رسمًا متحركًا لانتقال الصفحة بنمط iOS. الوثائق	CupertinoPageScaffold هيكل تخطيط صفحة نمط iOS الأساسي. يضع شريط التنقل والمحتوى على خلفية. الوثائق
CupertinoSearchTextField حقل بحث على غرار iOS. الوثائق	CupertinoScrollbar شريط تمرير بنمط iOS يشير إلى الجزء المرئي حاليًا من عنصر واجهة مستخدم قابل للتمرير الوثائق	CupertinoPopupSurface سطح مستطيل مستدير الزوايا يشبه سطحًا منبثقًا لنظام iOS، مثل مربع حوار تنبيه أو ورقة إجراءات الوثائق
CupertinoSlidingSegmentedControl عنصر تحكم مجزأ على غرار iOS-13. يستخدم لتحديد خيارات حصرية متبادلة في قائمة أفقية الوثائق	CupertinoSlider يستخدم للاختيار من نطاق القيم. الوثائق	CupertinoSegmentedControl عنصر تحكم مجزأ على غرار iOS. يستخدم لتحديد خيارات حصرية متبادلة في قائمة أفقية. الوثائق
CupertinoTabBar شريط علامة تبويب سفلي بنمط iOS. تستخدم عادة مع CupertinoTabScaffold. الوثائق	CupertinoSwitch مفتاح على غرار iOS. يُستخدم للتبديل بين حالة التشغيل / الإيقاف بحالة وحيدة. الوثائق	CupertinoSliverNavigationBar شريط تنقل على غرار iOS مع عناوين كبيرة على غرار iOS-11 الوثائق
CupertinoTextField حقل نصي بنمط iOS. الوثائق	CupertinoTabView جذر علامة التبويب يدعم التنقل الموازي بين علامات التبويب. تستخدم عادة مع CupertinoTabScaffold. الوثائق	CupertinoTabScaffold هيكل تطبيق iOS المبوب. يضع شريط علامات التبويب أعلى علامات تبويب للمحتوى الوثائق
CustomPaint عنصر واجهة مستخدم يوفر مساحة يمكن الرسم عليه أثناء مرحلة الطلاء الوثائق	CustomMultiChildLayout عنصر واجهة مستخدم يستخدم لتغيير حجم العديد من العناصر الفرعية وموضعها. الوثائق	CupertinoTimerPicker لضبط العد التنازلي على غرار iOS. الوثائق
DataTable تعرض جداول البيانات مجموعات من البيانات الأولية. تظهر عادةً في منتجات الاساسية للمؤسسات. تقوم أداة DataTable بتنفيذ هذا المكون الوثائق	CustomSingleChildLayout عنصر واجهة مستخدم يقوم بتأخير تخطيط فرعه الفردي الوثائق	CustomScrollView ScrollView يقوم بإنشاء تأثيرات لتمرير مخصصة باستخدام اجزاء صغيرة الوثائق
DecoratedBoxTransition نسخة متحركة من DecoratedBox تحيي الخصائص المختلفة للزخرفة. الوثائق	DecoratedBox العنصر الذي يرسم الزخرفة سواء قبل أو بعد تلوين طفلها الوثائق	Date & Time Pickers يعرض مختار التاريخ نافذة حوار لتحديد تاريخ واحد على الهاتف المحمول. يعرض منتقي الوقت مربع حوار لتحديد الوقت مرة واحدة (في الساعات: والدقائق) على الهاتف المحمول. الوثائق
Divider خط أفقي بسمك بكسل منطقي، مع أطراف على كلا الجانبين الوثائق	Dismissible عنصر واجهة يمكن استبعاده عن طريق السحب في الاتجاه المشار إليه. يؤدي سحب أو تحريك هذه الأداة في DismissDirection إلى انزلاق الطفل بعيدًا عن الرؤية. بعد الرسم المتحرك للعنصر، إذا كانت resizeDuration غير خالية، فإن عنصر واجهة المستخدم Dismissible يحرك ارتفاعه (أو عرضه ، أيهما متعامد مع اتجاه الرفض) إلى الصفر على مدى resizeDuration. الوثائق	DefaultTextStyle صلاحية تطبيق نمط نص واضح على عنصر الواجهة الذي يكون بدون نمط الوثائق
DraggableScrollableSheet حاوية قابلة للتمرير تستجيب لإيماءات السحب عن طريق تغيير حجم التمرير للوصول إلى حد معين، ثم التمرير. الوثائق	Draggable عنصر واجهة يمكن سحبه من DragTarget. عندما يتعرف عنصر واجهة مستخدم قابل للسحب على بداية إيماءة السحب، فإنه يعرض أداة ملاحظات تتعقب إصبع المستخدم عبر الشاشة. إذا رفع المستخدم إصبعه أثناء وجوده فوق DragTarget، فسيتم منح هذا الهدف الفرصة لقبول البيانات التي يحملها الجهاز القابل للسحب الوثائق	DragTarget عنصر واجهة مستخدم يتلقى البيانات عند إسقاط عنصر واجهة مستخدم قابل للسحب. عندما يتم سحب مادة قابلة للسحب فوق هدف السحب، يتم سؤال هدف السحب عما إذا كان سيقبل البيانات التي تحملها القابلة للسحب. إذا قام المستخدم بإسقاط أداة السحب فوق هدف السحب (وأشار هدف السحب إلى أنه سيقبل بيانات السحب)، فسيُطلب من هدف السحب قبول بيانات السحب. الوثائق
ElevatedButton زر مصمم بشكل مرتفع. زر ممتلئ يرتفع عند الضغط عليه. الوثائق	DropdownButton يظهر العنصر المحدد حاليًا وسهم بجانبه يقوم بفتح قائمة لاختيار عنصر آخر. الوثائق	Drawer لوحة متعددة التصميم تنزلق أفقيًا من حافة الجانبية، لإظهار خيارات التنقل في التطبيقات. الوثائق
ExpansionPanel تحتوي اللوحات اعلى تدفقات إنشاء تسمح بالتحرير الخفيف للعنصر. تقوم أداة ExpansionPanel بتنفيذ هذا المكون. الوثائق	Expanded عنصر واجهة مستخدم يقوم بتوسيع قسم من صف أو عمود أو فليكس. الوثائق	ExcludeSemantics عنصر واجهة مستخدم يسقط كل دلالات أحفاده. يمكن استخدام هذا لإخفاء الحاجيات الفرعية التي كان سيتم الإبلاغ عنها بخلاف ذلك ولكن هذا سيكون مربكًا فقط. على سبيل المثال، تخفي أداة Material Components Chip الصورة الرمزية لأنها زائدة عن الحاجة مع ملصق الشريحة. الوثائق
FloatingActionButton زر الإجرائيات العائم هو زر رمزه دائري يحوم فوق المحتوى للقيام بإجراء أساسي في التطبيق. تُستخدم أزرار الإجراءات العائمة بشكل شائع في حقل Scaffold.floatingActionButton الوثائق	FittedBox يحدد قياس وموضع الطفل داخله وفقًا لملاءمته. الوثائق	FadeTransition عنصر واجهة يقوم بالتظليل الوثائق
Form حاوية اختيارية لتجميع عناصر واجهة متعددة لحقول معًا (على سبيل المثال، عناصر واجهة مستخدم TextField). الوثائق	FlutterLogo شعار Flutter على شكل عنصر واجهة مستخدم. هذه القطعة خاضعة ل IconTheme. الوثائق	Flow عنصر واجهة مستخدم يقوم بتنفيذ خوارزمية تخطيط التدفق. الوثائق
FractionallySizedBox عنصر واجهة مستخدم يقوم بتحديد قياس حجم الطفل بجزء صغير من إجمالي المساحة المتاحة. لمزيد من التفاصيل حول خوارزمية التخطيط، راجع RenderFractivelySizedOverflowBox الوثائق	FractionalTranslation عنصر واجهة مستخدم يقوم بالترجمة بجزء صغير من حجم المربع قبل إنشاء طفله. الوثائق	FormField حقل نموذج وحيد. تحافظ هذه الأداة على الحالة الحالية لحقل النموذج، بحيث تنعكس التحديثات وأخطاء التحقق بشكل مرئي في واجهة المستخدم. الوثائق
GridView شبكة من الخلايا المرتبة بشكل رأسي وأفقي وبنمط متكرر تطبق القطعة GridView هذا المكون. الوثائق	GestureDetector أداة تكتشف الإيماءات. يحاول التعرف على الإيماءات التي تتوافق مع عمليات الاسترجاعات غير الفارغة. إذا كان لهذه الأداة طفل، فإنها تخضع لسلوك تغيير الحجم لهذا الطفل. إذا لم يكن لديها طفل، فإنها تنمو لتناسب الوالد بدلاً من ذلك. الوثائق	FutureBuilder عنصر الواجهة الذي يبني نفسه بناءً على أحدث تتفاعل مع المستقبل الوثائق
IconButton زر الرمز هو صورة مطبوعة على عنصر واجهة مستخدم تتفاعل مع اللمسات من خلال ملئها بلون الوثائق	Icon أيقونة تصميم متعدد الأبعاد. الوثائق	Hero عنصر واجهة مستخدم بتمييزه لطفله يختار الرسوم المتحركة للبطل. الوثائق
IndexedStack مجموعة مرتبة تعرض طفلا واحدا من قائمة الأطفال الوثائق	Image العنصر الذي يعرض صورة. الوثائق	IgnorePointer عنصر واجهة مستخدم غير مرئي أثناء اختبار النتائج. عندما يكون التجاهل صحيحًا، تكون هذه الأداة (وشجرتها الفرعية) غير مرئية لتصل إلى الاختبار. تستهلك مساحة أثناء التخطيط وترسم طفلها كالمعتاد. لا يمكن أن يكون هدفًا للأحداث الموجودة، لأنه يعرض القيمة false من RenderBox.hitTest. الوثائق
IntrinsicWidth عنصر واجهة مستخدم يقيس حجم الطفل وفقًا للعرض الاساسي للطفل. الوثائق	IntrinsicHeight عنصر واجهة مستخدم يقيس حجم الطفل وفقًا للارتفاع الحقيقي لطفله. الوثائق	InteractiveViewer عنصر واجهة مستخدم يتيح تفاعلات التحريك والتكبير / التصغير مع طفلها. الوثائق
LinearProgressIndicator مؤشر التقدم الخطي لتصميم المواد (لتحميل)، المعروف أيضًا باسم شريط التقدم. الوثائق	LimitedBox صندوق يحدد حجمه عندما يكون غير مقيد. الوثائق	LayoutBuilder ينشئ شجرة عناصر واجهة يمكن أن تعتمد على حجم عنصر واجهة المستخدم الأصلية. الوثائق
ListView قائمة خطية قابلة للتمرير من عناصر واجهة المستخدم. ListView هي أداة التمرير الأكثر استخدامًا. يعرض الأطفال واحدًا تلو الآخر في اتجاه التمرير. في المحور المتقاطع، يُطلب من الأطفال ملء ListView. الوثائق	ListTile صف واحد ذو ارتفاع ثابت يحتوي عادةً على بعض النصوص بالإضافة إلى رمز بادئة أو لاحقة. الوثائق	ListBody عنصر واجهة مستخدم يقوم بترتيب عناصره الفرعية بالتسلسل على طول محور معين، مما يجبرهم على تحديد بُعد العنصر الرئيسي في المحور الآخر. الوثائق
MediaQuery ينشئ شبكة فرعية يتم فيها حل استفسارات الوسائط للبيانات المحددة. الوثائق	MaterialApp عنصر واجهة مستخدم ملائم يشمل عددًا من عناصر واجهة المستخدم المطلوبة بشكل شائع للتطبيقات التي تنفذ تصميم مواد. الوثائق	LongPressDraggable يجعل الطفل قابلاً للسحب بدءًا من الضغط لفترة طويلة. الوثائق
NestedScrollView يمكن أن تتداخل محتوى طريقة عرض بالتمرير مع عروض التمرير الأخرى، فيممن ربط مواضع التمرير الخاصة بها بشكل جوهري. الوثائق	Navigator عنصر واجهة مستخدم يدير مجموعة من عناصر واجهة المستخدم الفرعية مع نظام مكدس. تحتوي العديد من التطبيقات من أعلى التسلسل الهرمي لعناصر واجهة المستخدم لعرض سجلها المنطقي باستخدام تراكب مع أحدث الصفحات التي تمت زيارتها بشكل مرئي أعلى الصفحات الأقدم. يتيح استخدام هذا النمط للمتصفح الانتقال بصريًا من صفحة إلى أخرى عن طريق تحريك عناصر واجهة المستخدم في التراكب. وبالمثل، يمكن استخدام المستكشف لإظهار مربع حوار عن طريق وضع عنصر واجهة الحوار فوق الصفحة الحالية. الوثائق	MergeSemantics أداة تقوم بدمج دلالات أحفادها. الوثائق
Opacity عنصر واجهة مستخدم يجعل طفله شفافًا جزئيًا. الوثائق	Offstage القطعة التي تضع الطفل كما لو كان في الشجرة، ولكن بدون رسم أي شيء، دون إتاحة الطفل لاختبار الضرب، ودون أخذ أي غرفة في الوالدين. الوثائق	NotificationListener عنصر واجهة مستخدم يستمع إلى الملاحظات التي تنبثق أعلى الشجرة. الوثائق
Padding عنصر واجهة مستخدم يُدرج طفله بواسطة المساحة المتروكة المحددة. الوثائق	OverflowBox عنصر واجهة مستخدم يفرض قيودًا على طفله مختلفًا عن تلك التي تفرضه من والدته، مما قد يسمح للطفل بتجاوز الوالد. الوثائق	OutlinedButton زر مخطط بتصميم متعدد الأبعاد، وهو في الأساس زر نص بحدود معينة. الوثائق
PopupMenuButton يعرض قائمة عند الضغط عليه ويتم رفضه(إزالته) عند تحديد عنصر ما الوثائق	Placeholder عنصر واجهة مستخدم يرسم مربعًا يمثل مكان إضافة عناصر واجهة المستخدم الأخرى يومًا ما. الوثائق	PageView قائمة قابلة للتمرير تعمل صفحة تلو الأخرى. الوثائق
RawImage عنصر واجهة مستخدم يعرض dart: ui. صورة مباشرة. الوثائق	Radio تسمح أزرار الاختيار للمستخدم بتحديد خيار واحد من مجموعة. استخدم أزرار الاختيار للاختيار الحصري إذا كنت تعتقد أن المستخدم بحاجة إلى رؤية جميع الخيارات المتاحة جنبًا إلى جنب. الوثائق	PositionedTransition إصدار متحرك من Positioned يأخذ رسمًا متحركًا محددًا لينقل موضع الطفل من موضع البداية إلى موضع النهاية على مدار حياة الرسوم المتحركة. الوثائق
ReorderableListView قائمة يمكن للمستخدم إعادة ترتيب عناصرها بشكل تفاعلي عن طريق السحب. الوثائق	RefreshIndicator غلاف قابل للسحب للتحديث بتصميم متعدد الأبعاد لقوائم التمرير. الوثائق	RawKeyboardListener عنصر واجهة مستخدم يستدعي رد اتصال عندما يضغط او يحرر المستخدم مفتاح على لوحة المفاتيح الوثائق
RotationTransition ينعش دوران العنصر الوثائق	RotatedBox عنصر واجهة مستخدم يقوم بتدوير طفله بعدد متكامل من ربع المنعطفات. الوثائق	RichText تعرض أداة RichText نصًا يستخدم عدة أنماط مختلفة. يتم وصف النص المراد عرضه باستخدام شجرة من كائنات TextSpan، ولكل منها نمط مرتبط يتم استخدامه لتلك الشجرة الفرعية. قد ينقسم النص عبر عدة أسطر أو قد يتم عرضه جميعًا على نفس السطر بناءً على قيود التخطيط. الوثائق
ScaleTransition يضيف حركة للقطعة المحولة. الوثائق	Scaffold ينفذ التخطيط البصري الأساسي لتصميم الواجهات. توفر هذه الفئة واجهات برمجة تطبيقات لإظهار الأدراج وأشرطة الملاحظات والأوراق السفلية. الوثائق	Row قم بتخطيط قائمة من عناصر واجهة المستخدم الفرعية في الاتجاه الأفقي. الوثائق
Scrollbar شريط تمرير تصميم متعدد الأبعاد. يشير شريط التمرير إلى الجزء المرئي بالفعل من عنصر واجهة المستخدم القابل للتمرير. الوثائق	Scrollable ينفذ Scrollable نموذج التفاعل لعنصر واجهة مستخدم قابل للتمرير، بما في ذلك التعرف على الإيماءات، ولكن ليس لديه رأي حول كيفية إنشاء إطار العرض، الذي يعرض الأطفال بالفعل. الوثائق	ScrollConfiguration يتحكم في كيفية عمل عناصر واجهة الاستخدام القابلة للتمرير في الشجرة الفرعية. الوثائق
SingleChildScrollView مربع يمكن فيه تمرير عنصر واجهة مستخدم واحد. تكون هذه الأداة مفيدة عندما يكون لديك مربع واحد يكون عادةً مرئيًا تمامًا، على سبيل المثال وجه الساعة في مختار الوقت، ولكن عليك التأكد من إمكانية التمرير إذا أصبحت الحاوية صغيرة جدًا في محور واحد (اتجاه التمرير). الوثائق	SimpleDialog يمكن أن توفر مربعات الحوار بسيطة التفاصيل أو إجراءات إضافية حول عنصر القائمة. على سبيل المثال يمكنهم عرض رموز الصور الرمزية التي توضح النص الفرعي أو الإجراءات المتعامدة (مثل إضافة حساب). الوثائق	Semantics عنصر واجهة مستخدم يقوم بالتعليق على شجرة عناصر واجهة المستخدم مع وصف لمعنى عناصر واجهة المستخدم. تُستخدم بواسطة أدوات الوصول ومحركات البحث وبرامج التحليل الدلالي الأخرى لتحديد معنى التطبيق. الوثائق
SizedOverflowBox عنصر واجهة مستخدم بحجم معين ولكنه يمرر قيوده الأصلية إلى طفله، والذي من المحتمل أن يتجاوز حجمه. الوثائق	SizedBox صندوق بحجم محدد. إذا أعطيت عنصرًا فرعيًا، فستجبر الأداة التابعة لها على أن يكون لها عرض و / أو ارتفاع محدد (يُسمح بالقيم الافتراضية من قبل والد هذه الأداة). إذا كان العرض أو الارتفاع فارغًا، فستعمل هذه الأداة على تغيير حجم نفسها لمطابقة حجم الطفل في هذا البعد. الوثائق	SizeTransition ينعش حجمه الخاص ويحاذي الطفل. الوثائق
SliverAppBar شريط لتطبيق تصميم متعدد الأبعاد بالتكامل مع CustomScrollView. الوثائق	Slider تتيح أشرطة التمرير للمستخدمين الاختيار من بين مجموعة من القيم عن طريق تحريك إبهام شريط التمرير. الوثائق	SlideTransition تحريك موضع عنصر واجهة المستخدم بالنسبة إلى موضعه الطبيعي. الوثائق
SliverFixedExtentList الأجزاء التي تضع العديد من الصناديق الفرعية بنفس مجال المحور الرئيسي في مصفوفة خطية. الوثائق	SliverChildListDelegate مفوض يقوم بتزويد الأطفال بأجزاء باستخدام قائمة صريحة. الوثائق	SliverChildBuilderDelegate مسؤول يقوم بتزويد الأطفال بأجزاء باستخدام إعادة البناء الوثائق
SliverPadding الجزء الذي يضع حشوة على كل جانب من جزء أخرى الوثائق	SliverList الجزء الذي يضع العديد من الصناديق الفرعية في مصفوفة خطية على طول المحور الرئيسي. الوثائق	SliverGrid الجزء الذي يضع العديد من الأطفال في الصندوق بترتيب ثنائي الأبعاد. الوثائق
SnackBar رسالة خفيفة مع إجراء اختياري يتم عرضها لفترة وجيزة أسفل الشاشة الوثائق	SliverToBoxAdapter جزء يحتوي على عنصر واجهة مستخدم بمربع واحد. الوثائق	SliverPersistentHeader جزء يختلف حجمها عندما يتم تمرير جزء أصغر إلى حافة منفذ العرض مقابل اتجاه نمو الجزء الاصغر. الوثائق
StreamBuilder عنصر واجهة مستخدم يبني نفسه بناءً على أحدث تتفاعل مع البث. الوثائق	Stepper أداة متدرجة ذات تصميم متعدد الأبعاد تعرض التقدم عبر سلسلة من الخطوات. الوثائق	Stack يعتبر هذا الفصل مفيدًا إذا كنت تريد ان تجعل العديد من الأطفال تتداخل بطريقة بسيطة، على سبيل المثال وجود نص وصورة متراكبين مع تدرج وزر متصل بالجزء السفلي. الوثائق
TabBarView عرض صفحة، يعرض عنصر واجهة المستخدم الذي يتوافق مع علامة التبويب المحددة حاليًا. يستخدم عادة بالتزامن مع TabBar. الوثائق	TabBar عنصر واجهة مستخدم لتصميم المواد يعرض صفًا أفقيًا من علامات التبويب. الوثائق	Switch تعمل مفاتيح التشغيل / الإيقاف على تبديل حالة خيار إعدادات واحد. تقوم أداة التبديل بتنفيذ هذا المكون. الوثائق
Table عنصر واجهة مستخدم يستخدم خوارزمية تخطيط الجدول لأطفاله. الوثائق	TabPageSelector يعرض صفًا من المؤشرات الدائرية الصغيرة، مؤشر واحد لكل علامة تبويب. يتم تمييز مؤشر علامة التبويب المحددة. غالبًا ما تستخدم مع TabBarView. الوثائق	TabController تحديد علامة تبويب الإحداثيات بين TabBar وTabBarView الوثائق
TextField عند لمس حقل نصي يضع المؤشر ويعرض لوحة المفاتيح. تقوم أداة TextField بتنفيذ هذا المكون. الوثائق	TextButton تصميم متعدد لزر نصي. زر مسطح بسيط بدون حدود خارجية الوثائق	Text سلسلة نصية بنمط واحد. الوثائق
Transform القطعة التي تطبق نقلاً قبل رسم طفلها. الوثائق	Tooltip توفر تلميحات الأدوات وتسميات نصية تساعد في شرح وظيفة الزر أو أي إجراء آخر لواجهة المستخدم. قم بلف الزر في عنصر واجهة مستخدم Tooltip لإظهار تسمية عند الضغط على الأداة لفترة طويلة (أو عندما يتخذ المستخدم بعض الإجراءات المناسبة الأخرى). الوثائق	Theme يطبق سمة على عناصر واجهة تعامل فرعية. يصف النسق الألوان والخيارات المطبعية للتطبيق. الوثائق
	Wrap عنصر واجهة مستخدم يعرض عناصره الفرعية في عدة عمليات تشغيل أفقية أو رأسية. الوثائق	WidgetsApp فئة ملائمة تضم عددًا من عناصر واجهة المستخدم المطلوبة عادةً لتطبيق ما. الوثائق

Flutter عبارة عن حزمة SDK من Google لصياغة تجارب مستخدم جميلة وسريعة للجوال والويب وسطح المكتب من قاعدة كود واحدة. يعمل Flutter مع الكود الموجود، ويستخدمه المطورون والمؤسسات في جميع أنحاء العالم، وهو مجاني ومفتوح المصدر.

يغطي مرجع API هذا جميع المكتبات التي تم تصديرها بواسطة Flutter SDK.

المزيد من الوثائق

يستضيف هذا الموقع وثائق واجهة برمجة تطبيقات Flutter. يمكن العثور على وثائق أخرى في المواقع التالية:

flutter.dev (main site)

Installation

Codelabs

Contributing to Flutter

تضمين المكاتب

تضمين المكاتب

المكتبات الموجودة في قسم “المكتبات” أدناه (أو في شريط التنقل الأيمن) هي جزء من إطار عمل Flutter الأساسي ويتم استيرادها باستخدام “package: flutter / <library> .dart” ، مثل:

import ‘package:flutter/material.dart’;

import ‘package:flutter/services.dart’;

مكتبات Dart

توجد المكتبات في قسم “Dart” في مساحة الاسم dart: ويتم استيرادها باستخدا “dart: <library>” ، مثل:

import ‘dart:async’;

import ‘dart:ui’;

باستثنا “dart: core” ، يجب عليك استيراد مكتبة Dart قبل أن تتمكن من استخدامها.

دعم المكتبات

تدعم المكتبات في الأقسام الأخرى المكتبات التي تأتي مع Flutter. يتم تنظيمها حسب الحزمة ويتم استيرادها باستخدام ‘package: <package> / <library> .dart’ ، مثل:

import ‘package:flutter_test/flutter_test.dart’;

import ‘package:file/local.dart’;

الحزم على pub.dev

يحتوي Flutter على نظام بيئي غني من الحزم التي ساهم بها فريق Flutter ومجتمع المصادر المفتوحة الأوسع في مستودع مركزي. من بين آلاف الحزم، ستجد دعمًا لـ Firebase و Google Font وخدمات الأجهزة مثل Bluetooth والكاميرا والأدوات الرسومية الجديدة والتكامل مع خدمات الويب الشائعة الأخرى. يمكنك تصفح هذه الحزم على pub.dev.

المكاتب

animation:

Flutter نظام الرسوم المتحركة. […]

cupertino:

أدوات Flutter التي تطبق لغة تصميم iOS الحالية. […]

foundation:

أساسيات إطار عمل Flutter الأساسية. […]

gestures:

أدوات التعرف على إيماءة Flutter. […]

material:

أدوات Flutter تنفذ تصميم المواد. […]

painting:

مكتبة الرسم Flutter. […]

physics:

محاكاة بسيطة للفيزياء أحادية البعد ، مثل الينابيع والاحتكاك والجاذبية ، لاستخدامها في الرسوم المتحركة لواجهة المستخدم. […]

rendering:

شجرة استدعاء flutter […]

scheduler:

مكتبة الجداول ل flutter […]

semantics:

حزمة دلالات Flutter. […]

services:

تتعرض خدمات المنصة الأساسي لتطبيقات Flutter. […]

widgets:

إطار عمل أدوات Flutter. […]

Dart

dart:ui:

الأنواع المضمنة والأساسيات الأساسية لتطبيق. […]Flutter

Core

dart:async

دعم البرمجة غير المتزامنة، مع فئات مثل Future و. […]Stream

dart:collection

الفئات والمرافق التي تكمل دعم المجموعة في. […] dart: core

dart:convert

أجهزة التشفير وأجهزة فك التشفير للتحويل بين تمثيلات البيانات المختلفة، بما في ذلك JSON و. […]UTF-8

dart:core

الأنواع المضمنة والمجموعات والوظائف الأساسية الأخرى لكل برنامج Dart. […]

dart:developer

تفاعل مع أدوات المطور مثل المصحح والمراقب. […]

dart:math

الثوابت والوظائف الرياضية، بالإضافة إلى مولد الأعداد العشوائية. […]

dart:typed_data

القوائم التي تتعامل بكفاءة مع البيانات ذات الحجم الثابت (على سبيل المثال، الأعداد الصحيحة بدون إشارة 8 بايت) والأنواع الرقمية. […]SIMD

VM

dart:ffi

واجهة الوظائف الخارجية القابلية للتشغيل مع لغة البرمجة […] C

dart:io

الملفات والمقبس و HTTP وغيرها من دعم الإدخال / الإخراج لتطبيقات غير الويب. […]

dart:isolate

البرمجة المتزامنة باستخدام مستقل: العمال المستقلون الذين يشبهون الخيوط ولكن لا يتشاركون الذاكرة، ويتواصلون فقط عبر الرسائل. […]

Web

dart:html

عناصر HTML وموارد أخرى للتطبيقات المستندة إلى الويب والتي تحتاج إلى التفاعل مع المستعرض و DOM (نموذج المستند) […]

dart:js

دعم منخفض المستوى للتفاعل مع. […] JavaScript

dart:js_util

طرق الأداة المساعدة لمعالجة الحزمة: js بشرح كائنات جافا سكريبت المتداخل في الحالات التي يكون فيها الاسم المطلوب استدعاؤه غير معروف في وقت التشغيل. […]

تكامل النظام الأساسي

Android

واجهات برمجة تطبيقات بكامل منصة Flutter لنظام Android.

iOS

واجهات برمجة تطبيقات بكامل منصة Flutter لنظام iOS.

flutter_test

flutter_test

مكتبة اختبار ال flutter، مبنية على قمة. […] package:test

flutter_driver

flutter_driver

يوفر واجهة برمجة تطبيقات لاختبار تطبيقات Flutter التي تعمل على أجهزة ومحاكيات حقيقية. […]

flutter_driver_extension

توفر هذه المكتبة امتدادًا لخدمة Dart VM مطلوبة للاختبارات التي تستخدم الحزمة: flutter_driver لقيادة التطبيقات من عملية منفصلة، على غرار Selenium (الويب)، وEspresso (Android) وUI Automation […](iOS)

flutter_localizations

flutter_localizations

توطين (تعريب) مكتب Flutte

flutter_web_plugins

flutter_web_plugins

قنوات النظام الأساسي وتطبيقات تسجيل المكونات الإضافية لتطبيقات الويب الخاصة بمكونات. […] Flutter

archive

archive

archive_io

async

pkg.async

بسطت الميزات في الخدمات الغير متزامنة لـمكتبة. […] dart:async

boolean_selector

boolean_selector

characters

characters

عمليات السلاسل بناءً على الأحرف )مجموعات Unicode grapheme ).

charcode

charcode

يعرف الأسماء الرمزية لنقاط رمز الأحرف. […]

charcode.ascii.dollar_lowercase

قم بتعريف ثوابت الأعداد الصحيحة لكل حرف ASCII. […]

charcode.htmlentity.dollar_lowercase

ترميز الأحرف على أساس أسماء كيانات الأحرف HTML 4.01. […]

clock

clock

collection

collection

dart.pkg.collection.algorithms

قم باستيراد collection.dart بدلاً من ذلك

dart.pkg.collection.equality

قم باستيراد collection.dart بدلاً من ذلك

dart.pkg.collection.iterable_zip

قم باستيراد collection.dart بدلاً من ذلك

dart.pkg.collection.priority_queue

قم باستيراد collection.dart بدلاً من ذلك

dart.pkg.collection.wrappers

قم باستيراد collection.dart بدلاً من ذلك

convert

convert

crypto

crypto

fake_async

fake_async

file

chroot

file

local

memory

integration_test

_callback_io

_callback_web

_extension_io

_extension_web

common

integration_test

integration_test_driver

integration_test_driver_extended

intl

date_symbol_data_custom

date_symbol_data_file

يجب استيراد هذا الملف مع date_format.dart لقراءة البيانات المحلية من الملفات في نظام الملفات.

date_symbol_data_http_request

يجب استيراد هذا الملف، جنبًا إلى جنب مع date_format.dart لقراءة البيانات المحلية عبر طلبات http إلى خادم ويب ..

date_symbol_data_local

رموز تنسيق التاريخ / الوقت لجميع اللغات. […]

date_symbols

date_time_patterns

رموز تنسيق التاريخ / الوقت لمجموعة فرعية كبيرة من اللغات. […]

intl

توفر هذه المكتبة التدويل والتعريب. يتضمن ذلك تنسيق الرسائل والاستبدالات ، وتنسيق التاريخ والأرقام وتحليلها ، والأدوات المساعدة للعمل مع النص ثنائي الاتجاه. […]

intl_standalone

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

locale

message_format

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

message_lookup_by_library

تنسيق مكتبة Message/plural مع دعم اللغة. يمكن أن يكون لهذا تطبيقات مختلفة بناءً على آلية البحث عن الإصدارات المترجمة من الرسائل. يتوقع هذا الإصدار أن يكونوا في مكتبة تسمى على سبيل المثال “messages_ar_US”. يتم تعيين البادئة في استدعاء “initializeMessages” ، والذي يجب إجراؤه للإعدادات المحلية قبل إجراء أي عمليات بحث. […]

number_symbol_data

رموز تنسيق التاريخ / الوقت لجميع اللغات. […]

number_symbols

matcher

matcher

meta

meta

التعليقات التوضيحية التي يمكن للمطورين استخدامها للتعبير عن النوايا التي لا يمكن استنتاجها من خلال التحليل الثابت لشفرة المصدر. […]

meta_dart2js

الثوابت للاستخدام في التعليقات التوضيحية للبيانات الوصفية لتقديم تلميحات إلى. […] dart2js

meta_meta

التعليقات التوضيحية التي تصف الاستخدام المقصود للتعليقات التوضيحية الأخرى.

path

path

platform

platform

process

process

source_span

source_span

stack_trace

stack_trace

stream_channel

isolate_channel

stream_channel

string_scanner

string_scanner

sync_http

sync.http

term_glyph

term_glyph

test_api

test_api

test_api.backend

test_api.fake

typed_data

typed_data

المرافق والوظائف المتعلقة بمكتبة “dart: typed_data”.

typed_data.typed_buffers

قوائم بيانات مطبوعة قابلة للتزايد. […]

vector_math

hash

vector_math

مكتبة تحتوي على أنواع مختلفة من عمليات المتجهات لاستخدامها في الألعاب أو المحاكاة أو التقديم. […]

vector_math_64

مكتبة تحتوي على أنواع مختلفة من عمليات المتجهات لاستخدامها في الألعاب أو المحاكاة أو التقديم. […]

vector_math_geometry

مكتبة تحتوي على مولدات هندسية (مثل CubeGenerator و SphereGenerato و CylinderGenerator) ومرشحات (BarycentricFilter و ColorFilter و InvertFilter).

vector_math_lists

مكتبة للعمل مع قوائم من النواقل في الذاكرة بطريقة فعالة.

vector_math_operations

مكتبة تحتوي على عمليات مصفوفة (Matrix44Operations) يمكن إجراؤها على مثيلات Float32List وعمليات SIMD المحسّنة (Matrix44SIMDOperations) التي يمكن إجراؤها على مثيلات Float32x4List

vm_service

utils

vm_service

vm_service_io

webdriver

webdriver.core

webdriver.core

webdriver.html

webdriver.io

webdriver.io

webdriver.support.async

webdriver.support.firefox_profile

webdriver.support.forwarder

webdriver.support.stdio_stepper

webdriver.sync_core

webdriver.sync_io

محتويات

أوامر flutter

أداة سطر أوامر flutter هي كيفية تفاعل المطورين) أو IDEs نيابة عن المطورين (مع. Flutter

إليك كيفية استخدام أداة flutter لإنشاء تطبيق وتحليله واختباره وتشغيله:

لتشغيل أوامر pub باستخدام أداة flutter:

لعرض جميع الأوامر التي يدعمها flutter:

للحصول على الإصدار الحالي من Flutter SDK ، بما في ذلك الإطار والمحرك والأدوات:

أوامر flutter

يوضح الجدول التالي الأوامر التي يمكنك استخدامها مع أداة flutter:

للحصول على تعليمات إضافية حول أي من الأوامر ، أدخل flutter help <command> أو اتبع الروابط الموجودة في عمود مزيد من المعلومات. يمكنك أيضًا الحصول على تفاصيل حول أوامر pub – على سبيل المثال ، flutter help pub outdated