مقدمة في Flutter وتثبيته

الدرس 1 من 33 · Flutter

هل فكرت يوماً كيف تُصنع التطبيقات التي تستخدمها على هاتفك؟ في الماضي كان عليك أن تتعلم لغتين مختلفتين: واحدة لأندرويد وأخرى لـ iPhone. مع Flutter تكتب الكود مرة واحدة ويعمل على الاثنين. في هذا الدرس ستتعرف على Flutter وفكرته الأساسية، وتثبّته على جهازك، وتلقي نظرة على أول تطبيق.

ما هو Flutter؟

Flutter إطار عمل (Framework) مجاني ومفتوح المصدر من Google، لبناء تطبيقات جميلة وسريعة. صدرت نسخته المستقرة الأولى عام 2018، وأصبح اليوم من أشهر أدوات بناء التطبيقات في العالم.

بكود واحد تستطيع بناء تطبيقات تعمل على:

أندرويد و iOS (iPhone و iPad).
الويب.
سطح المكتب: ويندوز وماك ولينكس.

تخيّل أنك تكتب رسالة واحدة، ومترجم ذكي يحوّلها تلقائياً إلى كل اللغات التي يفهمها أصدقاؤك. هذا ما يفعله Flutter مع أنظمة التشغيل.

ويُكتب الكود في Flutter بلغة Dart. إذا لم تتعلمها بعد، ننصحك بأن تبدأ بكورس Dart أولاً.

في Flutter، كل شيء تراه على الشاشة هو Widget (عنصر واجهة): النص Widget، والزر Widget، والصورة Widget، وحتى المسافات والترتيب.

تخيّل الـ Widgets مثل قطع الليجو: قطع صغيرة بسيطة، تركّبها داخل بعضها لتبني شيئاً كبيراً ومعقداً. شاشة التطبيق كلها عبارة عن «شجرة» من الـ Widgets داخل بعضها:

MaterialApp
 └─ Scaffold
     └─ Center
         └─ Text("مرحباً")

MaterialApp: التطبيق كله.
Scaffold: هيكل الشاشة (مثل الإطار الأساسي).
Center: يضع ما بداخله في المنتصف.
Text: يعرض نصاً.

أول تطبيق Flutter

هذا تطبيق كامل يعرض جملة في منتصف الشاشة:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('مرحباً بك في Flutter!'),
        ),
      ),
    );
  }
}

لا تقلق إن بدا الكود غريباً، فهذه أول نظرة فقط. لاحظ الأفكار الكبيرة:

import: نستورد مكتبة Material التي فيها الـ Widgets الجاهزة.
main: نقطة البداية كما في Dart، وتستدعي runApp لتشغيل التطبيق.
MyApp: أول Widget نصنعه بأنفسنا.
build: دالة تبني ما يظهر على الشاشة وتُرجعه.
لاحظ كيف يتداخل كل Widget داخل الذي قبله عبر home و body و child، تماماً مثل شجرة الليجو التي رأيناها.

سنشرح كل جزء من هذا الكود بالتفصيل في الدروس القادمة.

تثبيت Flutter

خطوات التثبيت باختصار (راجع دائماً الموقع الرسمي flutter.dev لأن الخطوات قد تتغير):

نزّل Flutter SDK من الموقع الرسمي لنظام تشغيلك، وفك الضغط في مجلد بسيط المسار مثل C:\flutter (تجنّب المسارات التي فيها مسافات أو حروف عربية).
أضف مجلد flutter\bin إلى متغير البيئة PATH حتى تعمل أوامر flutter من أي مكان.
ثبّت Android Studio لتحصل على أدوات أندرويد ومحاكي هاتف (Emulator). أما تطوير تطبيقات iPhone فيحتاج إلى جهاز ماك.
ثبّت VS Code وإضافة Flutter فيه، لتكتب الكود بسهولة.

فحص التثبيت

افتح الطرفية واكتب:

flutter doctor

هذا الأمر مثل الطبيب: يفحص جهازك ويخبرك بما هو جاهز (علامة ✓) وما ينقصه (علامة ✗) مع نصائح لإصلاحه. لا تبدأ مشروعك حتى تصلح الأخطاء المهمة.

إنشاء وتشغيل مشروع

flutter create my_app
cd my_app
flutter run

الأمر الأول ينشئ مشروعاً جاهزاً بكل الملفات، والأخير يشغّله على المحاكي أو هاتفك المتصل بالكمبيوتر.

جرّب بنفسك

بعد تثبيت Flutter وإنشاء مشروع بـ flutter create:

افتح الملف lib/main.dart واستبدل محتواه بكود التطبيق الموجود في هذا الدرس.
شغّل التطبيق بـ flutter run.
غيّر النص داخل Text إلى اسمك، واحفظ الملف، وشاهد Hot Reload يعمل.

إذا لم يكن جهازك جاهزاً بعد، جرّب الكود على موقع DartPad (dartpad.dev) الذي يدعم Flutter أيضاً.

أخطاء شائعة

مسار تثبيت فيه مسافات أو حروف عربية: يسبب مشكلات غريبة. ثبّت Flutter في مسار بسيط مثل C:\flutter.
تجاهل نتائج flutter doctor: اقرأ كل علامة ✗ وأصلحها قبل أن تبدأ.
البدء بـ Flutter قبل Dart: ستشعر بالتوه. تعلّم أساسيات Dart أولاً.

اختبر نفسك

سؤال

ما الميزة الأساسية لـ Flutter؟