NTF Hub / البرمجة / Flutter

Flutter

إطار عمل من Google لبناء تطبيقات جميلة وسريعة لنظامي Android وiOS — وكذلك للويب وسطح المكتب — من قاعدة كود واحدة بلغة Dart. يعتمد Flutter على فكرة أنّ «كل شيء عنصر» (Widget)، ما يمنحك تحكّمًا دقيقًا في كل بكسل على الشاشة.

Dart Widgets إدارة الحالة Cross‑Platform

مقدمة تعريفية

ما هو Flutter ولماذا غيّر قواعد تطوير تطبيقات الجوال.

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

ميزته الأبرز خاصية Hot Reload التي تعكس تعديلاتك على الشاشة في أقل من ثانية، ما يجعل التطوير سريعًا وممتعًا. وبفضل مكتبته الغنية من الـ Widgets الجاهزة يمكنك بناء واجهات احترافية في وقت قياسي.

لماذا يجب تعلّم Flutter؟

أسباب جعلته من أسرع تقنيات تطوير الجوال نموًا.

كود واحد لكل المنصّات: طوّر لـ Android وiOS معًا، ووفّر الوقت والتكلفة.
أداء عالٍ: يُترجَم إلى كود أصلي (Native) ويقدّم تجربة سلسة وسريعة.
تطوير سريع: Hot Reload يتيح رؤية التغييرات لحظيًا دون إعادة تشغيل.
واجهات جميلة: مكتبة Widgets غنية تدعم تصميم Material وCupertino.
دعم Google ومجتمع كبير: تحديثات مستمرّة وحزم جاهزة عبر pub.dev.

تطوير تطبيقات Android و iOS

كيف يحقّق Flutter تجربة موحّدة عبر المنصّات.

بدلًا من كتابة تطبيق بلغة Kotlin لـ Android وآخر بـ Swift لـ iOS، تكتب مرة واحدة بلغة Dart ويتولّى Flutter توليد نسختين أصليّتين. هذا يقلّص فريق العمل ويوحّد التجربة ويُسرّع إطلاق التحديثات على المتجرين معًا.

يدعم Flutter أيضًا الوصول إلى ميزات الجهاز (الكاميرا، الموقع، الإشعارات) عبر حزم جاهزة، كما يمكنه استهداف الويب وسطح المكتب من المشروع نفسه.

الـ Widgets

اللبنات التي يُبنى منها كل شيء في Flutter.

🧩

كل شيء Widget

النصوص والأزرار والصور وحتى التخطيط نفسه — جميعها عناصر Widget.

🗂️

التخطيط

Row وColumn وStack وContainer لترتيب العناصر على الشاشة.

🎛️

تفاعلية

أزرار وحقول إدخال وقوائم جاهزة للاستجابة لتفاعل المستخدم.

❄️

StatelessWidget

عناصر ثابتة لا تتغيّر حالتها، مثالية للعرض البسيط.

🔄

StatefulWidget

عناصر تحتفظ بحالة قابلة للتغيير وتُعيد رسم نفسها عند تحديثها.

🎨

Material & Cupertino

مجموعتا تصميم جاهزتان بطابع Android وiOS على التوالي.

إدارة الحالة (State Management)

كيف تتعامل التطبيقات مع البيانات المتغيّرة.

«الحالة» هي أي بيانات قد تتغيّر أثناء استخدام التطبيق (عدّاد، محتوى سلّة، حالة تسجيل الدخول). إدارة الحالة هي فنّ تنظيم هذه البيانات وتحديث الواجهة عند تغيّرها بكفاءة ووضوح.

يبدأ المبتدئ بـ setState للحالات البسيطة، ثم ينتقل إلى حلول أقوى للمشاريع الكبيرة مثل Provider وRiverpod وBloc التي تفصل المنطق عن الواجهة وتسهّل التوسّع والصيانة.

Firebase مع Flutter

الواجهة الخلفية الأسرع لتطبيقات Flutter.

يتكامل Flutter بسلاسة مع Firebase ليمنح تطبيقك خلفية جاهزة دون إدارة خادم: المصادقة لتسجيل الدخول، وFirestore لتخزين البيانات ومزامنتها لحظيًا، وStorage لرفع الملفات، والإشعارات للوصول إلى المستخدمين.

عبر حزمة firebase_core والحزم المرافقة، يمكنك إضافة هذه الخدمات بأسطر قليلة. لمعرفة المزيد، انتقل إلى صفحة Firebase في قسم البرمجة.

المهارات الأساسية المطلوبة

ما يلزمك قبل بناء تطبيقات احترافية.

لغة Dart: المتغيرات والدوال والأصناف (Classes) والبرمجة غير المتزامنة.
شجرة الـ Widgets: فهم كيفية تركيب العناصر داخل بعضها.
التخطيط: استخدام Row وColumn وExpanded وPadding بثقة.
إدارة الحالة: setState ثم حلٌّ متقدّم مثل Provider أو Riverpod.
التنقّل: الانتقال بين الشاشات عبر Navigator والمسارات.
التكامل الخلفي: ربط التطبيق بواجهات API أو Firebase.

خارطة طريق للمبتدئ

من تثبيت الأدوات إلى نشر أول تطبيق.

تهيئة البيئة

ثبّت Flutter SDK ومحرّر VS Code أو Android Studio ومحاكيًا للجهاز.

أساسيات Dart

تعلّم المتغيرات والدوال والأصناف وغير المتزامن.

الـ Widgets والتخطيط

ابنِ واجهات بسيطة باستخدام عناصر العرض والتخطيط.

التفاعل والحالة

تعامل مع المدخلات وحدّث الواجهة عبر setState.

التنقّل والبيانات

تنقّل بين الشاشات واربط التطبيق بمصدر بيانات.

مشروع ونشر

ابنِ تطبيقًا كاملًا وادمج Firebase وانشره على المتجر.

أمثلة عملية

أكواد قصيرة بلغة Dart تُظهر روح Flutter.

أبسط تطبيق

عرض نصّ في منتصف الشاشة.

import 'package:flutter/material.dart';

void main() => runApp(
  const MaterialApp(
    home: Center(child: Text("مرحبًا Flutter")),
  ),
);

StatelessWidget

عنصر عرض ثابت بسيط.

class Greeting extends StatelessWidget {
  const Greeting({super.key});
  @override
  Widget build(BuildContext context) {
    return const Text("أهلًا بك");
  }
}

تخطيط بالأعمدة

ترتيب عنصرين رأسيًا.

Column(
  children: const [
    Text("العنوان"),
    Text("الوصف"),
  ],
)

حالة بسيطة (setState)

زيادة عدّاد عند الضغط.

int count = 0;

ElevatedButton(
  onPressed: () => setState(() => count++),
  child: Text("العدد: $count"),
)

أسئلة شائعة

أكثر ما يتساءل عنه المتعلّمون حول Flutter.

ما اللغة المستخدمة في Flutter؟

لغة Dart، وهي لغة من Google سهلة التعلّم وقريبة في بنيتها من JavaScript وJava، ما يجعل الانتقال إليها سلسًا.

هل يمكن بناء تطبيق لـ iOS من دون جهاز Mac؟

يمكنك تطوير الكود على أي نظام، لكن بناء نسخة iOS النهائية ونشرها على App Store يتطلّب جهاز Mac وأدوات Apple.

هل Flutter أفضل من React Native؟

لكلٍّ مزاياه. يتميّز Flutter بأداء رسم ثابت وواجهة موحّدة، بينما يعتمد React Native على JavaScript والعناصر الأصلية. الاختيار يعتمد على فريقك ومشروعك.

هل أحتاج خبرة سابقة في تطوير الجوال؟

لا. يمكن البدء بـ Flutter مباشرة، لكن إتقان أساسيات البرمجة العامة (المتغيرات والدوال والشروط) يجعل الرحلة أسهل.

تابع رحلتك في البرمجة

انتقل إلى بقية المسارات التعليمية في قسم البرمجة.