Flutterdə app state | flutter_bloc

Hər bir mobil tətbiq hazırlayan developer gec ya tez app state ilə maraqlanmağa başlayır. İlk olaraq çətin gələn bu hissə sonradan mobil tətbiqin yaradılmasında əvəz olunmaz bir parçaya çevrilir. Bu belə də olmalıdır, əgər mobil tətbiqin hazırlanmasında ümumi bir state olmazsa o zaman həm onu tərtib etmək, idarə etmək, genişləndirmək, istifadə etmək mümkünsüz bir hala gəlir. 

Flutter üçün çox app state management üsulları var, Provider, Mobx, Redux, Bloc, GetX və s. Bunların içində isə Bloc məşhur olmuşdur. 

Bloc istifadə etməyə başlayanda ilk yaranan suallarda biri də bu olur ki, Bloc və Cubit arasındakı fərq nədir və hansını nə zaman istifadə etmək olar.

Bloc

Bloc istifadə etmək üçün biz ən azı 3 class yaratmalıyıq. Bloc-un özü, State və Event. Uİ hissədən bu blocda hər hansı bir dəyişlik etmək üçün isə biz Bloc-a eventi ötürürük və o öz növbəsində Bloc-da təyin etdiyimiz eventin metodunu çağırır, əməliyyat aparılır və metod çağırılan zaman ora ötürülən emit metoduna yeni state-i qeyd edirik ki, o da Uİ-da dəyişiklikləri göstərir. Təxmini sintaksis aşağıda göstərilmişdir.

BlocProvider.of<MyBloc>(context).add(ChangeColorEvent(Colors.red));

Burada biz MyBloc Blocuna ChangeColorEvent eventini ötürürük və bu eventə Colors.red veririk ki, bloc öz state-nə yeni qırmızı rəngi versin.  Burada biz çağırılan eventdən nəticə gösləmirik və dəyişiklik birbaşa BlocBuilder və ya BlocConsumer tərəfindən tutularaq görünür.

Bəs əgər bizə lazım olsa ki Blocun etdiyi dəyişiklikdən sonra əməliyyatın nəticəsinə əsasən Uİ dəyişiklikdən əlavə olaraq digər bir Bloc-da və ya daxili digər metodu çağırmaq lazımdır. Məsələn istifadə etdiyimiz Bloc indiki səhifəyə Uİ təsir etmir, ancaq indiki səhifənin altında olan səhifəyə təsir edir və Bloc-da çağırılan eventin nəticəsindən asılı olaraq biz əvvəlki səhifəyə qayıtmaq lazım olduğuna qərar verməliyik.  Bloc-u istifadə etməyə davam etsək bu biz BlocListener ilə tuta bilərik. O zaman ardıcıllıq belə olacaq. Eventi çağırırıq, nəticəni state-ə yazırıq və BlocListener ilə gələn nəticəyə baxıb qərar veririk. Ancaq gəlin razılaşaq ki, bir yerdə metodu çağırıb digər yerdə nəticəni gözləyib qərar vermək düzgün olmaz, həm də mobil tətbiqdə bir az çox belə hallar olarsa (belə hallar çox olur) çox qarışıq olacaq. Beləliklə biz Cubit-ə gəlib çıxdıq. 

Cubit

Cubit ilə Bloc arasında quruluş ve sintaksis fərqi var, iş prinsipi isə eynidir. Cubit yaratmaq üçün biz artıq 3 yox 2 class yaratmaqla kifayətlənə bilərik. Cubit və State. Uİ hissə isə dəyişməz qalır. Cubit-də hər hansı bir əməliyyat etmek üçün isə birbaşa onun daxilində təyin etdiyimiz metodları çağırırıq. Aşağıda göstərilən kimi.

BlocProvider.of<MyCubit>(context).changeColor(Colors.red);

Burada biz MyCubit Cubit-də birbaşa changeColor metodunu çağırdıq və sadəcə rəngi ötürdük. Bu qayda ilə çağırılan metodun nəticəsini biz adi qayda ilə əldə edə bilərik. Məsələn.

bool isChanged = BlocProvider.of<MyCubit>.changeColor(Colors.red);

if(isChanged){
  Navigator.pop(context);
} else {
  _showErrorDialog();
}

Burada biz Cubit-ə rəngi dəyişməyi dedik və əgər uğurla dəyişərsə əvvəlki səhifəyə qayıdırıq, əks halda səhv oldu deyə bir dialog göstəririk.

Bloc və Cubit arasında olan bu fərq performansa təsir etmədiyi üçün seçim həmin Bloc və ya Cubitin necə bir hallarda istifadə olunmasından asılıdır. Ancaq əksəriyyət Cubit istifadə edir, bunun da izahı çox sadədir, çünki istifadəsi sadə, rahat və başa düşüləndir. Həm də Cubit-de Bloc-da olan hər sey var. 

Bloc və Cubit-in mobil tətbiqə aşağıdakı kimi qoşmaq olar.

void main() async {
  runApp(MultiBlocProvider(
        providers: [
          BlocProvider.value(value: FirstCubit()),
          BlocProvider.value(value: SecondCubit()),
        ],
        child: MyApp(),
      ));
}

Bu qayda iıə Bloc və ya Cubit-i bu qayda ilə qoşduqda həmin Bloc və ya Cubit bütün tətbiq boyu aktiv olacaq. Ancaq elə hallar da ola bilər ki, bloc yalnız bir səhifə üçün lazım olsun və səhifəyə daxil olduqdan sonra bloc sıfırlanmalıdır. Bunu aşağıdakı kimi etmək olar.

Navifor.of(context).push(CupertinoPageRoute(builder: (context) => BlocProvider.value(
      value: FirstCubit(),
      child: FirstPage(),
    )));

Bu qayda ilə biz FirstPage -ə daxil olan zaman ora FirstCubit cubitini də təyin edirik və həmin səhifənin daxilində biz BlocBuilder istifadə edə bilərik.

Beləliklə biz bu məqalədə Bloc və Cubitin fərqi və onun app - da qoşulması barədə qısaca danışdıq. Daha ətraflı burada oxuya bilərsiniz.