إعداد بيئة العمل لتطبيقات الموبايل: تثبيت Flutter و Android Studio

إعداد بيئة العمل لتطبيقات الموبايل: تثبيت Flutter و Android Studio

إعداد بيئة العمل لتطبيقات الموبايل: تثبيت Flutter و Android Studio

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

سنقوم بتثبيت Flutter SDK و Android Studio، وهي الأدوات الأساسية التي ستمكننا من بناء تطبيقات جميلة وعالية الأداء لمنصتي Android و iOS.

الخطوة 1: تثبيت Flutter SDK

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

أولاً، قم بتنزيل Flutter SDK المناسب لنظام التشغيل الخاص بك (Windows، macOS، Linux) من الموقع الرسمي لـ Flutter. بعد التنزيل، قم بفك ضغط الملف في مسار سهل الوصول إليه (مثل C:\src\flutter على Windows أو ~/development/flutter على macOS/Linux).

بعد فك الضغط، يجب إضافة مسار مجلد bin الخاص بـ Flutter إلى متغيرات البيئة (PATH) لكي تتمكن من تشغيل أوامر Flutter من أي مكان في سطر الأوامر. إليك كيفية التحقق من التثبيت: 

flutter doctor

سيقوم الأمر flutter doctor بفحص بيئة عملك والإبلاغ عن أي مكونات مفقودة أو مشاكل تحتاج إلى حل. يجب أن ترى تقريراً مشابهاً لما يلي، مع بعض علامات (X) التي سنقوم بحلها في الخطوات التالية:

[✓] Flutter (Channel stable, 3.x.x, on macOS/Windows/Linux)
[X] Android toolchain - develop for Android devices
    ✗ Android SDK not found.
[X] Android Studio (not installed)
    ✗ Android Studio not found.
[✓] VS Code (version 1.x.x)
[!] Connected device
    ! No devices available

الخطوة 2: تثبيت وتهيئة Android Studio

ملاحظة تقنية: Android Studio هو بيئة التطوير المتكاملة (IDE) الرسمية لتطوير تطبيقات Android. سيوفر لنا محاكي Android وأدوات بناء Android (Android SDK Build-Tools) التي يحتاجها Flutter.

توجه إلى الموقع الرسمي لـ Android Studio وقم بتنزيل المثبت. اتبع التعليمات لتثبيته. بعد التثبيت، قم بفتحه لأول مرة. قد يطلب منك تنزيل مكونات SDK إضافية؛ وافق على ذلك.

بعد فتح Android Studio، اتبع الخطوات التالية:

  1. انتقل إلى File > Settings (أو Android Studio > Preferences على macOS).
  2. في قائمة البحث، ابحث عن Plugins.
  3. في علامة التبويب Marketplace، ابحث عن Flutter و Dart.
  4. قم بتثبيت كلا المكونين الإضافيين (Plugins). سيطلب منك إعادة تشغيل Android Studio بعد التثبيت.

بعد تثبيت المكونات الإضافية وإعادة تشغيل Android Studio، أعد تشغيل flutter doctor:

flutter doctor

يجب أن تلاحظ أن معظم علامات (X) الخاصة بـ Android Studio و Android toolchain قد تحولت إلى (✓). إذا واجهت مشاكل، قد تحتاج إلى قبول تراخيص Android SDK يدوياً باستخدام الأمر التالي:

flutter doctor --android-licenses

الخطوة 3: إنشاء وتشغيل أول تطبيق Flutter

ملاحظة تقنية: بعد إعداد بيئة العمل، يمكننا الآن البدء في إنشاء تطبيقاتنا. سيوفر لنا Flutter أداة سطر أوامر سهلة لإنشاء مشروع جديد وهيكلته تلقائياً.

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

# انتقل إلى المجلد الذي تريد إنشاء مشروعك فيه
cd ~/development

# أنشئ مشروع Flutter جديد باسم my_first_app
flutter create my_first_app

# انتقل إلى مجلد المشروع
cd my_first_app

# قم بتشغيل التطبيق على محاكي أو جهاز متصل (تأكد من وجود محاكي يعمل أو جهاز متصل)
flutter run

سيقوم الأمر flutter run ببناء التطبيق وتشغيله على أول جهاز متاح (محاكي Android، محاكي iOS، أو جهاز فعلي متصل). قد يستغرق الأمر بعض الوقت في المرة الأولى.

الكود النهائي الكامل (تطبيق Hello World بسيط)

هذا هو الكود الافتراضي الذي يتم إنشاؤه بواسطة flutter create. إنه تطبيق عداد بسيط. يمكنك استبداله بهذا الكود لإنشاء تطبيق 'Hello World' أبسط في ملف lib/main.dart:

import 'package:flutter/material.dart'; // استيراد حزمة Flutter لتصميم الواجهات الرسومية

void main() {
  runApp(const MyApp()); // تشغيل التطبيق، ويأخذ عنصر واجهة المستخدم الجذر (root widget)
}

class MyApp extends StatelessWidget { // تعريف عنصر واجهة المستخدم الرئيسي (StatelessWidget لأنه لا يتغير)
  const MyApp({super.key}); // منشئ الفئة، يقبل مفتاح اختياري

  @override
  Widget build(BuildContext context) { // دالة build لإنشاء واجهة المستخدم
    return MaterialApp( // عنصر MaterialApp يوفر تصميم Material Design
      title: 'مرحباً Flutter!', // عنوان التطبيق الذي يظهر في مدير المهام
      home: Scaffold( // عنصر Scaffold يوفر هيكلاً أساسياً للتطبيق (شريط علوي، جسم، إلخ.)
        appBar: AppBar( // شريط التطبيق العلوي
          title: const Text('أول تطبيق Flutter لي'), // عنوان يظهر في شريط التطبيق
          backgroundColor: Colors.blueAccent, // لون خلفية شريط التطبيق
        ),
        body: const Center( // جسم التطبيق، هنا نضع المحتوى في المنتصف
          child: Text( // عنصر Text لعرض نص
            'أهلاً بك في عالم Flutter!', // النص المراد عرضه
            style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold), // تنسيق النص
          ),
        ),
      ),
    );
  }
}

النتيجة المتوقعة

بعد تشغيل الكود أعلاه، سترى تطبيقاً بسيطاً يظهر على محاكي Android أو iOS، أو على جهازك الفعلي المتصل. سيحتوي التطبيق على شريط علوي أزرق اللون يحمل العنوان "أول تطبيق Flutter لي"، وفي منتصف الشاشة سيظهر النص "أهلاً بك في عالم Flutter!" بخط كبير وواضح.

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