الفرق بين BLoC و GetX في Flutter

الفرق بين BLoC و GetX في فلاتر: دليل شامل

لما تيجي تطور تطبيق بفلاتر، اختيار نظام إدارة الحالة المناسب (State Management) حاجة أساسية عشان التطبيق يكون سريع وسهل التعديل. من أشهر الحلول هما BLoC (Business Logic Component) وGetX. الاتنين هدفهم إنهم يديروا الحالة بشكل فعال، لكن الفرق كبير بينهم في طريقة التنفيذ والفكرة العامة واستخداماتهم.

يعني إيه BLoC؟

BLoC هو نظام لإدارة الحالة بيعتمد على Streams والبرمجة التفاعلية (Reactive Programming). فكرته إنه يفصل منطق العمل (Business Logic) عن واجهة المستخدم (UI)، وده بيخلي التطبيق منظم وسهل التطوير في المشاريع الكبيرة.

مثال باستخدام BLoC:

هناخد مثال على تطبيق بسيط لعداد:

// إنشاء CounterCubit
import 'package:flutter_bloc/flutter_bloc.dart';

class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);

  void increment() => emit(state + 1);
  void decrement() => emit(state - 1);
}

// استخدام Cubit في الواجهة
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => CounterCubit(),
      child: Scaffold(
        appBar: AppBar(title: Text('BLoC Counter')),
        body: BlocBuilder<CounterCubit, int>(
          builder: (context, count) {
            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Counter: $count'),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      IconButton(
                        icon: Icon(Icons.remove),
                        onPressed: () => context.read<CounterCubit>().decrement(),
                      ),
                      IconButton(
                        icon: Icon(Icons.add),
                        onPressed: () => context.read<CounterCubit>().increment(),
                      ),
                    ],
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

يعني إيه GetX؟

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

مثال باستخدام GetX:

هنعمل نفس مثال العداد باستخدام GetX:

// إنشاء CounterController
import 'package:get/get.dart';

class CounterController extends GetxController {
  var count = 0.obs;

  void increment() => count++;
  void decrement() => count--;
}

// استخدام Controller في الواجهة
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class CounterPage extends StatelessWidget {
  final CounterController controller = Get.put(CounterController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('GetX Counter')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Obx(() => Text('Counter: ${controller.count}')),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButton(
                  icon: Icon(Icons.remove),
                  onPressed: controller.decrement,
                ),
                IconButton(
                  icon: Icon(Icons.add),
                  onPressed: controller.increment,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

الفرق بين BLoC و GetX:

الميزة	BLoC	GetX
الكود المطلوب	محتاج إعدادات أكتر (زي Streams).	بسيط جدًا وتفاعلي.
سهولة الاستخدام	فيه شوية صعوبة في الأول.	سهل جدًا ومباشر.
الأداء	فعال بس ممكن يكون طويل.	أداء عالي وكود أقل.
أفضل استخدام	مشاريع كبيرة ومعقدة.	مشاريع صغيرة إلى متوسطة وسريعة التنفيذ.

تختار مين؟

لو شغلك مشروع كبير ومحتاج نظام نظيف وسهل التوسع، استخدم BLoC. لو شغلك سريع ومحتاج حاجة بسيطة وسريعة، اختار GetX. كل حل ليه مميزاته، واختيارك هيعتمد على حجم وتعقيد المشروع.

Tags:

فلاتر, إدارة الحالة, BLoC, GetX, تطوير تطبيقات, تطبيقات موبايل, برمجة, إدارة الحالة في فلاتر, دروس فلاتر