Flutter في تطوير التطبيقات المحمولة: ما هو، المفاهيم الرئيسية وكيف يعمل

Flutter: أساسيات Widget وStatelessWidget وStatefulWidget

Widget — وصف تصريحي لجزء من واجهة المستخدم. كل شيء في Flutter هو Widget: من زر إلى التطبيق نفسه. Widget هو تكوين (وليس واجهة المستخدم نفسها). StatelessWidget — Widget غير قابل للتغيير. يتم استدعاء build() مرة واحدة. ليس له حالة. يُستخدم للمحتوى الثابت. StatefulWidget — Widget قابل للتغيير. لديه كائن State يمكن أن يتغير. setState() — يؤدي إلى إعادة البناء. State — كائن قابل للتغيير مرتبط بـ StatefulWidget. يحتوي على بيانات يمكن أن تتغير.

StatelessWidget مقابل StatefulWidget

StatelessWidget — يتم استدعاء build() مرة واحدة. مناسب للعناوين والأيقونات والنصوص الثابتة. StatefulWidget — يتم استدعاء build() في كل مرة يتم فيها استدعاء setState(). مناسب للنماذج والقوائم مع التغييرات والمؤقتات. InheritedWidget — تمرير البيانات للأسفل دون تمرير صريح عبر المنشئات. Theme وMediaQuery وNavigator — InheritedWidgets. BuildContext — موقع Widget في الشجرة. context.of<T> وcontext.watch<T> وcontext.select<T,R> — الوصول إلى InheritedWidget.

// مثال Flutter Widget: StatefulWidget مع setState
class CounterWidget extends StatefulWidget {
  const CounterWidget({Key? key}) : super(key: key);

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Counter')),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pushed the button:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Widget — تكوين. StatelessWidget — غير قابل للتغيير. StatefulWidget — قابل للتغيير مع setState(). توصي IT Sectr بالبدء بـ StatelessWidget والتحول إلى StatefulWidget فقط عند الحاجة إلى حالة.

الأشجار (Widget Tree وElement Tree وRenderObject Tree)

يستخدم Flutter ثلاث أشجار للعرض الفعال. Widget Tree — شجرة التكوين. يتم إنشاء Widgets بشكل متكرر (كل build)، خفيفة الوزن. Element Tree — شجرة العناصر. عنصر واحد لكل Widget (إذا لم يتغير النوع). Element — جسر بين Widget وRenderObject. RenderObject Tree — شجرة العرض. تتعامل مع الأحجام والمواضع والرسم. RenderObject — ثقيل، يُنشأ نادرًا. يقارن Flutter Widget Tree ويُحدّث Element Tree، مما يؤدي إلى تحديث RenderObject Tree.

Keys وElement Tree

Key — معرف Widget في Element Tree. ValueKey وObjectKey وUniqueKey وPageStorageKey. تسمح Keys لـ Flutter بمطابقة Widgets القديمة والجديدة أثناء إعادة البناء. بدون Keys، يطابق Flutter حسب نوع Widget وموقعه. GlobalKey — الوصول إلى State من Widget آخر. يُستخدم لـ: النماذج المعقدة والرسوم المتحركة والوصول إلى State في الاختبارات. توصي IT Sectr باستخدام Keys للقوائم (List.generate) وتجنب GlobalKey إلا عند الضرورة.

Expanded — Widget يملأ المساحة المتاحة في Row/Column/Flex. Flexible — لا يجبر على الملء (يمكن أن يكون أصغر). MediaQuery — InheritedWidget بمعلومات الجهاز: حجم الشاشة والاتجاه والمنصة وعامل قياس النص. Theme/ThemeData — سمة مركزية. Theme.of(context) — الوصول. MaterialApp — Widget جذر لتكوين التوجيه والسمات والإعدادات المحلية. Scaffold — تخطيط أساسي مع AppBar وDrawer وBottomNavigationBar. AppBar — اللوحة العلوية.

التنقل (Navigator وRoute)

Navigator — مكدس المسارات (Routes). Navigator.push — فتح شاشة (يُرجع Future). Navigator.pop — إغلاق (بنتيجة). MaterialPageRoute — انتقال متحرك (انزلاق من اليمين). Named Routes — معرفات نصية. onGenerateRoute — معالج مركزي. Navigator 2.0 (Router + RouteInformationParser + RouterDelegate) — تنقل تصريحي للويب والروابط العميقة والسيناريوهات المعقدة.

Navigator 2.0

Navigator 2.0 — تنقل تصريحي. Router — Widget مركزي. RouteInformationParser — تحليل URL. RouterDelegate — إدارة المكدس. GoRouter (حزمة) — غلاف مبسط فوق Navigator 2.0. يدعم: المسارات المسماة والمعلمات وإعادة التوجيه والروابط العميقة. توصي IT Sectr باستخدام GoRouter لمعظم المشاريع وNavigator 2.0 فقط للسيناريوهات المعقدة (الويب وسطح المكتب).

اللا تزامن (FutureBuilder وStreamBuilder)

FutureBuilder — Widget يبني واجهة المستخدم بناءً على Future. connectionState: none وwaiting وactive وdone. يُستخدم لـ: طلبات HTTP وقراءة قواعد البيانات والمؤقتات. StreamBuilder — Widget لـ Stream (تدفق بيانات لا نهائي). snapshot.data وsnapshot.hasError وsnapshot.hasData. يُستخدم لـ: WebSocket وFirebase وتحديثات الموقع. يتم إعادة بناء كلا Widgets عند استلام بيانات جديدة.

إدارة الحالة

Provider — حقن تبعيات بسيط + إدارة حالة. ChangeNotifierProvider وMultiProvider. Riverpod — بديل حديث لـ Provider: آمن في وقت الترجمة ومستقل عن BuildContext. Bloc — بنية Event-Driven: Cubit (أحداث بسيطة) مقابل Bloc (معقدة). GetX — إدارة حالة خفيفة + حقن تبعيات + توجيه. setState — الأبسط، للحالة المحلية. توصي IT Sectr باستخدام Riverpod للمشاريع الجديدة وProvider للمشاريع القائمة.

السمات والتكيف (MediaQuery وThemeData)

MediaQuery — حجم الشاشة والاتجاه والمنصة وtextScaleFactor. MediaQuery.of(context).size.width. ThemeData — سمة التطبيق: الألوان والخطوط والأشكال. Theme.of(context).textTheme.bodyLarge. Hot Reload — حقن الكود في تطبيق قيد التشغيل. يحافظ على الحالة. لا يدعم: تغيير main() والمتغيرات العامة والحقول الثابتة. Hot Restart — إعادة تشغيل كاملة للتطبيق (فقدان الحالة). Hot Reload — الميزة الرئيسية لـ Flutter للمطورين.

StatelessWidget — للمحتوى الثابت. StatefulWidget — للمحتوى الديناميكي. InheritedWidget — لحقن التبعيات. توصي IT Sectr باستخدام StatelessWidget افتراضيًا وStatefulWidget فقط عند الضرورة.

تخطيط متجاوب

LayoutBuilder — التكيف مع أبعاد العنصر الأب. OrientationBuilder — التكيف مع الاتجاه. Expanded مقابل Flexible — توزيع المساحة في Row/Column. MediaQuery — نقاط الفصل للأجهزة اللوحية وأجهزة سطح المكتب. SafeArea — هوامش من عناصر النظام (النتف وشريط الحالة). AspectRatio — الحفاظ على النسب. توصي IT Sectr باستخدام LayoutBuilder للتخطيطات المتكيفة وOrientationBuilder للاتجاه الأفقي.

الاختبار (Widget وIntegration وUnit)

اختبارات الوحدة — اختبار منطق الأعمال والمستودعات والنماذج. dart test — التشغيل. اختبارات Widget — اختبار الأدوات بشكل معزول. WidgetTester — pumpWidget وtap وenterText. اختبارات التكامل — سيناريوهات كاملة على جهاز/محاكي حقيقي. Mockito — إنشاء كائنات وهمية للتبعيات. Golden tests — مقارنة لقطات الشاشة (ملفات golden). توصي IT Sectr باختبارات Widget لكل شاشة واختبارات الوحدة لمنطق الأعمال.

void main() {
  testWidgets('Counter increments on tap', (tester) async {
    await tester.pumpWidget(const MaterialApp(home: CounterWidget()));

    expect(find.text('0'), findsOneWidget);

    await tester.tap(find.byType(FloatingActionButton));
    await tester.pump();

    expect(find.text('1'), findsOneWidget);
  });
}

الرسوم المتحركة (ضمنية وصريحة وHero)

الرسوم المتحركة الضمنية — AnimatedContainer وAnimatedOpacity وAnimatedPadding وTweenAnimationBuilder. تتغير خصائصها تلقائيًا بحركة. الرسوم المتحركة الصريحة — AnimationController مع Tween. forward() / reverse(). رسوم Hero — Widget Hero مع علامة — رسوم انتقال بين الشاشات. الرسوم المتدرجة — سلسلة رسوم مع Interval. Lottie — دمج رسوم After Effects. Rive — رسوم تفاعلية (آلة حالة). توصي IT Sectr باستخدام AnimatedContainer لـ 80% من الحالات وAnimationController للسيناريوهات المعقدة.

class AnimatedBox extends StatefulWidget {
  @override
  State<AnimatedBox> createState() => _AnimatedBoxState();
}

class _AnimatedBoxState extends State<AnimatedBox> {
  bool _expanded = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() => _expanded = !_expanded),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
        width: _expanded ? 200 : 100,
        height: _expanded ? 200 : 100,
        color: _expanded ? Colors.blue : Colors.red,
        child: const Center(child: Text('Tap me')),
      ),
    );
  }
}

الشبكات (http وdio وgraphql)

http — عميل HTTP بسيط (get وpost وput وdelete). dio — عميل متقدم مع معترضات ومهلات وإعادة محاولة وتسجيل. graphql_flutter — عميل GraphQL لـ Flutter. json_serializable — توليد fromJson/toJson عبر التعليقات التوضيحية. Retrofit Dart — عميل HTTP type-safe مثل Retrofit. WebSocket — عبر web_socket_channel. Firebase — Cloud Firestore وRealtime Database وCloud Functions. توصي IT Sectr باستخدام dio لـ REST API وgraphql_flutter لـ GraphQL.

Flutter DevTools — مجموعة أدوات: Inspector (شجرة الأدوات) وTimeline (الأداء) وMemory وNetwork وLogging. Profile mode — تنميط بدون تصحيح. Performance overlay — FPS وأوقات البناء. Flame chart — مخطط اللهب. DevTools — أداة أساسية لتحسين تطبيقات Flutter في الإنتاج.

Flutter Web — ترجمة Flutter إلى WASM (WebAssembly). CanvasKit (Skia) مقابل HTML renderer. CanvasKit — دقة بكسل كاملة لكنه أثقل. HTML renderer — خفيف لكن مع قيود. WASM (Flutter 3.22+) — أداء أصلي. تكيف متجاوب عبر LayoutBuilder وMediaQuery. توصي IT Sectr باستخدام CanvasKit لتطبيقات الويب المكتبية وHTML renderer للمواقع المحتواية.