تعلم Flutter: من أين تبدأ؟

إذا كنت تريد بناء تطبيق موبايل يعمل على Android وiOS من كود واحد، فغالبًا وصلت إلى Flutter. والسؤال التالي مباشرة: من أين أبدأ تعلم فلاتر دون أن أضيع بين الدورات والمصطلحات؟

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

ما هو Flutter ولماذا يختاره المبتدئون؟

Flutter هو إطار عمل مفتوح المصدر من Google لبناء تطبيقات بواجهات رسومية من كود واحد، تعمل على Android وiOS والويب وأنظمة سطح المكتب. ويُكتب بلغة Dart التي تطورها Google أيضًا.

أسباب جاذبيته للمبتدئ:

• كود واحد لأكثر من منصة: تتعلم أداة واحدة بدل تعلم Kotlin لأندرويد وSwift لـ iOS.
• إعادة التحميل السريع (Hot Reload): تعدّل الكود فيظهر التغيير على المحاكي أو الهاتف خلال لحظات دون إعادة تشغيل التطبيق، وهذا يسرع التعلم بالتجربة.
• مكونات جاهزة كثيرة: أزرار وقوائم ونماذج إدخال بتصميم Material من Google وتصميم Cupertino الخاص بـ iOS.
• توثيق رسمي قوي: مع أمثلة ودروس تفاعلية تبدأ من الصفر.

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

لمقارنة Flutter ببدائله مثل React Native والتطوير الأصلي (Native) من منظور صاحب المشروع، راجع Flutter أم React Native أم Native؟.

هل تحتاج خبرة برمجية قبل تعلم فلاتر؟

تحتاج أساسيات البرمجة بلغة Dart قبل أن تبدأ ببناء الواجهات. يمكنك تعلم Dart نفسها كلغة أولى، لكن القفز مباشرة إلى Flutter دون فهم المتغيرات والدوال والكلاسات هو أكثر سبب يجعل المبتدئين يشعرون بأن Flutter «معقد».

هذه أساسيات Dart التي تحتاجها قبل البداية:

• المتغيرات والأنواع: var name = 'Sara'; وint age = 25;
• الشروط والحلقات: if وfor.
• الدوال: int add(int a, int b) => a + b;
• القوائم والخرائط: List وMap.
• الكلاسات والكائنات، لأن كل شاشة في Flutter كلاس.
• الأمان من القيم الفارغة (Null Safety): معنى علامة ? بعد النوع مثل String?.
• البرمجة غير المتزامنة: Future وasync وawait لجلب البيانات من الإنترنت.

أول برنامج Dart يمكنك تجربته مباشرة في المتصفح عبر محرر DartPad الرسمي: void main() { var name = 'Sara'; print('Hello $name'); }. يطبع هذا البرنامج تحية باسم محفوظ في متغير.

كيف تجهز بيئة عمل Flutter على جهازك؟

تجهيز البيئة يتم في خمس خطوات، والأداة flutter doctor تخبرك بأي شيء ناقص. اتبع دليل التثبيت في التوثيق الرسمي لـ Flutter حسب نظام تشغيلك، لأن التفاصيل تتغير بين الإصدارات.

لا تحذف تطبيق العداد التجريبي فورًا، بل اقرأ ملف lib/main.dart سطرًا سطرًا، فهو درس مصغر في Flutter. ستجد فيه دالة main التي تشغّل التطبيق، وStatefulWidget يحتفظ برقم العداد، واستدعاء setState الذي يعيد رسم الشاشة عند الضغط على الزر. جرّب تعديل لون التطبيق أو نص العنوان واحفظ الملف، ولاحظ كيف يظهر التغيير فورًا بفضل Hot Reload.

ما المفاهيم الأساسية التي يجب أن تفهمها في Flutter؟

أهم فكرة في Flutter أن كل شيء في الواجهة Widget: النص والزر والمسافة والصف والشاشة كاملة. الـ Widget هو وصف لجزء من الواجهة، وتبني الشاشة بتركيب Widgets داخل بعضها كشجرة.

مثال: أصغر تطبيق Flutter كامل

بعد استيراد مكتبة Material بالسطر import 'package:flutter/material.dart'; يمكنك كتابة تطبيق كامل في سطر واحد داخل الدالة الرئيسية: void main() => runApp(const MaterialApp(home: Scaffold(body: Center(child: Text('Hello')))));

اقرأ هذا السطر من الخارج إلى الداخل: runApp يشغّل التطبيق، وMaterialApp يوفر إعدادات التصميم العامة، وScaffold هو هيكل الشاشة، وCenter يضع ما بداخله في المنتصف، وText يعرض النص. هذا التداخل هو ما يقصده الناس بعبارة «شجرة الـ Widgets».

Widgets التخطيط

تبدأ بعدد قليل يغطي أغلب الحالات: Column لترتيب العناصر عموديًا، وRow أفقيًا، وContainer وPadding للمسافات والخلفيات، وListView للقوائم الطويلة القابلة للتمرير. مثال: Column(children: [Text('A'), Text('B')]) يعرض نصين أحدهما تحت الآخر.

Stateless أم Stateful؟

التنقل وإدارة الحالة وجلب البيانات

• التنقل بين الشاشات: باستخدام Navigator، ولاحقًا بحزمة توجيه مثل go_router في التطبيقات الأكبر.
• إدارة الحالة: ابدأ بـ setState لتفهم الفكرة، ثم انتقل إلى حل مثل Provider عندما تحتاج مشاركة البيانات بين شاشات عدة.
• جلب البيانات: بحزمة http وعرض النتيجة بـ FutureBuilder مع حالات التحميل والخطأ. لفهم الفكرة من الأساس اقرأ ما هو الـ API؟.

خطة مرحلية لتعلم فلاتر بمشروع لكل مرحلة

قسّم رحلتك إلى خمس مراحل، تنتهي كل منها بتطبيق صغير تضيفه إلى معرض أعمالك. المدة تختلف حسب وقتك، والمهم ألا تنتقل لمرحلة قبل أن يعمل مشروع المرحلة السابقة، وأن تفهم كل سطر فيه.

1. Dart فقط: برامج سطر أوامر صغيرة، مثل حاسبة درجات أو لعبة تخمين رقم.
2. واجهات ثابتة: أعد بناء شاشة تطبيق تستخدمه يوميًا، مثل شاشة ملف شخصي أو قائمة طعام، بـ Widgets التخطيط فقط.
3. التفاعل والحالة: تطبيق قائمة مهام بإضافة وحذف وتعليم المهام المنجزة.
4. البيانات من الإنترنت: تطبيق يعرض بيانات من API عامة، مع شاشة تفاصيل وحالات التحميل والخطأ.
5. تطبيق متكامل: تسجيل دخول وتخزين بيانات في خدمة خلفية، مثل تطبيق حجز مواعيد مبسط أو متجر صغير.

في المرحلة الخامسة ستحتاج إلى خدمة خلفية جاهزة لتسجيل الدخول وتخزين البيانات، وهنا يفيدك مقال Supabase أم Firebase: أيهما لمشروعك الأول؟.

أين تتعلم Flutter مجانًا من مصادر رسمية؟

المصادر الرسمية كافية لتعلم Flutter من البداية حتى مستوى متقدم، وهي محدثة دائمًا مع كل إصدار جديد.

• توثيق Flutter الرسمي: فيه دليل التثبيت، ودروس للمبتدئين، ومختبرات برمجية (Codelabs) تبني فيها تطبيقًا خطوة بخطوة، وكتالوج لكل الـ Widgets.
• موقع Dart الرسمي: فيه شرح رسمي لقواعد اللغة ومفاهيمها، ومحرر DartPad للتجربة في المتصفح دون تثبيت.
• pub.dev: المستودع الرسمي لحزم Dart وFlutter. قبل استخدام أي حزمة، راجع تاريخ آخر تحديث لها ودرجة تقييمها وتوافقها مع إصدارك.
• قناة Flutter الرسمية على YouTube: ومنها سلسلة قصيرة تشرح Widget واحدًا في كل حلقة.

ما الأخطاء الشائعة عند تعلم Flutter؟

أغلب أخطاء المبتدئين في Flutter تتعلق بالترتيب لا بالصعوبة. تجنبها يجعل التعلم أسرع وأقل إحباطًا.

• تخطي Dart: تبدو الأخطاء غامضة لأنها في الحقيقة أخطاء لغة لا أخطاء Flutter.
• البدء بإدارة حالة معقدة: تعلم أدوات متقدمة قبل أن تواجه المشكلة التي تحلها يجعلها تبدو بلا معنى.
• نسخ كود قديم: بعض الأمثلة القديمة كُتبت قبل نظام Null Safety ولن تعمل كما هي. افحص تاريخ المصدر دائمًا.
• إضافة حزم لكل شيء: كل حزمة إضافية عبء صيانة. استخدم المكونات المدمجة أولًا.
• تجاهل دعم العربية: اختبر تطبيقك مبكرًا بالاتجاه من اليمين لليسار والخطوط العربية، لأن تعديل ذلك في النهاية أصعب.
• الاختبار على شاشة واحدة فقط: شاشة تبدو مثالية على هاتفك قد تظهر بها أخطاء تجاوز المساحة (Overflow) على هاتف أصغر. جرّب أكثر من مقاس، واستخدم Widgets مرنة مثل Expanded وSingleChildScrollView عند الحاجة.

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

وتذكر أن تعلم فلاتر هو جزء من رحلة أوسع في البرمجة. إن كنت في بدايتك تمامًا، فابدأ من الدليل الكامل لتعلم البرمجة من الصفر.

الخلاصة

• تعلّم أساسيات Dart أولًا، خاصة الكلاسات وNull Safety والبرمجة غير المتزامنة.
• جهّز البيئة بدليل التثبيت الرسمي، واعتمد على flutter doctor لكشف النواقص.
• افهم أن كل شيء Widget، وأتقن Widgets التخطيط والفرق بين Stateless وStateful.
• أنهِ كل مرحلة بتطبيق صغير، وصولًا إلى تطبيق متكامل بتسجيل دخول وبيانات.
• بناء نسخة iOS يحتاج Mac، لكن يمكنك التعلم كاملًا على Windows لأندرويد والويب.