إعداد بيئة التطوير — أساسيات Flutter

إعداد بيئة Flutter

1. تثبيت Flutter SDK

Windows:

# حمل Flutter SDK من flutter.dev
# استخرجه في C:\flutter

# أضف للـ PATH
setx PATH "%PATH%;C:\flutter\bin"

# تحقق من التثبيت
flutter doctor

macOS:

# باستخدام Homebrew
brew install flutter

# أو حمل يدوياً وأضف للـ PATH
export PATH="$PATH:/path/to/flutter/bin"

2. تثبيت VS Code Extensions

1. Flutter - الإضافة الرئيسية

2. Dart - دعم لغة Dart

3. إنشاء مشروع جديد

# إنشاء مشروع
flutter create my_app

# الدخول للمجلد
cd my_app

# تشغيل التطبيق
flutter run

4. هيكل المشروع

my_app/
├── lib/
│   └── main.dart        # نقطة البداية
├── android/             # ملفات Android
├── ios/                 # ملفات iOS
├── web/                 # ملفات الويب
├── test/                # الاختبارات
├── pubspec.yaml         # الحزم والإعدادات
└── README.md

5. ملف pubspec.yaml

name: my_app
description: تطبيقي الأول

environment:
  sdk: '>=3.0.0 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0              # طلبات HTTP
  provider: ^6.0.5          # إدارة الحالة
  shared_preferences: ^2.2.0 # التخزين المحلي

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true
  
  assets:
    - assets/images/
    
  fonts:
    - family: Cairo
      fonts:
        - asset: fonts/Cairo-Regular.ttf
        - asset: fonts/Cairo-Bold.ttf
          weight: 700

6. أوامر مهمة

flutter doctor         # فحص البيئة
flutter run            # تشغيل التطبيق
flutter run -d chrome  # تشغيل على الويب
flutter pub get        # تحميل الحزم
flutter pub add http   # إضافة حزمة
flutter clean          # مسح الكاش
flutter build apk      # بناء APK
flutter build ios      # بناء iOS

7. Hot Reload vs Hot Restart

- Hot Reload (r): يحفظ الحالة ويُحدث الواجهة

- Hot Restart (R): يعيد تشغيل التطبيق من البداية