مدخل إلى عالم الهواتف: لماذا Flutter هو الخيار الأول لبرمجة تطبيقات Android و iOS؟

مدخل إلى عالم الهواتف: لماذا Flutter هو الخيار الأول لبرمجة تطبيقات Android و iOS؟

ماذا سنتعلم؟

سنتعلم اليوم لماذا أصبح Flutter الخيار الأمثل لتطوير تطبيقات الهواتف الذكية، وسنقوم ببناء تطبيق Flutter بسيط خطوة بخطوة.

لماذا Flutter هو الخيار الأول لبرمجة تطبيقات Android و iOS؟

Flutter هو إطار عمل (Framework) لواجهة المستخدم (UI) من Google يتيح لك بناء تطبيقات مجمعة (natively compiled) ومتعددة المنصات (cross-platform) من قاعدة كود واحدة. هذا يعني أنك تكتب الكود مرة واحدة ويُمكنك تشغيله على Android و iOS، وحتى الويب وسطح المكتب.

ملاحظة تقنية: Flutter يستخدم لغة Dart كلغة برمجة أساسية. Dart هي لغة مُحسّنة لواجهة المستخدم، وتُعرف بسرعتها وأدائها العاليين، خاصةً في بيئات Flutter.

أهم مميزات Flutter:

• تطوير متعدد المنصات بكود واحد: يقلل بشكل كبير من وقت التطوير والتكلفة.
• أداء قريب من الأصلي (Near-Native Performance): بفضل تجميعه المسبق (ahead-of-time compilation) إلى كود أصلي.
• إعادة التحميل السريع (Hot Reload) وإعادة التشغيل السريع (Hot Restart): لتجربة تطوير سريعة وممتعة.
• واجهة مستخدم مرنة ومعبرة (Expressive and Flexible UI): يسمح ببناء واجهات مستخدم مخصصة وجميلة بسهولة بفضل نظام الـ Widgets الغني.
• مجتمع كبير ومتنامي: دعم وموارد وفيرة للمطورين.

إعداد بيئة العمل (نظرة سريعة)

للبدء مع Flutter، ستحتاج إلى تثبيت:

• Flutter SDK: حزمة تطوير البرمجيات الخاصة بـ Flutter.
• محرر أكواد (IDE): مثل Visual Studio Code مع إضافة Flutter/Dart، أو Android Studio مع إضافات Flutter/Dart.
• أدوات Android و iOS: مثل Android SDK و Xcode (لنظام macOS فقط لتطوير iOS).

يمكنك العثور على إرشادات التثبيت التفصيلية على الموقع الرسمي لـ Flutter.

بناء تطبيق Flutter الأول: خطوة بخطوة

دعونا نبني تطبيقاً بسيطاً يعرض نصاً على الشاشة مع زر يغير هذا النص.

الخطوة 1: إنشاء مشروع Flutter والهيكل الأساسي

بعد إنشاء مشروع جديد باستخدام أمر flutter create my_first_app، سنقوم بتعديل الملف lib/main.dart لإنشاء تطبيق Material بسيط.

import 'package:flutter/material.dart'; // استيراد حزمة Material Design من Flutter

void main() {
  runApp(const MyApp()); // تشغيل التطبيق، MyApp هو الـ Widget الرئيسي
}

// MyApp هو Widget بدون حالة (StatelessWidget) لأنه لا يغير حالته الداخلية
class MyApp extends StatelessWidget {
  const MyApp({super.key}); // مُنشئ الكلاس

  @override
  Widget build(BuildContext context) {
    return MaterialApp( // MaterialApp هو الـ Widget الأساسي لتطبيقات Material Design
      title: 'تطبيق Flutter الأول', // عنوان التطبيق الذي يظهر في مدير المهام
      theme: ThemeData( // تعريف الثيم الخاص بالتطبيق
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), // تحديد اللون الأساسي للثيم
        useMaterial3: true, // استخدام Material Design 3
      ),
      home: const Text('أهلاً بك في Flutter!'), // تحديد الـ Widget الذي سيكون الصفحة الرئيسية مؤقتاً
    );
  }
}

في هذه الخطوة، قمنا بتهيئة مشروع Flutter الأساسي. عرفنا MyApp كـ StatelessWidget الذي يحتوي على MaterialApp، والذي يوفر الإعدادات الأساسية لتطبيق Material Design. حالياً، يعرض الـ home نصاً بسيطاً.

الخطوة 2: بناء صفحة التطبيق الرئيسية (StatefulWidget و Scaffold)

الآن، لنقم بإنشاء صفحة رئيسية أكثر تعقيداً تستخدم Scaffold لتوفير هيكل التطبيق (شريط علوي، جسم) وستكون StatefulWidget لأنها ستغير محتواها.

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(
      title: 'تطبيق Flutter الأول',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(), // استبدال النص المؤقت بـ MyHomePage
    );
  }
}

// MyHomePage هو Widget بحالة (StatefulWidget) لأنه سيغير حالته (النص المعروض)
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key}); // مُنشئ الكلاس

  @override
  State<MyHomePage> createState() => _MyHomePageState(); // إنشاء كائن الحالة لهذا الـ Widget
}

// _MyHomePageState هو الكلاس الذي يدير حالة MyHomePage
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold( // Scaffold يوفر هيكل مرئي أساسي لتطبيقات Material Design
      appBar: AppBar( // شريط التطبيق العلوي
        backgroundColor: Theme.of(context).colorScheme.inversePrimary, // لون خلفية شريط التطبيق
        title: const Text('أول تطبيق Flutter لي'), // عنوان يظهر في شريط التطبيق
      ),
      body: const Center( // Center Widget لتوسيط المحتوى
        child: Text('محتوى الصفحة هنا'), // نص مؤقت سيتم استبداله
      ),
    );
  }
}

في هذه الخطوة، قمنا بتعريف MyHomePage كـ StatefulWidget وأضفنا Scaffold الذي يوفر هيكل مرئي لتطبيقنا، بما في ذلك شريط التطبيق (AppBar) وجسم التطبيق (body).

الخطوة 3: إضافة واجهة المستخدم التفاعلية وتغيير الحالة

الآن سنضيف النص والزر إلى جسم التطبيق، ونضيف المنطق لتغيير النص عند الضغط على الزر. سنستخدم Column لوضع العناصر عمودياً، و setState لتحديث الواجهة.

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(
      title: 'تطبيق Flutter الأول',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _message = 'مرحباً بكم في عالم Flutter!'; // متغير الحالة: الرسالة المعروضة

  void _changeMessage() {
    setState(() { // استخدام setState لإعادة بناء الـ Widget بعد تغيير الحالة
      _message = 'لقد غيرت الرسالة بنجاح!'; // تغيير الرسالة
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('أول تطبيق Flutter لي'),
      ),
      body: Center(
        child: Column( // Column Widget لعرض العناصر عمودياً
          mainAxisAlignment: MainAxisAlignment.center, // توسيط العناصر عمودياً
          children: <Widget>[
            Text( // Widget لعرض النص
              _message, // عرض الرسالة الحالية
              style: Theme.of(context).textTheme.headlineMedium, // تنسيق النص
            ),
            const SizedBox(height: 20), // مسافة فارغة بين النص والزر
            ElevatedButton( // زر مرتفع
              onPressed: _changeMessage, // الدالة التي تُنفذ عند الضغط على الزر
              child: const Text('غير الرسالة'), // نص الزر
            ),
          ],
        ),
      ),
    );
  }
}

في هذه الخطوة الأخيرة، قمنا بإضافة متغير _message إلى _MyHomePageState ليمثل حالة قابلة للتغيير. استخدمنا Column داخل Center لعرض Text Widget يعرض الرسالة الحالية، و ElevatedButton. عند الضغط على الزر، تستدعى الدالة _changeMessage التي تقوم بتحديث _message ثم تستدعي setState لإخبار Flutter بضرورة إعادة بناء الـ Widget وعرض الرسالة الجديدة.

الكود النهائي الكامل

import 'package:flutter/material.dart'; // استيراد حزمة Material Design من Flutter

void main() {
  runApp(const MyApp()); // تشغيل التطبيق، MyApp هو الـ Widget الرئيسي
}

// MyApp هو Widget بدون حالة (StatelessWidget) لأنه لا يغير حالته الداخلية
class MyApp extends StatelessWidget {
  const MyApp({super.key}); // مُنشئ الكلاس

  @override
  Widget build(BuildContext context) {
    return MaterialApp( // MaterialApp هو الـ Widget الأساسي لتطبيقات Material Design
      title: 'تطبيق Flutter الأول', // عنوان التطبيق الذي يظهر في مدير المهام
      theme: ThemeData( // تعريف الثيم الخاص بالتطبيق
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), // تحديد اللون الأساسي للثيم
        useMaterial3: true, // استخدام Material Design 3
      ),
      home: const MyHomePage(), // تحديد الـ Widget الذي سيكون الصفحة الرئيسية
    );
  }
}

// MyHomePage هو Widget بحالة (StatefulWidget) لأنه سيغير حالته (النص المعروض)
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key}); // مُنشئ الكلاس

  @override
  State<MyHomePage> createState() => _MyHomePageState(); // إنشاء كائن الحالة لهذا الـ Widget
}

// _MyHomePageState هو الكلاس الذي يدير حالة MyHomePage
class _MyHomePageState extends State<MyHomePage> {
  String _message = 'مرحباً بكم في عالم Flutter!'; // متغير الحالة: الرسالة المعروضة

  void _changeMessage() {
    setState(() { // استخدام setState لإعادة بناء الـ Widget بعد تغيير الحالة
      _message = 'لقد غيرت الرسالة بنجاح!'; // تغيير الرسالة
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold( // Scaffold يوفر هيكل مرئي أساسي لتطبيقات Material Design
      appBar: AppBar( // شريط التطبيق العلوي
        backgroundColor: Theme.of(context).colorScheme.inversePrimary, // لون خلفية شريط التطبيق
        title: const Text('أول تطبيق Flutter لي'), // عنوان يظهر في شريط التطبيق
      ),
      body: Center( // Center Widget لتوسيط المحتوى
        child: Column( // Column Widget لعرض العناصر عمودياً
          mainAxisAlignment: MainAxisAlignment.center, // توسيط العناصر عمودياً
          children: <Widget>[
            Text( // Widget لعرض النص
              _message, // عرض الرسالة الحالية
              style: Theme.of(context).textTheme.headlineMedium, // تنسيق النص
            ),
            const SizedBox(height: 20), // مسافة فارغة بين النص والزر
            ElevatedButton( // زر مرتفع
              onPressed: _changeMessage, // الدالة التي تُنفذ عند الضغط على الزر
              child: const Text('غير الرسالة'), // نص الزر
            ),
          ],
        ),
      ),
    );
  }
}

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

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

عند الضغط على الزر "غير الرسالة"، سيتغير النص فوراً ليصبح "لقد غيرت الرسالة بنجاح!".

هذا يوضح كيف يمكن لـ Flutter بناء واجهات مستخدم تفاعلية بسهولة باستخدام مفهوم الـ Widgets وإدارة الحالة.

الفهرسالتالي →