Flutter وDart: التثبيت والمشروع الأول

اكتشف ما هما Flutter وDart، وثبِّت الأدوات، وأنشئ مشروعك الأول، واختبر سحر إعادة التحميل السريع (hot reload).

8 دقيقة · 3 أسئلة

إن Flutter هو إطار عمل (framework): صندوق أدوات كبير من الكود الجاهز للاستخدام، أنشأته Google لبناء تطبيقات الهاتف المحمول، أي البرامج التي تثبّتها على الهاتف. وقوّته الكبرى أنك تكتب الكود مرة واحدة فقط، فيعمل على iPhone وAndroid والويب وحتى على سطح المكتب. ويُكتب هذا الكود بلغة Dart، وهي لغة برمجة: مجموعة من الكلمات والقواعد تتيح لك إعطاء التعليمات للآلة. ولتثبيت Flutter، اتبع الدليل الرسمي على docs.flutter.dev (قسم Get started): ستنزّل من هناك حزمة تطوير البرمجيات (SDK) (Software Development Kit، أي الحزمة التي تحتوي على كل الأدوات) وتثبّت محرِّر أكواد مثل Visual Studio Code مع إضافته الخاصة بـ Flutter. ثم تتحقق من كل شيء في الطرفية (terminal): نافذة تكتب فيها أوامر نصية للتحكم في حاسوبك.

flutter doctor

يعمل الأمر flutter doctor مثل الطبيب: فهو يفحص جهازك ويعرض قائمة تحقّق، بعلامة صح خضراء لما هو جاهز وعلامة خطأ لما هو ناقص، مع تعليمات لإصلاحه. وحالما تصبح الأساسيات خضراء، يمكنك إنشاء مشروعك الأول: المجلد الذي سيحتوي على كل كود تطبيقك. ويُكتب اسم مشروع Flutter بأحرف صغيرة، دون مسافات أو حركات، مع استخدام الشرطات السفلية (_) للفصل بين الكلمات.

flutter create my_first_app
cd my_first_app
flutter run

ينشئ الأمر flutter create مجلدًا باسم my_first_app يحتوي على تطبيق تجريبي كامل. أما cd (اختصار change directory، أي تغيير المجلد) فينتقل إلى داخل ذلك المجلد، ويقوم flutter run بترجمة التطبيق ثم تشغيله على هاتف موصول عبر USB، أو على محاكٍ (emulator) (هاتف افتراضي يظهر على شاشتك)، أو في متصفح Chrome. ويوجد كل الكود الذي تكتبه في الملف lib/main.dart. استبدل محتواه بهذا البرنامج البسيط:

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const Scaffold(
        body: Center(
          child: Text("Hello Flutter!"),
        ),
      ),
    );
  }
}

لنقرأ الخطوط العريضة، دون محاولة إتقان كل شيء: تُحمّل import صندوق أدوات Flutter الرسومي، وvoid main() هي نقطة الدخول (أول دالة تُنفَّذ على الإطلاق)، ويبدأ runApp التطبيق بعرض النص "Hello Flutter!" في وسط الشاشة. وسيُفصَّل كل جزء في الدروس القادمة. والآن إلى سحر إعادة التحميل السريع (hot reload): غيّر نص الرسالة، واحفظ الملف... فيتحدّث التطبيق المعروض فورًا، دون إعادة تشغيل. وهذه الدورة القصيرة جدًا من أعظم نقاط قوة Flutter.

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. ما هو Flutter؟
   • لغة برمجة أنشأتها Apple
   • إطار عمل من Google لبناء التطبيقات
   • أداة لتحرير الصور على الهاتف
2. أيّ أمر يُنشئ مشروع Flutter جديدًا؟
   • flutter run my_app
   • flutter doctor my_app
   • flutter create my_app
3. ماذا تفعل إعادة التحميل السريع (hot reload)؟
   • تُحدِّث Flutter إلى أحدث إصدار لها
   • تطبّق تغييرات كودك على التطبيق قيد التشغيل فورًا تقريبًا
   • تعيد تشغيل الهاتف لتفريغ ذاكرته