لتتمكن من إعداد جهاز ال Mac للتطوير بـ Flutter وتطبيق هذا الدرس يجب عليك أولاً ان تقوم بتطبيق الخطوات الواردة في درس ” إعداد جهاز ال Mac للتطوير والبرمجة “.
الخطوة الأولى: تنصيب dart
لتنصيب dart يمكن اضافة الأوامر التالية الى Terminal
brew tap dart-lang/dart
brew install dart
لمعرفة اصدار dart المنصب بجهاز ال Mac، يمكنك اضافة الأمر التالي الى Terminal
brew info dart
لتنصيب أحدث اصدار من dart بجهاز ال Mac، يمكنك اضافة الأمر التالي الى Terminal
brew upgrade dart
للتبديل الى اصدار آخر من dart، يمكنك اضافة الأمر التالي الى Terminal
brew switch dart 2.10.1
الخطوة الثانية: تشغيل Android Studio واعداده وتنصيب Android SDK و JDK
عند تشغيل Android Studio لأول مرة، فإنة النافذة التالية ستظهر، فاختر Do not import settings واضغط على OK
ستطلب منك قوقل ان تسمح له بجمع بعض البيانات اثناء استخدامك ل Android Studio ولك الحق بالرفض بالضغط على Don’t send او السماح لها بالضغط على الزر الآخر
ستظهر هذه الشاشة الخاصة بالاعداد المبسط ل Android Studio ، قم بالضغط على Next
في هذه الخطوة قم باختيار Custom لتكون عملية الاعداد بشكل اكثر مرونة ، واضغط مباشرة على Next
ستظهر الشاشة التالية والخاصة باختيار مسار المجلد الذي تريد ان تحمل وتنصب بداخله Java Development Kit (JDK) ، يفضل أن تتركه بدون تغيير وتضغط على Next
في هذه الخطوة اختر الثيم الذي يناسبك سواء كان داكنا او فاتحا واضغط على Next
في هذه الخطوة سنحمل Android SDK ، ويمكن تغيير أو اختيار مسار آخر له بالضغط على ايقونة المجلد اقصى يمين صندوق المسار
عند الضغط على ايقونة المجلد يمكنك اختيار المسار المطلوب، ونحن في هذا الدرس سننشئ مجلد باسم Android بداخل Documents ، وبداخل مجلد Android سننشئ مجلد باسم sdk
بداخل مجلد Anroid سنختار مجلد sdk الذي قمنا بإنشائه، ونضغط على زر Open
سيظهر المسار كما هو موضح بالصورة التالية، الآن يجب الضغط على Next
ستظهر الشاشة التالية، اضغط Next
ستظهر الشاشة التالية، حيث يجب الضغط على Finish للبدء بعملية تحميل ال Android SDK و ال JDK وغيرها من الملفات اللازمة واتمام جميع الاعدادات
ستظهر الشاشة التالية وستبدأ عملية تحميل الملفات، اتركه حتى تنتهي عملية التحميل
أخيرا ستظهر هذه النافذة التي توضح انتهاء عملية التحميل، وما عليك الا الضغط على Finish
الخطوة الثالثة: تنصيب اضافة Flutter Plugin للـ Android Studio
أولا يجب تشغيل تطبيق Android Studio والدخول على Configure->Plugins
ثانيا حدد Marketplace واكتب Flutter في صندوق البحث
ثالثا اختر Flutter من القسم الايسر واضغط Install بالجانب الأيسر وسينبثق صندوق يدعوك الى تنصيب Dart Plugin ، ايضا اضغط على زر Install بداخله
الآن اضغط على Restart IDE لاعادة تشغيل Android Studio وتفعيل الاضافة
الخطوة الرابعة: تحميل وتنصيب Flutter SDK
بعد اعادة تشغيل ال IDE ، اضغط على Create New Flutter Project
اختر Flutter Application واضغط على Next
سيظهر صندوق كتابة مسار مجلد Flutter SDK فارغا، حيث يمكنك تنصيب ال Flutter في المسار الذي تريد بالضغط على Install SDK
بعد ضغطك على Install SDK ستظهر النافذة التالية، اختر Documents ومن ثم اضغط على Open
ستظهر لك نافذة تكوين المشروع بالشكل التالي الى ان يكتمل تحميل Flutter
بعد اكمال تحميل ال Flutter سيتفعل زر Next وستتمكن من الضغط عليه، فإذا كنت تتريد البدء ببرمجة تطبيقك الجديد فاضغط على Next ومن ثم على Finish في الخطوة التي تليها.
اضغط Finish للبدء ببرمجة تطبيقك
ستنبثق النافذة التالية التي تطلب كلمة المرور لحساب الادمن بجهازك، فضع كلمة المرور واضغط Install Software
الخطوة الخامسة: تنصيب اضافة Flutter Plugin للـ Visual Studio Code
بعد تشغيل Visual Studio Code اضغط على زر Extensions ورمزه هو مربع مقسم لاربع مربعات متساوية واحداها مفصول عن المربع الام، ويمكن ملاحظته بوضوح في صورة الشاشة التالية
او يمكنك الدخول الى ال Extensions من خلال القائمة الرئيسية Code => Preferences => Extensions
ابحث عن Flutter بكتابة الكلمة في صندوق البحث ومن ثم اضغط على النتيجة Flutter واخيرا اضغط على زر Install الذي سيظهر لتنصيب Flutter بالجانب الايمن من النافذة
سيكون شكل الجانب الايمن من الشاشة كالتالي عند اتمام تنصيب اضافة Flutter
الخطوة السادسة: تنفيذ إعدادات Flutter الرئيسية
الآن شغل ال Terminal واكتب الأمر التالي، لتحرير ملف .bash_profile أو ملف .zshrc أو .zprofile إذا كان zsh هو ال shell الافتراضي
nano ~/.bash_profileأو ( إذا كان zsh هو ال shell الافتراضي )
nano ~/.zshrcأو
nano ~/.zprofileاكتب الكود التالي بداخل الملف، وايضا قم بتشغيل ال finder واذهب الى مسار مجلد ال flutter وادخله
export PATH="$PATH:
اسحب مجلد bin الى ال Terminal الى قرب آخر احرف تمت كتابته بالكود بالخطوة السابقة، والتأكد من أن مؤشر الكتابة موجود بعد آخر حرف أو رمز تمت كتابته بكود الخطوة السابقة.
الآن أغلق جملة النص البرمجي بعلامة التنصيص ( ” ) ومن ثم احفظ الملف واخرج باستخدام الكيبورد بالضغط على Ctrl و x
اضغط على Ctrl و y من خلال الكيبورد لحفظ الملف واغلاق المحرر
اضغط Enter لتتم عمليتي الحفظ والخروج
الآن أضف الأوامر التالية الى ال Terminal من اجل اعتماد النسخة المستقرة من flutter
flutter channel stable
flutter upgrade --forceبعد انتهاء تغيير ال flutter للنسخة المستقرة، أضف الأمر التالي الى Terminal ولكن لا تضغط على Return او Enter ، حيث اننا في هذه الخطوة سنحدد مسار Android SDK ليتعرف عليه Flutter
flutter config --android-sdk ادخل من ال finder الى مسار مجلد Android SDK واسحب المجلد الى ال Terminal كما فعلناها بالخطوات السابقة لمسار Flutter
سيظهر المسار بنفس هذه الطريقة، اضغط Enter او Return واعد تشغيل ال Terminal
الآن أضف هذا الأمر الى Terminal واضغط على على Enter او Return ( ٤٫١ هو اصدار Android Studio ويجب تغييره للاصدار المنصب لديك )
ln -s ~/Library/Application\ Support/Google/AndroidStudio4.1/plugins ~/Library/Application\ Support/AndroidStudio4.1في هذه الخطوة ستوافق على اتفاقيات تراخيص الأندرويد Android باضافة الأمر التالي والضغط على Enter او Return
flutter doctor --android-licensesسيظهر السؤال التالي، اكتب y واضغط Enter او Return
في جميع الاتفاقيات التي ستظهر اكتب y واضغط Enter او Return
الخطوة السابعة: فحص اذا ما تمت جميع الخطوات بشكل صحيح، وان flutter يعمل بشكل جيد
لاتمام هذه الخطوة يجب ادخال الأمر التالي الى Terminal
flutter doctorاذا ظهرت النتيجة كالتي في الصورة التالية، فإنك أتممت كل الخطوات بشكل صحيح، ولكن كما هو واضح فإن هناك تنبيه لمشكلة واحدة وهي عدم وجود اي اجهزة متصلة، فعندما تريد معالجة اي تطبيق لاصدار الملفات النهائية وتجربتها، يجب عليك ان تشغل جهاز أندرويد أو آيفون افتراضيين بجهاز الماك لديك حسب النظام المستهدف، وهذا ما سنتعلمه في السطور التالية.
كيف يمكنني تشغيل جهاز أندرويد افتراضي؟
شغل Android Studio واذهب الى Configure واضغط على AVD Manager
يمكنك تشغيل جهاز الاندرويد الافتراضي المنشأ مسبقا بالضغط على ايقونة التشغيل الخضراء والتي تشبه ازرار تشغيل مقاطع الفيديو في المشغلات المختلفة
سيشتغل جهاز الأندرويد الافتراضي بالشكل الموضح بالصورة التالية
يمكنك أيضا انشاء جهاز آخر بمواصفات مختلفة حسب حاجتك بدلا من تشغيل الجهاز المعد مسبقا بالضغط على Create Virtual Device
بعد الضغط على Create Virtual Device ستظهر النافذة التالية، حيث يمكنك اختيار فئة الجهاز ومن ثم اختيار الجهاز المطلوب والضغط على Next
اختر اصدار Android الذي تحتاجه في مشروعك واضغط على Next
يمكنك التعديل على اسم الجهاز في هذه الخطوة حسب رغبتك، ومن ثم يجب عليك الضغط على Finish لاتمام انشاء الجهاز الافتراضي
يمكنك الآن تشغيل الجهاز الافتراضي الجديد بنفس الخطوة التي اتبعناها في السطور السابقة بالضغط على ايقونة التشغيل الشبيهة بايقونة تشغيل الفيديو او الصوت في المشغلات المختلفة
عندما تنشئ مشروعا جديدا او تفتح احد المشاريع باستخدام Android Studio، وتريد أن تشغل جهازا افتراضيا من خلال AVD Manager فيجب عليك الضغط على ايقونة رمز الموبايل التي تحوي ايضا شعار اندرويد صغير فوق الجزء السفلي الايمن من رمز الموبايل
كيف يمكنني تشغيل جهاز آيفون افتراضي من خلال Android Studio؟
بكل بساطة اضغط على خانة اختيار الجهاز لبناء التطبيق وتشغيله بداخله، وعادة يكون الاختيار الظاهر No Devices والسبب عدم وجود جهاز افتراضي يعمل في الوقت الحالي ، وسيظهر لك خيار … حيث يجب عليك ان تضغط عليه