تطوير تطبيقات Flutter: من الفكرة إلى النشر

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

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

ما هو Flutter؟ وما علاقته بلغة Dart؟

• Flutter هو إطار العمل: مجموعة أدوات ومكتبات لبناء الواجهات.
• Dart هي لغة البرمجة التي تكتب بها تطبيقات Flutter.

ويعتمد Flutter على الودجات (Widgets): كل شيء في الواجهة عبارة عن ودجت، من النص والزر إلى هيكل الصفحة بأكمله، وتركّبها معاً كما تركّب قطع البناء. ومن ميزاته المعروفة إعادة التحميل السريعة (Hot Reload) التي تتيح لك رؤية أثر تعديلك على التطبيق دون إعادة تشغيله.

متى تختار Flutter؟

يناسبك Flutter عندما:

• تريد تطبيقاً واحداً لأندرويد وآيفون بفريق وميزانية أقل من بناء تطبيقين منفصلين.
• تريد واجهة مخصصة متسقة الشكل على المنصتين.
• تحتاج سرعة في تطوير النماذج الأولية ثم تطويرها.

وقد لا يكون الأنسب عندما:

• تحتاج تكاملاً عميقاً جداً مع ميزات خاصة بنظام واحد، وقد تكون البرمجة الأصلية (Kotlin لأندرويد وSwift لآيفون) أنسب.
• يكون فريقك متمرساً في تقنية أخرى ولا مبرر للانتقال.
• يلزم حجم تطبيق صغير جداً بشكل صارم، فتطبيقات Flutter قد تكون أكبر حجماً من بعض التطبيقات الأصلية البسيطة.

والقرار الجيد يعتمد على متطلبات مشروعك وفريقك، لا على الموضة. وإن كنت تبدأ رحلة البرمجة أصلاً فراجع من أين تبدأ في تعلم البرمجة؟.

تجهيز بيئة العمل

ما تحتاجه عموماً:

• حاسوب بنظام ويندوز أو ماك أو لينكس.
• تثبيت Flutter SDK حسب خطوات التوثيق الرسمي في موقع Flutter، فهي تتحدث مع الإصدارات ولا تحفظها من مقال.
• محرر أكواد: Android Studio أو Visual Studio Code مع إضافة Flutter.
• أدوات أندرويد: تأتي مع Android Studio، وتتيح لك محاكياً أو تشغيل التطبيق على جوالك.
• لبناء تطبيقات آيفون: تحتاج جهاز ماك وبرنامج Xcode. هذا شرط من نظام آبل، ولا تستطيع بناء نسخة آيفون من ويندوز مباشرة، لكن توجد خدمات سحابية للبناء.

وبعد التثبيت شغّل هذا الأمر في سطر الأوامر ليفحص بيئتك ويخبرك بما ينقصها:

flutter doctor

عالج ما يظهر فيه من ملاحظات قبل أن تبدأ.

أول تطبيق: عدّاد بسيط

أنشئ مشروعاً جديداً وشغّله:

flutter create my_first_app
cd my_first_app
flutter run

ثم استبدل محتوى الملف 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 const MaterialApp(home: CounterPage());
  }
}

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

  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: Center(
        child: Text('$_count', style: const TextStyle(fontSize: 48)),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => _count++),
        child: const Icon(Icons.add),
      ),
    );
  }
}

ماذا يفعل هذا الكود؟

• main نقطة بداية التطبيق، وهي تشغّل MyApp.
• MyApp ودجت ثابتة (Stateless) تحدد شكل التطبيق العام.
• CounterPage ودجت متغيرة الحالة (Stateful): تحفظ رقماً يتغير.
• عند الضغط على الزر نستدعي setState فيعيد Flutter رسم الواجهة بالرقم الجديد.

جرّب أن تغيّر لون الخلفية أو حجم الخط وانظر النتيجة فوراً بإعادة التحميل السريعة. هذه الطريقة في التجربة هي أسرع طرق التعلم.

مفاهيم أساسية يجب أن تتقنها

الودجات: ثابتة ومتغيرة

• Stateless: واجهة لا تتغير بنفسها، مثل نص ثابت أو أيقونة.
• Stateful: واجهة لها حالة تتغير مع الزمن، مثل عدّاد أو نموذج.

تخطيط الواجهة

تعلّم ودجات التخطيط الأساسية: Row وColumn لتوزيع العناصر أفقياً وعمودياً، وStack لتراكب العناصر، وContainer وPadding للمسافات والألوان، وListView للقوائم القابلة للتمرير، وExpanded لتقاسم المساحة.

إدارة الحالة

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

التنقل بين الشاشات

يوفّر Flutter نظام تنقل مدمجاً (Navigator)، وهناك حزم تسهّل تعريف المسارات في التطبيقات الكبيرة.

الحزم (Packages)

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

الموارد والتصميم

تُضاف الصور والخطوط في مجلد الموارد (assets) وتُعرَّف في ملف pubspec.yaml. ويتيح لك ThemeData تعريف ألوان التطبيق وخطوطه في مكان واحد ليكون التصميم متسقاً.

التطبيقات العربية: الاتجاه واللغة

للتطبيقات الموجهة للعرب انتبه لهذه النقاط:

• اتجاه الواجهة من اليمين لليسار (RTL): يدعمه Flutter عبر أدوات التدويل والترجمة، فتنعكس القوائم والأيقونات والترتيب تلقائياً عند اختيار لغة عربية.
• تدويل النصوص: استخدم نظام الترجمة بدل كتابة النصوص داخل الكود مباشرة، ليسهل دعم لغات أخرى لاحقاً.
• الخطوط: اختر خطاً يدعم العربية بجودة وجرّبه بأحجام مختلفة.
• الأرقام والتواريخ والعملات: نسّقها بحسب لغة المستخدم ومنطقته.
• اختبر كل شاشة بالعربية وبنصوص طويلة، فالنص العربي قد يظهر بشكل مختلف عن الإنجليزي.

بنية مشروع منظمة

تنظيم المشروع من البداية يوفّر عليك الكثير. إحدى الطرق الشائعة أن تقسّم الكود حسب الميزات:

• lib/features/ وفيه مجلد لكل ميزة (تسجيل الدخول، الرئيسية، الملف الشخصي...).
• lib/models/ لنماذج البيانات.
• lib/services/ للتعامل مع الشبكة وقواعد البيانات.
• lib/widgets/ للودجات المشتركة.
• lib/core/ للإعدادات والثوابت والتصميم العام.

والقاعدة العامة: افصل منطق التطبيق عن واجهته ما أمكن، لتسهل صيانته واختباره.

الواجهة الخلفية: ربط التطبيق بخادم

أغلب التطبيقات تحتاج إلى مكان لحفظ البيانات وتسجيل المستخدمين. خياراتك:

• Firebase: منصة من جوجل تتكامل مع Flutter بسهولة، وتوفر المصادقة (تسجيل الدخول)، وقواعد بيانات مثل Firestore، وتخزين الملفات، والإشعارات. وتُربَط عبر حزم FlutterFire الرسمية.
• واجهة برمجية (REST API) خاصة بك: تنشئها بلغة وخادم تختارهما، وتتصل بها من التطبيق.
• خدمات أخرى جاهزة كقواعد بيانات سحابية وخدمات مصادقة.

ونقطة أمان مهمة: لا تعتمد على إخفاء المفاتيح داخل التطبيق لحماية بياناتك، فكل ما يُشحن مع التطبيق يمكن فحصه. اعتمد على قواعد الحماية في الخادم (مثل قواعد Firestore) والتحقق من صلاحيات المستخدم في الخلفية، ولا تضع في التطبيق أسراراً حقيقية مثل مفاتيح الإدارة.

الاختبار والجودة

• اختبارات الوحدة والودجات والتكامل: يوفر Flutter أدوات لها، وتُشغَّل بالأمر flutter test.
• اختبر على أجهزة حقيقية وأحجام شاشات متنوعة وإصدارات نظام مختلفة، فالمحاكي لا يكشف كل شيء.
• افحص الأداء بوضع القياس (Profile mode) وأدوات Flutter DevTools.
• أضف نظاماً لتتبع الأعطال (مثل Firebase Crashlytics) لتعرف ما يحدث بعد النشر.
• اختبر حالات الشبكة الضعيفة وانقطاع الاتصال، فهي أكثر ما يُهمَل.

البناء والنشر

أندرويد

• لبناء حزمة للنشر على جوجل بلاي: flutter build appbundle.
• لبناء ملف APK للتوزيع المباشر والتجربة: flutter build apk.
• وقّع التطبيق بمفتاح توقيع (keystore) واحتفظ به في مكان آمن، فضياعه يعقّد تحديث تطبيقك لاحقاً.
• ستحتاج إلى حساب مطوّر في Google Play Console، وهو مدفوع برسم قد يتغير، فتحقق من الرسوم الحالية.

آيفون

• تحتاج حساب مطوّر في برنامج مطوّري آبل (برسم سنوي يتغير، فتحقق منه) وجهاز ماك وXcode.
• الأمر flutter build ios يجهّز التطبيق، ثم ترفعه عبر Xcode إلى App Store Connect.
• يمكنك التوزيع التجريبي أولاً عبر TestFlight.
• تمر التطبيقات بـمراجعة من آبل قد تطلب تعديلات، فجهّز وقتاً لذلك.

ما تطلبه المتاجر عادة

• سياسة خصوصية منشورة على رابط واضح، وخاصة إن جمعت بيانات.
• تصنيف المحتوى ونموذج بيانات المستخدم (Data Safety في جوجل بلاي) بصدق ودقة.
• أيقونة وصور شاشة ووصف واضح لمتجرك.
• أقل الصلاحيات الممكنة: لا تطلب من المستخدم صلاحية لا يحتاجها تطبيقك.
• اختبار على مسارات تجريبية قبل الإصدار العام.

وتتغير سياسات المتاجر باستمرار، فراجع التوثيق الرسمي لكل متجر قبل النشر.

كم يكلّف تطبيق Flutter وكم يستغرق؟

لا يوجد رقم واحد، لأن التكلفة والوقت يتأثران بعوامل منها:

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

والتطبيق الجيد لا ينتهي عند النشر، بل يحتاج متابعة وتحديثاً مستمرين. وعند طلب عروض أسعار قارن ما يشمله كل عرض لا السعر فقط.

أخطاء شائعة تجنّبها

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

هل تتعلمه بنفسك أم تتعاقد مع فريق؟

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

أسئلة شائعة

هل Flutter مجاني؟

نعم، Flutter مفتوح المصدر ومجاني للاستخدام. لكن النشر على المتاجر يتطلب رسوماً لحسابات المطوّرين، وقد تحتاج إلى خدمات خلفية مدفوعة بحسب حجم تطبيقك.

ما الفرق بين Flutter وDart؟

Dart هي لغة البرمجة، وFlutter هو إطار العمل المكتوب بها والمخصص لبناء الواجهات. تتعلم Dart عند تعلمك Flutter.

هل يصلح Flutter للتطبيقات الكبيرة؟

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

هل أستطيع نشر تطبيق آيفون من ويندوز؟

بناء تطبيق آيفون يتطلب نظام ماك وبرنامج Xcode، وهذا شرط من آبل. لا يمكن بناؤه من ويندوز مباشرة، لكن توجد خدمات بناء سحابية تتيح ذلك دون جهاز ماك خاص بك.

هل يمكنني تحويل تطبيقي إلى موقع إلكتروني؟

يدعم Flutter الويب فعلاً، لكن مدى مناسبته يتوقف على نوع التطبيق. التطبيقات التفاعلية تناسبه، بينما المواقع التي تعتمد على المحتوى وظهورها في محركات البحث قد تكون الأفضل لها تقنيات الويب التقليدية.

هل أحتاج أن أتعلم Dart قبل Flutter؟

لا، يمكنك تعلمهما معاً، فأساسيات Dart بسيطة وتظهر أثناء بناء أول تطبيقاتك. لكن فهم أساسيات البرمجة يسرّع كل شيء.

تنبيه: هذا الدليل للتوعية العامة وليس استشارة قانونية أو ضريبية أو مالية. تختلف الأنظمة من بلد لآخر وتتغير، فاستشر مختصاً في بلدك قبل تطبيق ما يتعلق بالتراخيص أو الضرائب أو حماية المستهلك أو البيانات الشخصية.

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

الخطوة التالية

جهّز بيئتك وشغّل flutter doctor، ثم أنشئ تطبيق العدّاد وعدّل عليه. بعدها ابنِ تطبيقاً صغيراً يحل مشكلة تهمك، مثل قائمة مهام أو متتبع مصاريف، وانشره تجريبياً على جوالك.

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