اذا كنت تستخدم BLoC لادارة الحالة في تطبيقك فحتماً انت منزعج من تكرار Class لكل state وايضا مثلها لكل event, بالاضافة للكثير من الاكواد البرمجية للبدء في العمل على BLoC وايضاً عن التحقق من state تحتاج لكتابة الكثير من if والمقارنة بين الحالات والاسوء هو نسيان حالة او اسنادها الى غير محلها. لكن ليس بعد الان سنتعرف على كيف نستطيع الاستفادة من freezed مع bloc لكتابة كود رمجي سهل للقراءة وجمييييل ?.
اذا كنت ماتعرف BLoC يوجد موضوع عنها في المدونة وهنا بكتب اختصار مبسط لها.
هو باكج لادارة الحالة في التطبيق يساعدك على فصل UI عن BL بشكل سهل ومفهوم ويمكنك الوصول للحالة للتطبيق من اي مكان وهذي مميزات الباكج بحسب المبرمج لها
- سهل :
يمكن استخدامه من جميع المبرمجين باختلاف مهاراتهم البرمجية. - فعال :
يساعدك في تقسيم التطبيق لاجزاء صغيرة يمكن التعامل معها وفهمها. - قابل للاختبار :
يمكنك اختبار التطبيق من جميع الجوانب باسهل طريقة ممكنه.
اما بالنسبة لــfreezed فهو يقوم بانشاء اكواد برمجية بالنيابة عنك لاهم المتطلبات لأي كائن في البرمجة وهي
- toString : تساعدك في عملية
debuggingللتطبيق. - == : المقارنة والمساواة بين كائنين مختلفين.
- copyWith : نسخ الكائن مع وامكانية تحديث البيانات التي يحملها.
- sealed classes : مشابه للـ
enumولكن بمميزات اكثر وهو يستخدم نفس الكونسبت للغةkotlin.
بالاضافة لامكانية التعامل معJson.
دورة لغة kotlin.
تثبيت المتطلبات :
في البداية نحتاج الى اضافة الباكجات التالية في pubspec.ymal للبدء في توضيح المقصود.
dependencies:
flutter:
sdk: flutter
flutter_bloc: ^6.0.1
freezed_annotation: ^0.11.0
dev_dependencies:
flutter_test:
sdk: flutter
freezed: ^0.11.4انشاء Events باستخدام freezed :
عند انشاء Events باستخدام Freezed سيقوم باختصار الكثير من الاكواد البرمجية وسيقوم الباكج بانشاء الاكواد البرمجية المتبقية تلقائيا وتحويل Events الى كلاسات منفصلة.
@freezed
abstract class MoviesEvent with _$MoviesEvent {
const factory MoviesEvent.loadMovies() = MoviesLoadEvent;
}الان اصبح لدينا Event واحد لتحميل الافلام المشهورة مثلا.
انشاء State باستخدام Freezed :
كل Bloc لديه اكثر من State وتحتاج ساببقا قبل استخدام Freezed لكتابة كائن لكل State على حدة والكثير من الاكواد المكرره ولكن باستخدام الباكج سيقوم هو بانشاء الحالات لنا وسنحتاج فقط لكتابة بعض الاسطر بدون تكرار.
@freezed
abstract class MoviesState with _$MoviesState {
const factory MoviesState.loading() = _MoviesLoading;
const factory MoviesState.loaded(List<Movie> movies) = _MoviesData;
const factory MoviesState.failure(String error) = _MoviesFailure;
}لدينا هنا ٣ حالات عند بدء التحميل والبيانات العائدة او اذا كان هناك خطأ في تحميل البيانات.
ستظهر لديك العديد من الاخطاء عند استخدام Frezed لا تقلق فهذا بسبب انك تحتاج لبدء build runner لتوليد الاكواد
flutter pub run build_runnerاذا كنت تعدل في الكائنات وتريد من build runner متابعة التغيرات آليا استخدم watch بعد الامر السابق.
استخدام State في UI :
اذا انت مستخدم قبل لـBLoC فحتما كنت تستخدم if statement لادارة الحالات المختلفة ولكن هذه الطريقة متعبة ومكرره وايضا تحصل فيها اخطاء مثل نسيان حالة او اسنادها بطريقة خاطئة ولكن مع Freezed الطريقة اصبحت اسهل مع when فيقوم بشكل تلقائي باضافة جميع الحالات المتاحة بالاضافة اذا قمت بالتعديل على الحالات فسيقوم بتنبيهك بنسيان حالة معينة. ايضاً يساعدك في جعل الكود البرمجي قابل للقراءة والتعديل بشكل سهل جداً.
body: BlocBuilder<MoviesBloc, MoviesState>(
builder: (BuildContext context, MoviesState state) {
return state.when(
loading: () => CircularProgressIndicator(),
loaded: (movies) => ListView.builder(
itemCount: movies.length,
itemBuilder: (_, index) {
return Text(movies[index].title);
}),
failure: (error) => Text("$error"));
},
),هذا كان شرح سريع عن طريقة استخدام sealed classes مع BLoC بشكل مبسط وقابل للقراءة ومختصر لوقتك كمبرمج بالاضافة ان Freezed يحتوي على العديد من المميزات الاخرى يمكنك قراءة الصفحة الخاصة بالبكج لتكون على اطلاع.
