Flutter — المفاهيم الأساسية، والبنية المعمارية، والودجات

ما هو Flutter

Flutter هو SDK (مجموعة أدوات تطوير البرمجيات) وإطار لإنشاء واجهات المستخدم، أعلنت عنه Google في 2015. صدرت النسخة المستقرة الأولى Flutter 1.0 في ديسمبر 2018. على عكس React Native، لا يستخدم Flutter جسرًا بين JavaScript والكود الأصلي — بل يُجمّع مباشرةً إلى تعليمات المعالج الأصلية.

الميزة الرئيسية لـ Flutter هي محرك العرض الخاص به. لا يعتمد الإطار على UIKit (iOS) أو نظام View في Android. بدلاً من ذلك، يرسم Flutter كل بكسل بشكل مستقل عبر Skia (قبل 2024) أو محرك Impeller الجديد. وهذا يضمن مظهرًا موحدًا عبر جميع المنصات ويزيل مشكلات التكيف مع إصدارات نظام التشغيل المختلفة.

وفقًا لـ Statista 2024، يحتل Flutter المرتبة الأولى بين أطر العمل متعددة المنصات من حيث الشعبية: حوالي 46% من المطورين يستخدمونه لتطوير تطبيقات الجوال. يُستخدم الإطار في مشاريع Google Pay وAlibaba وeBay وBMW وTencent.

تاريخ وإصدارات Flutter

تم تقديم النسخة التجريبية الأولى من Flutter في قمة مطوري Dart في 2015 تحت اسم Sky. في 2018 صدر Flutter 1.0 مع دعم iOS وAndroid فقط. أضاف Flutter 2.0 (2021) دعم Web وDesktop. قدم Flutter 3.0 (2022) دعمًا مستقرًا لـ macOS وLinux. قدم Flutter 3.16 (2023) Impeller — محرك عرض جديد يعتمد على Metal وVulkan.

يتضمن Flutter 3.22 (2024) Impeller بشكل افتراضي على iOS، ودعمًا محسنًا لـ Material Design 3، وDart 3.4 مع امتدادات الماكرو، ودعمًا مدمجًا لـ Native Assets للوصول المباشر إلى موارد المنصة. تذكر Google أن Impeller يقلل انقطاع الإطارات بنسبة 90% مقارنة بـ Skia.

لغة Dart

Dart هي لغة برمجة طورتها Google في 2011 وتُستخدم في Flutter. تجمع Dart بين الكتابة الصارمة وقدرات التجميع JIT (لـ Hot Reload) والتجميع AOT (لإصدارات الإنتاج). قدمت Dart 3.0 (2023) مطابقة الأنماط والفئات المختومة والسجلات كميزات مستقرة.

Null safety في Dart هي ميزة إلزامية تم تقديمها منذ الإصدار 2.12. يتحقق المترجم من جميع الأنواع القابلة للعدم في وقت البناء، مما يلغي استثناء NullPointerException في وقت التشغيل. أنواع البيانات (int, String, bool) غير قابلة للعدم افتراضيًا، وتستخدم القيم القابلة للعدم اللاحقة ? (مثل String? name).

بنية Flutter المعمارية

بنية Flutter المعمارية مبنية على مبدأ ثلاثي المستويات. الطبقة السفلية هي المحرك (C/C++)، المسؤول عن العرض والإدخال/الإخراج والوصول إلى واجهات برمجة التطبيقات الخاصة بالمنصة. الطبقة الوسطى هي الإطار (Dart)، الذي ينفذ نظام الودجات والإيماءات والرسوم المتحركة والتنقل. الطبقة العليا هي التطبيق (Dart)، الذي يجمع الودجات في شجرة.

الودجات وشجرة الودجات

في Flutter، كل شيء هو ودجة. تأتي الودجات بنوعين: StatelessWidget (غير قابل للتغيير، لا يخزن حالة) وStatefulWidget (قابل للتغيير، يدير الحالة عبر State). شجرة الودجات (Widget Tree) هي بنية هرمية حيث كل ودجة فرعية مضمنة داخل ودجة أب. Scaffold وAppBar وContainer وText وColumn وRow — هذه هي اللبنات الأساسية.

BuildContext هو كائن ينقل موقع الودجة في الشجرة. يحصل MediaQuery.of(context) على أبعاد الشاشة، ويحصل Theme.of(context) على السمة الحالية. يُستخدم BuildContext للتنقل (Navigator.of(context)) والوصول إلى InheritedWidget وترجمة الإعدادات المحلية عبر Localizations.of.

محرك Impeller

Impeller هو محرك العرض الحديث لـ Flutter، مكتوب بلغة C++ ويستخدم Metal (iOS/macOS) وVulkan (Android). على عكس Skia، الذي كان يعيد رسم كل إطار من الصفر، يقوم Impeller بتجميع التظليلات مسبقًا وتخزينها في ذاكرة تخزين مؤقت. وهذا يزيل التأخير أثناء العرض الأول للمشاهد المعقدة ويقلل الحمل على GPU.

تظهر اختبارات فريق Google Flutter أن Impeller يقلل وقت تجميع التظليلات من 200–500 مللي ثانية (Skia) إلى 1–3 مللي ثانية. على iPhone 13 Pro، يحقق العرض النبضي لـ Impeller 120 إطارًا في الثانية دون انقطاع. على Android مع Vulkan، يوفر 60 إطارًا في الثانية مستقرة حتى على الأجهزة متوسطة المدى (Xiaomi Redmi Note 12).

مثال على تطبيق Flutter

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(
      home: Scaffold(
        appBar: AppBar(title: const Text('تطبيق Flutter')),
        body: const Center(
          child: Text('مرحبًا، Flutter!'),
        ),
      ),
    );
  }
}

مزايا Flutter

قاعدة بيانات واحدة — الميزة الرئيسية لـ Flutter. مشروع Dart واحد يُجمّع لأنظمة iOS وAndroid وWeb وWindows وmacOS وLinux. وفقًا لـ Google، يقلل هذا وقت التطوير بنسبة 30–50% مقارنة بمشاريع iOS وAndroid المنفصلة. خفضت Alibaba وقت إصدار النسخ بنسبة 30% بعد الانتقال إلى Flutter.

الأداء لـ Flutter قريب من الأداء الأصلي. التجميع AOT لـ Dart إلى كود آلة ARM وx86_64 يلغي تأخيرات التفسير. يضمن محرك Impeller 60 إطارًا في الثانية حتى على أجهزة 2018 (iPhone XR وSamsung Galaxy S9). وفقًا لـ Google، 99.5% من الإطارات في تطبيقات Flutter تُعرض دون انقطاع.

Hot Reload — تقنية التحديث الفوري للكود. يغير المطور الكود المصدري ويحفظ الملف، ويعيد Flutter بناء شجرة الودجات في 300–800 مللي ثانية دون فقدان حالة التطبيق الحالية. وهذا يسرع تكرارات تصميم واجهة المستخدم: يمكن تغيير الهوامش والألوان والرسوم المتحركة في ثوانٍ دون انتظار إعادة بناء كاملة.

Material Design 3 ولغة التصميم الأصلية Cupertino (نمط iOS) مضمنتان في الحزمة القياسية لـ Flutter. تدعم ودجات Material 3 الألوان الديناميكية (Material You) والتخطيط المتجاوب ورسوم الانتقال بين الشاشات. تحاكي CupertinoPageTransition وCupertinoNavigationBar سلوك الملاح الأصلي في iOS.

التخصيص للودجات لا يتطلب إنشاء طرق عرض مخصصة لكل منصة. يكفي تجاوز build() وإعادة ودجة جديدة. تغطي حزم الرسوم المتحركة (AnimatedContainer وHero وTweenAnimationBuilder) والإيماءات (GestureDetector وDismissible) 95% من سيناريوهات رسوم واجهة المستخدم دون كتابة كود منصة.

النظام البيئي وحزم Flutter

pub.dev هو السجل الرسمي للحزم لـ Dart وFlutter. حتى يوليو 2024، هناك أكثر من 45,000 حزمة منشورة في السجل. يتم تثبيت الحزمة باستخدام الأمر flutter pub add <اسم_الحزمة>. يحل Pub التبعيات تلقائيًا ويتحقق من توافق الإصدارات ويُولد pubspec.lock.

إدارة الحالة في Flutter هي أحد التحديات المعمارية الرئيسية. إلى جانب flutter_bloc، تشمل الحلول الشائعة: Provider (موصى به من Google، يستخدم InheritedWidget) وRiverpod (نسخة معاد تصميمها من Provider مع أمان وقت التجميع) وGetX (كل شيء في واحد: الحالة والتوجيه وحقن التبعيات). يبقى Provider الأبسط للبدء: يغلف ChangeNotifierProvider النموذج، ويعيد Consumer بناء الودجة عند تغير البيانات.

الاختبار في Flutter مدعوم على ثلاثة مستويات. تتحقق اختبارات الوحدة (flutter test) من الوظائف والفئات بدون واجهة مستخدم. اختبارات الودجات (testWidgets) تعرض ودجات فردية في بيئة معزولة. اختبارات التكامل (IntegrationTest) تشغل التطبيق الكامل على جهاز أو محاكي. أضاف Flutter 3.22 دعم اختبارات التصحيح عبر تحليلات التصحيح وتحسين تقارير تغطية الكود.

الحزم الشائعة

dio هو عميل HTTP مع دعم للمعترضات والمهلات وFormData. يُستخدم في 40% من مشاريع Flutter على GitHub. يدعم Dio اعتراض الطلبات للتسجيل وإعادة المحاولة وإضافة رموز التفويض. ثاني أكثر مكتبة شيوعًا هي retrofit، التي تُولّد عملاء API مكتوبين بشكل صارم.

flutter_bloc هي مكتبة إدارة حالة تعتمد على نمط BLoC (مكون منطق الأعمال). يمرر BlocProvider الحالات إلى أسفل شجرة الودجات، ويعيد BlocBuilder بناء واجهة المستخدم عند تغير الحالة، ويتعامل BlocListener مع الآثار الجانبية (التنقل وSnackBar). Cubit هو نسخة مبسطة من BLoC بدون أحداث.

go_router هو تنقل تصريحي لـ Flutter من Google. تُوصف المسارات في تكوين GoRouter مع دعم المسارات المتداخلة وعمليات إعادة التوجيه والروابط العميقة. يقسم ShellRoute التنقل بين علامات تبويب BottomNavigationBar. يدعم GoRouter 14.0 المسارات الآمنة من حيث النوع وStatefulShellRoute مع حفظ حالة علامات التبويب.