إدارة الحالة (BLoC & Cubit) State Management (BLoC & Cubit)

الـ BLoC (Business Logic Component) هو المعيار الذهبي في تطبيقات Flutter الكبيرة. فايدته إنه بيفصل "إيه اللي بيحصل" عن "إزاي بيتعرض".

BLoC is the gold standard in large Flutter apps. Its main benefit is separating "what happens" from "how it's displayed".

في MRE CashBook، إحنا بنتبع قاعدة صارمة: كل ميزة لازم تتقسم لـ 3 ملفات منفصلة. ده بيخلي الكود منظم جداً وسهل يتجرب (Testable).

أقوى حاجة في الـ BLoC بتاعنا إنه "مشاكس"، دايماً مراقب الداتابيز. بص على الكود ده:

void _onLoadBooks(LoadBooks event, Emitter emit) {
  emit(const BooksLoading());
  _booksSubscription?.cancel();
  _booksSubscription = _repository.watchBooks().listen(
    (books) => add(BooksUpdated(books)),
  );
}

لو فتحت اشتراك (Subscription) ونسيت تقفله، الأبلكيشن هيحرق رامات الموبايل لغاية ما يقفل. عشان كدة لازم نستخدم close().

@override
Future close() {
  _booksSubscription?.cancel(); // لازم تقفل الحنفية!
  return super.close();
}

في المشروع ده، إحنا بنستخدم النوعين. كل واحد ليه وقته ومكانه:

في MRE CashBook، بنستخدم الـ sealed classes عشان نضمن إننا مغطيين كل الاحتمالات الممكنة للشاشة.

sealed class BooksState extends Equatable {
  const BooksState();
  @override
  List get props => [];
}

class BooksInitial extends BooksState { const BooksInitial(); }
class BooksLoading extends BooksState { const BooksLoading(); }
class BooksLoaded extends BooksState {
  final List books;
  final bool isPrivacyModeOn;

  const BooksLoaded({required this.books, required this.isPrivacyModeOn});

  @override
  List get props => [books, isPrivacyModeOn];
}

إزاي الشاشة بتعرف إن فيه BLoC أصلاً؟ عن طريق الـ BlocProvider و BlocBuilder.

BlocBuilder(
  builder: (context, state) {
    return switch (state) {
      BooksLoading() => const AppLoadingWidget(),
      BooksLoaded(books: var items) => BooksList(items: items),
      BooksError() => ErrorWidget(state.message),
      _ => const SizedBox.shrink(),
    };
  },
)

تعالوا نتتبع اللي بيحصل لما اليوزر يضغط "إضافة كتاب":

إيه الفرق بين إنك "تبني شاشة" (Build) وبين إنك "تطلع رسالة" (Action)؟

BlocListener(
  listener: (context, state) {
    if (state is AddBookSuccess) {
      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Success!')));
      Navigator.pop(context); // قفل الصفحة بعد النجاح
    }
  },
  child: const AddBookForm(),
)

عشان نتطمن إن البلوك شغال صح، بنستخدم مكتبة bloc_test. ده شكل الاختبار:

blocTest(
  'يجب أن يخرج BooksLoaded عند استلام BooksUpdated',
  build: () => BooksBloc(repository: mockRepo),
  act: (bloc) => bloc.add(const BooksUpdated([mockBook])),
  expect: () => [
    isA().having((s) => s.books.length, 'length', 1),
  ],
);

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

تخيل يوزر ضغط على زرار "إضافة" 10 مرات في ثانية واحدة. لو معملناش حسابنا، الداتابيز هتتملي داتا مكررة. الـ BLoC بيحل ده بالـ Transformers.

import 'package:bloc_concurrency/bloc_concurrency.dart';

// في الـ Constructor بتاع البلوك
on(
  _onAddBook,
  transformer: droppable(), // "طنش" أي Event جديد لغاية ما القديم يخلص
);

لو عندك شاشة فيها 100 معلومة، والـ BLoC طلع State جديدة فيها معلومة واحدة بس اللي اتغيرت، ليه نعيد بناء الشاشة كلها؟ هنا بييجي دور الـ BlocSelector.

BlocSelector(
  selector: (state) {
    if (state is BooksLoaded) return state.isPrivacyModeOn;
    return false;
  },
  builder: (context, isPrivacyModeOn) {
    // الـ Widget ده مش هيعمل rebuild إلا لو الـ isPrivacyModeOn اتغيرت بس!
    return PrivacyIcon(isOn: isPrivacyModeOn);
  },
)

ده بيخلي الأبلكيشن "خفيف" جداً حتى على الموبايلات القديمة.

حاول تلاقي الغلطة في الكود ده:

تخيل اليوز غير الـ Theme أو قفل الـ Privacy Mode، وقفل الأبلكيشن فتحه تاني. إزاي بنضمن إن الاختيارات دي متتمسحش؟ الحل هو Hydrated BLoC.

class SettingsBloc extends HydratedBloc {
  // ...
  @override
  SettingsState? fromJson(Map json) => SettingsState.fromMap(json);

  @override
  Map? toJson(SettingsState state) => state.toMap();
}

عشان نعرف إيه اللي بيحصل في كل الـ Blocs بتاعة الأبلكيشن في نفس الوقت، بنستخدم الـ BlocObserver. ده زي "كاميرا مراقبة" لكل الشاشات.

class AppBlocObserver extends BlocObserver {
  @override
  void onChange(BlocBase bloc, Change change) {
    super.onChange(bloc, change);
    log('Change in ${bloc.runtimeType}: $change');
  }

  @override
  void onError(BlocBase bloc, Object error, StackTrace stackTrace) {
    log('Error in ${bloc.runtimeType}: $error');
    super.onError(bloc, error, stackTrace);
  }
}

بمجرد ما نربطه في الـ main.dart، أي Error هيحصل في أي مكان في البرنامج هيظهر لنا في الـ Console فوراً مع اسم البلوك اللي حصل فيه المشكلة.

مش كل حاجة محتاجة BLoC. عشان تكون مهندس شاطر، لازم تختار الأداة الصح للمكان الصح:

إزاي بنستخرج الداتا من الـ BLoC جوه الـ Widgets؟ إحنا عندنا 3 طرق سحرية:

// ❌ غلط: متستخدمش watch جوه onPressed
onPressed: () => context.watch().add(LoadBooks()),

// ✅ صح: استخدم read جوه الـ callbacks
onPressed: () => context.read().add(LoadBooks()),

ليه في CashBook اختارنا BLoC بالذات؟ بص على المقارنة دي:

الـ BLoC بيكريه "نظام" (System) إجباري. وده اللي بنحتاجه في المشاريع اللي فيها مطورين كتير أو داتا مالية حساسة.

عشان نختبر الـ BLoC من غير ما نلمس الداتابيز الحقيقية، بنستخدم الـ Mocking. بنعمل "نسخة مزيفة" من الـ Repository ونقولها تتصرف إزاي.

import 'package:mocktail/mocktail.dart';

class MockBookRepository extends Mock implements IBookRepository {}

// جوه التست
final mockRepo = MockBookRepository();
when(() => mockRepo.watchBooks()).thenAnswer((_) => Stream.value([mockBook]));

أحياناً بنحتاج "نفلتر" الـ Events قبل ما تروح للـ Handler. مثلاً مش عاوزين نعمل LoadBooks لو هي أصلاً بتحمل حالياً.

void _onLoadBooks(LoadBooks event, Emitter emit) {
  if (state is BooksLoading) return; // فلترة: لو بنحمل، طنش الـ Event ده
  
  emit(const BooksLoading());
  // ... بقية المنطق
}

ده بيمنع "الرعشة" (UI Flickering) وبيخلي الأبلكيشن يحس بالاستقرار والقوة.

خلاصة الخبرة في التعامل مع الـ BLoC في المشاريع الضخمة:

• أبداً متعملش navigation جوه الـ BLoCHandler. استخدم BlocListener.
• أبداً متسميش الـ States بأسماء أفعال (مثلاً LoadingData غلط، BooksLoading صح).
• دائماً ابدأ الـ State بـ Initial عشان تفرق بين أول مرة والتحديثات.
• دائماً استخدم الـ export في ملف الـ Bloc عشان تسهل الـ Import على بقية الـ Widgets.

قبل ما تقفل الفصل ده، اتأكد إنك استوعبت النقط دي:

إدارة الحالة هي "الجهاز العصبي" للتطبيق. إحنا كدة بنينا "الذاكرة" (Chapter 4) و"المخ" (Chapter 5). فاضل نعرف إزاي بنربطهم ببعض من غير ما نكتب كود كتير مكرر.

في الفصل الجاي، هنتعلم عن حقن التبعيات (Dependency Injection) باستخدام GetIt، وده اللي هيخلينا نقدر نستخدم الـ BLoCs والـ Repositories في أي مكان بسهولة.

إدارة الحالة هي الروح اللي بتخلي الصور الثابتة تطبيق شغال. BLoC هو اختيارنا الاستراتيجي للاستقرار.