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

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

ما هي منصة Flutter

Flutter هو إطار عمل لتطوير التطبيقات الأصيلة لنظامي IOS و Android بالإضافة إلى تطبيقات الويب وسطح المكتب. تم تطويرها من قبل شركة Google وهي تركز بشكل كبير على تجربة المستخدم والمطور في نفس الوقت من خلال أدوات مكتوبة بلغة Dart مخصصة لرسم وتصيير الواجهات والمكونات بجودة عالية وبأداء كبير جداً.

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

محرك فلتر Flutter Engine

يوفر محرك Flutter المكتوب بشكل أساسي بلغة C ++ إمكانية تصيير Rendering منخفض المستوى Low level باستخدام مكتبة رسومات Skia من Google. يحقق محرك Flutter المكتبات الأساسية لـ Flutter بما في ذلك الرسوم المتحركة Animation والرسومات، وعمليات I/O للملفات والشبكات، ودعم إمكانية الوصول، ووقت تشغيل Dart runtime وسلسلة أدوات الترجمة Compiling.

لغة دارت Dart

دارت هي لغة برمجة مفتوحة المصدر تستخدم للأغراض العامة. تم تطويرها في الأصل بواسطة Google وتمت الموافقة عليها لاحقًا كمعيار من قبل ECMA. وهي مخصصة للخوادم وتطوير تطبيقات الويب وتطبيقات الاندرويد وiOS. وتأتي الحزمة التطويرية الخاصة بها Dart SDK مع مترجمها. Dart VM تشتمل حزمة SDK أيضًا على أداة مساعدة  dart2js، وهي أداة تحويل تعمل على تحويل شيفرات Dart إلى مكافئ لها بلغة java script.  ما يميز اللغة هو إمكانية كتابة برنامج ونشره على أجهزة أندرويد وآيفون دون إعادة كتابة التطبيق بلغة أخرى. دارت هي لغة كائنية التوجه OOP يتم بناء الجمل الخاصة بها على غرار سياق لغة C والتي يمكن تحويلها بشكل اختياري إلى JavaScript.  وهي تدعم مجموعة متنوعة من أدوات البرمجة مثل الواجهات interfaces والصفوف classes والمجموعات collections  وغيرها.

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

خطوات إعداد بيئة العمل

• تنزيل برنامج Android Studio
• نحتاج إلى تنزيل Git.
• تثبيت Flutter.

تثبيت Flutter

1- نقوم بإنشاء مجلد باسم flutter على قرص صلب ما وليكن القرص C مثلاً.

2- ندخل إلى المجلد ونضغط بالزر الأيمن ونختار Git bash here كما في الشكل

3- نقوم بتنفيذ الأمر

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

سيتم تنزيل الملفات والمجلدات الخاصة بمنصة Flutter من المستودع الرسمي لها على موقع GitHub.

4- نقوم بإضافة المسارات التالية إلى paths في متغيرات البيئة الخاصة بالنظام.

C:\flutter\bin
C:\flutter\bin\cache\dart-sdk\bin

5- بعد الانتهاء مما سبق نتحقق من صحة العمل من خلال تنفيذ الأمر flutter doctor في CMD لنحصل على نتيجة مشابهة لما يلي

ربط منصة Flutter من برنامج أندرويد ستوديو

نفتح برنامج Android Studio وننتقل إلى الإضافات plugins ومن ثم نقوم بتثبيت Flutter plugin

بعد إعادة تشغيل البرنامج أصبح بإمكاننا إنشاء مشروع باستخدام Flutter

مشاكل وحلول:

المشكلة: عند تنفيذ الأمر flutter doctor قد تظهر رسالة خطأ تحوي الخطأ التالي

[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    X Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

الحل: يجب التأكد من تشغيل برنامج VPN ومن ثم تنفيذ الأمر

 flutter doctor --android-licenses 

المشكلة: قد تظهر الرسالة التالية

[!] Android Studio (version 3.2)
   X Flutter plugin not installed; this adds Flutter specific functionality.
   X Dart plugin not installed; this adds Dart specific functionality.

 الحل: تحقق من تثبيت Flutter plugin في برنامج الأندرويد ستوديو.

المشكلة: قد تظهر الرسالة التالية

[!] Connected devices
    ! No devices available

 الحل: تحقق من تشغيل محاكي الأندرويد أو قم بتوصيل جهاز موبايل إلى جهاز الكمبيوتر.

المشكلة:

[-] Android toolchain - develop for Android devices
   • Android SDK at D:\Android\sdk
   ✗ Android SDK is missing command line tools

الحل: تحقق من أنك قمت بإضافة المسارين

 D:\{your android sdk folder}\platform-tools 
{D:\{your android sdk folder 

إلى المسار path في متغيرات البيئة للنظام. أو باستخدام الأمر

flutter config --android-sdk <path-to-your-android-sdk-path>

إذا كان المسار مضاف بشكل صحيح تحقق من تثبيت حزمة تطوير Android SDK بشكل صحيح

خاتمة

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

م. الحسن ابو عبيد