تثبيت Flutter SDK وإعداد بيئة التطوير

مقدمة لتثبيت Flutter

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

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

لدى Flutter متطلبات محددة حسب نظام التشغيل الخاص بك. دعنا نراجع ما تحتاجه لكل منصة قبل تنزيل SDK.

متطلبات Windows

• نظام التشغيل: Windows 10 أو أحدث (64 بت)، معالج x86-64
• مساحة القرص: 2.5 جيجابايت على الأقل (لا تشمل مساحة IDE أو الأدوات الأخرى)
• الأدوات: Windows PowerShell 5.0 أو أحدث، Git for Windows 2.x
• اختياري: Android Studio لتطوير Android، Visual Studio لتطوير سطح مكتب Windows

متطلبات macOS

• نظام التشغيل: macOS 10.15 (Catalina) أو أحدث
• مساحة القرص: 2.8 جيجابايت على الأقل (لا تشمل مساحة IDE أو الأدوات الأخرى)
• الأدوات: Xcode (لتطوير iOS)، CocoaPods، Git
• المعمارية: يدعم Intel و Apple Silicon (M1/M2/M3) بشكل أصلي

متطلبات Linux

• نظام التشغيل: أي توزيعة Linux 64 بت
• مساحة القرص: 1.6 جيجابايت على الأقل (لا تشمل مساحة IDE أو الأدوات الأخرى)
• الأدوات: bash، curl، file، git 2.x، mkdir، rm، unzip، which، xz-utils، zip
• المكتبات المشتركة: libGLU.so.1 (متوفرة في حزم mesa)

تنزيل Flutter SDK

يمكن تنزيل Flutter SDK من موقع Flutter الرسمي أو استنساخه مباشرة من مستودع GitHub. سنغطي كلا الطريقتين.

الطريقة 1: التنزيل من الموقع الرسمي

قم بزيارة https://docs.flutter.dev/get-started/install واختر نظام التشغيل الخاص بك. قم بتنزيل أحدث إصدار مستقر.

# 1. قم بتنزيل ملف Flutter SDK المضغوط من flutter.dev
# 2. استخرج الملف المضغوط إلى الموقع المطلوب، مثال:
#    C:\src\flutter
# مهم: لا تقم بتثبيت Flutter في مجلد يتطلب
# صلاحيات مرتفعة (مثل C:\Program Files\)

# 3. تحقق من الاستخراج
dir C:\src\flutter\bin

# 1. قم بتنزيل أرشيف Flutter SDK من flutter.dev
# 2. استخرج إلى الموقع المطلوب
cd ~/development
unzip ~/Downloads/flutter_macos_3.x.x-stable.zip

# تحقق من الاستخراج
ls ~/development/flutter/bin

# 1. قم بتنزيل أرشيف Flutter SDK من flutter.dev
# 2. استخرج إلى الموقع المطلوب
cd ~/development
tar xf ~/Downloads/flutter_linux_3.x.x-stable.tar.xz

# تحقق من الاستخراج
ls ~/development/flutter/bin

الطريقة 2: الاستنساخ من GitHub

يمكنك أيضاً استنساخ Flutter SDK مباشرة من مستودع GitHub الرسمي. هذه الطريقة تسهل التبديل بين القنوات (stable، beta، master).

# استنساخ القناة المستقرة
git clone https://github.com/flutter/flutter.git -b stable

# أو استنساخ إصدار محدد
git clone https://github.com/flutter/flutter.git -b 3.19.0

# تحقق من الاستنساخ
cd flutter
git branch

تكوين متغير PATH

بعد تنزيل أو استنساخ Flutter SDK، يجب إضافة مجلد flutter/bin إلى متغير بيئة PATH في نظامك. هذا يسمح لك بتشغيل أوامر Flutter من أي نافذة طرفية.

تكوين PATH على Windows

# الخيار 1: باستخدام PowerShell (مؤقت، للجلسة الحالية فقط)
\$env:PATH += ";C:\src\flutter\bin"

# الخيار 2: دائم - عبر خصائص النظام
# 1. افتح قائمة ابدأ، ابحث عن "Environment Variables"
# 2. انقر على "Edit the system environment variables"
# 3. انقر على زر "Environment Variables"
# 4. تحت "User variables"، حدد "Path" وانقر "Edit"
# 5. انقر "New" وأضف: C:\src\flutter\bin
# 6. انقر OK على جميع مربعات الحوار
# 7. أعد تشغيل أي نوافذ طرفية مفتوحة

# تحقق من إعداد PATH بشكل صحيح
where flutter

تكوين PATH على macOS

# لـ Zsh (الافتراضي على macOS Catalina وما بعده)
echo 'export PATH="\$HOME/development/flutter/bin:\$PATH"' >> ~/.zshrc
source ~/.zshrc

# لـ Bash
echo 'export PATH="\$HOME/development/flutter/bin:\$PATH"' >> ~/.bash_profile
source ~/.bash_profile

# تحقق من إعداد PATH بشكل صحيح
which flutter

تكوين PATH على Linux

# لـ Bash
echo 'export PATH="\$HOME/development/flutter/bin:\$PATH"' >> ~/.bashrc
source ~/.bashrc

# لـ Zsh
echo 'export PATH="\$HOME/development/flutter/bin:\$PATH"' >> ~/.zshrc
source ~/.zshrc

# تحقق من إعداد PATH بشكل صحيح
which flutter
flutter --version

تشغيل flutter doctor

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

# تشغيل الفحص الأساسي
flutter doctor

# مثال على المخرجات:
# Doctor summary (to see all details, run flutter doctor -v):
# [+] Flutter (Channel stable, 3.19.0, on macOS 14.0)
# [+] Android toolchain - develop for Android devices
# [+] Xcode - develop for iOS and macOS
# [+] Chrome - develop for the web
# [+] Android Studio (version 2023.1)
# [+] VS Code (version 1.85.0)
# [+] Connected device (2 available)
# [+] Network resources

# تشغيل doctor مع تفاصيل كاملة
flutter doctor -v

إعداد IDE: Visual Studio Code

VS Code هو محرر خفيف وسريع وقابل للتوسيع بشكل كبير وممتاز لتطوير Flutter. هو الخيار الأكثر شعبية بين مطوري Flutter.

تثبيت إضافات VS Code

# التثبيت عبر لوحة الإضافات (Ctrl+Shift+X / Cmd+Shift+X):

# 1. Flutter (بواسطة Dart Code)
#    - يوفر وظائف خاصة بـ Flutter
#    - إعادة التحميل السريع، مفتش الودجات، محدد الجهاز
#    - معرف الإضافة: Dart-Code.flutter

# 2. Dart (بواسطة Dart Code)
#    - دعم لغة Dart (يُثبت تلقائياً مع Flutter)
#    - إكمال الكود، التحليل، التصحيح
#    - معرف الإضافة: Dart-Code.dart-code

# اختيارية لكن موصى بها:
# 3. Flutter Widget Snippets
# 4. Awesome Flutter Snippets
# 5. Error Lens (عرض الأخطاء في السطر)
# 6. Bracket Pair Colorizer

تكوين VS Code لـ Flutter

{
  "dart.flutterSdkPath": "/path/to/flutter",
  "dart.previewFlutterUiGuides": true,
  "dart.previewFlutterUiGuidesCustomTracking": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "Dart-Code.dart-code",
  "dart.lineLength": 80,
  "[dart]": {
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "editor.rulers": [80],
    "editor.selectionHighlight": false,
    "editor.suggestSelection": "first",
    "editor.tabCompletion": "onlySnippets",
    "editor.wordBasedSuggestions": "off"
  }
}

إعداد IDE: Android Studio

Android Studio هو IDE الرسمي لتطوير Android ويوفر دعماً ممتازاً لـ Flutter من خلال الإضافات. هو أثقل من VS Code لكنه يوفر أدوات Android أكثر تكاملاً.

تثبيت إضافة Flutter لـ Android Studio

# 1. افتح Android Studio
# 2. اذهب إلى File > Settings (Windows/Linux)
#    أو Android Studio > Preferences (macOS)
# 3. انتقل إلى Plugins
# 4. ابحث عن "Flutter" في تبويب Marketplace
# 5. انقر "Install" على إضافة Flutter
#    (هذا يثبت تلقائياً إضافة Dart أيضاً)
# 6. أعد تشغيل Android Studio

# بعد إعادة التشغيل، يجب أن ترى:
# - File > New > New Flutter Project
# - شريط أدوات Flutter مع أزرار إعادة التحميل السريع
# - لوحتي Flutter Inspector و Outline

إعداد محاكي Android

لاختبار تطبيقات Flutter على Android، تحتاج إما جهاز Android فعلي أو محاكي Android. المحاكي يحاكي جهاز Android على حاسوبك.

# 1. افتح Android Studio
# 2. اذهب إلى Tools > Device Manager (أو AVD Manager)
# 3. انقر "Create Virtual Device"
# 4. اختر تعريف جهاز (مثل Pixel 7)
# 5. اختر صورة النظام:
#    - موصى به: أحدث مستوى API مستقر
#    - قم بتنزيل الصورة إذا لم تكن موجودة
# 6. كوّن إعدادات AVD:
#    - الاسم: Pixel_7_API_34
#    - الذاكرة: 2048 ميجابايت أو أكثر
#    - التخزين الداخلي: 2048 ميجابايت أو أكثر
# 7. انقر "Finish"

# تشغيل المحاكي من سطر الأوامر:
flutter emulators
flutter emulators --launch Pixel_7_API_34

# أو التشغيل من Android Studio Device Manager
# بالنقر على زر التشغيل بجانب AVD

تراخيص Android SDK

# قبول جميع تراخيص Android SDK
flutter doctor --android-licenses

# ستتم مطالبتك بقبول عدة تراخيص
# اكتب "y" واضغط Enter لكل واحدة

# تحقق من قبول التراخيص
flutter doctor

إعداد محاكي iOS (macOS فقط)

إذا كنت تطور على macOS، يمكنك استخدام محاكي iOS لاختبار تطبيقات Flutter على أجهزة iPhone و iPad محاكاة.

# 1. ثبّت Xcode من Mac App Store

# 2. كوّن أدوات سطر أوامر Xcode
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

# 3. اقبل ترخيص Xcode
sudo xcodebuild -license accept

# 4. ثبّت CocoaPods (مطلوب لاعتماديات iOS)
sudo gem install cocoapods
# أو باستخدام Homebrew:
brew install cocoapods

# 5. افتح محاكي iOS
open -a Simulator

# 6. اختر جهازاً من قائمة المحاكي:
#    File > Open Simulator > iOS 17.x > iPhone 15 Pro

# تحقق من إعداد iOS
flutter doctor

التحقق من التثبيت

بعد إعداد كل شيء، دعنا نتحقق من أن تثبيت Flutter مكتمل ويعمل بشكل صحيح عن طريق إنشاء وتشغيل مشروع اختباري.

# الخطوة 1: تحقق من إصدار Flutter
flutter --version
# Flutter 3.19.0 . channel stable . https://github.com/flutter/flutter.git
# Framework . revision a363t23 . 2024-01-30
# Engine . revision 234jk3a
# Tools . Dart 3.3.0 . DevTools 2.31.0

# الخطوة 2: تشغيل flutter doctor مع مخرجات مفصلة
flutter doctor -v

# الخطوة 3: عرض الأجهزة المتاحة
flutter devices

# الخطوة 4: إنشاء مشروع اختباري
flutter create my_test_app
cd my_test_app

# الخطوة 5: تشغيل التطبيق الاختباري
flutter run

# إذا تم إعداد كل شيء بشكل صحيح، يجب أن ترى
# تطبيق Flutter التجريبي يعمل على المحاكي!

قنوات Flutter

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

# عرض جميع القنوات المتاحة
flutter channel

# التبديل إلى القناة المستقرة (موصى بها للإنتاج)
flutter channel stable

# التبديل إلى قناة beta (معاينة الميزات القادمة)
flutter channel beta

# التبديل إلى قناة master (أحدث إصدار، قد يكون غير مستقر)
flutter channel master

# بعد تبديل القنوات، قم بترقية Flutter
flutter upgrade

# الرجوع إلى إصدار سابق
flutter downgrade

استكشاف مشكلات الإعداد الشائعة وإصلاحها

إليك أكثر المشكلات شيوعاً التي قد تواجهها أثناء الإعداد وكيفية حلها.

المشكلة 1: أمر flutter غير موجود

# تحقق من أن Flutter في الموقع الصحيح
# macOS/Linux:
ls ~/development/flutter/bin/flutter

# تحقق من PATH الخاص بك
echo \$PATH

# إذا لم يكن flutter في PATH، أضفه مرة أخرى:
export PATH="\$HOME/development/flutter/bin:\$PATH"

# اجعله دائماً بإضافته إلى ملف تكوين الصدفة
# ثم أعد تشغيل الطرفية

المشكلة 2: Android SDK غير موجود

# حدد مسار Android SDK بشكل صريح
flutter config --android-sdk /path/to/android/sdk

# مواقع SDK الشائعة:
# Windows: C:\Users\<user>\AppData\Local\Android\Sdk
# macOS:   ~/Library/Android/sdk
# Linux:   ~/Android/Sdk

# تحقق من التكوين
flutter config
flutter doctor

المشكلة 3: مشكلات Xcode على macOS

# تأكد من تثبيت أدوات سطر أوامر Xcode
xcode-select --install

# التبديل إلى Xcode الكامل (وليس أدوات سطر الأوامر فقط)
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

# إذا حدثت مشكلات CocoaPods:
sudo gem install cocoapods
pod setup

# مسح ذاكرة التخزين المؤقت لـ CocoaPods إذا لزم الأمر
pod cache clean --all

المشكلة 4: مشكلات تراخيص Android

# قبول جميع التراخيص
flutter doctor --android-licenses

# إذا فشل ذلك، جرب استخدام sdkmanager مباشرة:
# Windows:
C:\Users\<user>\AppData\Local\Android\Sdk\cmdline-tools\latest\bin\sdkmanager --licenses

# macOS/Linux:
~/Library/Android/sdk/cmdline-tools/latest/bin/sdkmanager --licenses

الملخص

في هذا الدرس، تعلمت كيفية إعداد بيئة تطوير Flutter كاملة. أنت الآن تعرف كيفية تنزيل وتثبيت Flutter SDK، وتكوين PATH في نظامك، وإعداد VS Code و Android Studio بالإضافات والملحقات المناسبة، وإنشاء وتشغيل المحاكيات لكل من Android و iOS، والتحقق من التثبيت باستخدام flutter doctor، واستكشاف أكثر مشكلات الإعداد شيوعاً وإصلاحها. مع جاهزية بيئتك، أنت مستعد لبدء بناء تطبيقات Flutter.