📁 الملف: notes_state.dart
🧠 أولاً: ما هو هذا الملف؟
State = تمثيل حالة التطبيق في لحظة معينةDart🎯 هذا الملف مسؤول عن:
👉 إخبار الـ UI:
- هل نحن نحمل البيانات؟
- هل وصلت البيانات؟
- هل يوجد خطأ؟
📄 الكود
import 'package:supabase_app_1/features/notes/domain/entities/note.dart';
abstract class NotesState {}
class NotesInitial extends NotesState {}
class NotesLoading extends NotesState {}
class NotesLoaded extends NotesState {
final List<Note> notes;
NotesLoaded(this.notes);
}
class NotesError extends NotesState {
final String message;
NotesError(this.message);
}Dart🔍 الآن نشرح كل جزء بالتفصيل
🧱 1. import Note
import 'package:supabase_app_1/features/notes/domain/entities/note.dart';Dart🧠 لماذا؟
👉 لأننا سنستخدم:
List<Note>Dartداخل:
NotesLoadedDart🎯 يعني:
الحالة الناجحة تحتوي بياناتDart🧱 2. abstract class NotesState
abstract class NotesState {}Dart🧠 هذا أهم سطر في الملف
🎯 ماذا يعني abstract؟
👉 لا يمكن إنشاء object منه
💡 لماذا نستخدمه؟
لأنه:
NotesState = الأب لكل الحالاتDart🧠 يعني:
Initial
Loading
Loaded
ErrorDartكلهم:
👉 نوعهم NotesState
💥 هذا يسمح لـ Cubit أن يقول:
emit(NotesState)Dart🧱 3. NotesInitial
class NotesInitial extends NotesState {}Dart🧠 معناها:
الحالة الابتدائية (قبل أي عملية)Dart🎯 متى تستخدم؟
عند إنشاء Cubit:
super(NotesInitial())Dart💡 UI ممكن يعرض:
- شاشة فارغة
- Placeholder
🧱 4. NotesLoading
class NotesLoading extends NotesState {}Dart🧠 معناها:
جاري تحميل البياناتDart🎯 متى تظهر؟
emit(NotesLoading());Dart💡 UI يعرض:
CircularProgressIndicator()Dart🧱 5. NotesLoaded 🔥
class NotesLoaded extends NotesState {
final List<Note> notes; NotesLoaded(this.notes);
}Dart🧠 أهم حالة في التطبيق
🔍 نشرحها:
🔹 extends NotesState
👉 يعني:
هذه حالة من حالات النظامDart🔹 final List<Note> notes
👉 البيانات الفعلية
💡 لماذا List؟
لأن:
عندنا عدة ملاحظاتDart🔹 NotesLoaded(this.notes)
👉 constructor
🎯 عند الاستخدام:
emit(NotesLoaded(notes));Dart🧠 ماذا يحدث؟
👉 Cubit يقول:
تم تحميل البيانات وهذه هيDart💡 UI يعمل:
if (state is NotesLoaded)Dartثم:
state.notesDart🧱 6. NotesError
class NotesError extends NotesState {
final String message; NotesError(this.message);
}Dart🧠 معناها:
حدث خطأDart🔍 نشرحها:
🔹 final String message
👉 نص الخطأ
🔹 constructor
NotesError(this.message);Dart🎯 الاستخدام:
emit(NotesError("Network error"));Dart💡 UI يعرض:
Text(state.message)Dart🔁 كيف تستخدم هذه الحالات مع Cubit
داخل Cubit:
emit(NotesLoading());
emit(NotesLoaded(notes));
emit(NotesError(error));Dartداخل UI:
BlocBuilder<NotesCubit, NotesState>(
builder: (context, state) {
if (state is NotesLoading) {
return CircularProgressIndicator();
} if (state is NotesLoaded) {
return ListView(...);
} if (state is NotesError) {
return Text(state.message);
}
},
)Dart💥 لماذا هذا التصميم عبقري؟
🎯 1. كل حالة منفصلة
لا يوجد if داخل الكلاسDart🎯 2. UI بسيط جداً
if (state is ...)Dart🎯 3. لا يوجد خلط
Loading ≠ Data ≠ ErrorDart🧠 ملاحظة احترافية (مستوى أعلى)
ممكن لاحقاً تضيف:
class NotesEmpty extends NotesState {}Dart👉 إذا لا يوجد بيانات
أو:
class NotesRefreshing extends NotesState {}Dart🔥 الخلاصة
🎯 هذا الملف:
يمثل "جميع حالات الشاشة"Dart🧠 الجملة الذهبية:
State describes UI at any momentDart