إضافة اشعار اضافة ملاحظة

Cubit يغيّر الحالة → UI يسمع → UI يعرض SnackBar

Cubit يغيّر الحالة → UI يسمع → UI يعرض SnackBar

class NoteAdded extends NotesState {}

class NoteAdded extends NotesState {}

abstract class NotesState {}

class NotesInitial extends NotesState {}

class NotesLoading extends NotesState {}

class NotesLoaded extends NotesState {
  final List<Note> notes;
  NotesLoaded(this.notes);
}

/// 👇 جديدة
class NoteAdded extends NotesState {}

class NotesError extends NotesState {
  final String message;
  NotesError(this.message);
}

abstract class NotesState {}

class NotesInitial extends NotesState {}

class NotesLoading extends NotesState {}

class NotesLoaded extends NotesState {
  final List<Note> notes;
  NotesLoaded(this.notes);
}

/// 👇 جديدة
class NoteAdded extends NotesState {}

class NotesError extends NotesState {
  final String message;
  NotesError(this.message);
}

نحتاج "إشارة" للـ UI أن العملية نجحت

نحتاج "إشارة" للـ UI أن العملية نجحت

Future<void> addNote(Note note) async {
  try {
    await addNoteUseCase(note);

    /// 👇 إشعار النجاح
    emit(NoteAdded());

    /// 👇 تحديث البيانات
    fetchNotes();
  } catch (e) {
    emit(NotesError(e.toString()));
  }
}

Future<void> addNote(Note note) async {
  try {
    await addNoteUseCase(note);

    /// 👇 إشعار النجاح
    emit(NoteAdded());

    /// 👇 تحديث البيانات
    fetchNotes();
  } catch (e) {
    emit(NotesError(e.toString()));
  }
}

1. أضفنا Note
2. أرسلنا حالة نجاح
3. بعدها حدثنا القائمة

1. أضفنا Note
2. أرسلنا حالة نجاح
3. بعدها حدثنا القائمة

BlocListener<NotesCubit, NotesState>

BlocListener<NotesCubit, NotesState>

return BlocListener<NotesCubit, NotesState>(
  listener: (context, state) {

    /// 👇 عند النجاح
    if (state is NoteAdded) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text("تمت إضافة الملاحظة بنجاح"),
        ),
      );
    }

    /// 👇 عند الخطأ
    if (state is NotesError) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text(state.message),
        ),
      );
    }
  },

  child: Scaffold(
    appBar: AppBar(title: const Text("الملاحظات")),
    body: ...
  ),
);

return BlocListener<NotesCubit, NotesState>(
  listener: (context, state) {

    /// 👇 عند النجاح
    if (state is NoteAdded) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text("تمت إضافة الملاحظة بنجاح"),
        ),
      );
    }

    /// 👇 عند الخطأ
    if (state is NotesError) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text(state.message),
        ),
      );
    }
  },

  child: Scaffold(
    appBar: AppBar(title: const Text("الملاحظات")),
    body: ...
  ),
);

BlocBuilder = يعيد بناء UI
BlocListener = ينفذ actions (مثل SnackBar)

BlocBuilder = يعيد بناء UI
BlocListener = ينفذ actions (مثل SnackBar)

AddNotePage
 ↓
Cubit.addNote()
 ↓
emit(NoteAdded)
 ↓
NotesPage يسمع
 ↓
SnackBar يظهر

AddNotePage
 ↓
Cubit.addNote()
 ↓
emit(NoteAdded)
 ↓
NotesPage يسمع
 ↓
SnackBar يظهر

SnackBar يحتاج ScaffoldMessenger

SnackBar يحتاج ScaffoldMessenger

AddNotePage
 ↓
Cubit.addNote()
 ↓
emit(NoteAdded)
 ↓
NotesPage يسمع
 ↓
SnackBar يظهر

AddNotePage
 ↓
Cubit.addNote()
 ↓
emit(NoteAdded)
 ↓
NotesPage يسمع
 ↓
SnackBar يظهر

Cubit → emit
Listener → show SnackBar

Cubit → emit
Listener → show SnackBar

Side effects go in BlocListener, not in UI buttons

Side effects go in BlocListener, not in UI buttons