Flutter ­čĺÖ State Management Nedir?

Flutter ­čĺÖ

Merhabalar! MediumÔÇÖu kullanmakta biraz geciksem de bir yerden ba┼člamak laz─▒m dedim ve 2 y─▒ll─▒k Flutter geli┼čtirme deneyimimde ├Â─črendi─čim ve hayat─▒ ger├žekten kolayla┼čt─▒ran bilgiler veren yaz─▒lar yazaca─č─▒m. Ba┼člang─▒├ž seviyesi de─čil, orta ve ileri seviye bilgiler sizlerle olacak :)

├ľncelikle ilk yaz─▒m─▒ ÔÇśState ManagementÔÇÖ nam─▒ di─čer ÔÇśDurum Y├ÂnetimiÔÇÖ konusunda yazmaya karar verdim. Flutter ile tan─▒┼č─▒p yaz─▒l─▒m yazan arkada┼člar─▒n ÔÇśState ManagementÔÇÖ olay─▒n─▒ tam olarak anlayamad─▒─č─▒ ya da kafalar─▒n─▒n kar─▒┼čt─▒─č─▒n─▒ d├╝┼č├╝nd├╝─č├╝m i├žin bu yaz─▒y─▒ yazmak istedim.

Asl─▒nda i┼čin ├Âz├╝ tam olarak ┼ču Flutter ile uygulama geli┼čtirirken ekranda g├╝ncelleme yapmak istedi─čimiz yerleri StatefulWidget ile setState metoduyla ├žok g├╝zel yapabiliyoruz evet. Peki ya uygulaman─▒n her yerinde birden ├žok ve ger├žek zamanl─▒ bir g├╝ncelleme olmas─▒ gerekiyorsa ne yapaca─č─▒z? Her yeri setState ile g├╝ncellememiz biraz spagetti koda d├Ân├╝┼čebilir. ─░┼čte tam bu noktada ÔÇśState ManagementÔÇÖ ├ž├Âz├╝mleri ├ž─▒k─▒yor kar┼č─▒m─▒za.

State Management (Flutter D├Âk├╝man─▒ndan)

ÔÇśState ManagementÔÇÖ i├žin haz─▒rlanm─▒┼č bir├žok paket bulunmakta pub.dev adresinde. Bu paketlerin farkl─▒ farkl─▒ olmas─▒n─▒n bir├žok sebebi bulunmakta. ├ľrne─čin BLoC paketini kullan─▒rsan─▒z her bir state i├žin 3 farkl─▒ dosya ve bu dosyalar─▒n i├žinde birden ├žok defa fonksiyon yazman─▒z gerekecek. Basit ve sade bir uygulama isteyen biri BLoC paketinden ko┼čarak uzakla┼čs─▒n derim.

Ben orta seviye arkada┼člar─▒m i├žin Provider paketini kullanmalar─▒n─▒ ├Âneriyorum. Ben de FlutterÔÇÖa ba┼člad─▒─č─▒mdan beri kullan─▒yorum kendisini. Daha ├Ânce yapt─▒─č─▒m projelerin hi├žbirinde bir sorun ├ž─▒kartmad─▒. Flutter official d├Âk├╝man─▒nda da ÔÇśState ManagementÔÇÖ y├Ântemi se├žiminde s├Âylenilen bir s├Âz var. Hangisinin en iyi oldu─čunu de─čil senin hangisinde daha iyi oldu─čun ├Ânemli. Hangi y├Ântem senin i├žin en kolaysa o y├Ântemi se├žip proje mimarini olu┼čturabilirsin!

Bu nedenle Provider a├ž─▒k├žas─▒ bi├žilmi┼č kaftan. (Proje mimarisi i├žin de bir yaz─▒ yazaca─č─▒m.)

┼×imdi gelelim ProviderÔÇÖ─▒n ne oldu─čuna ve nas─▒l ├žal─▒┼čt─▒─č─▒na; (Anlat─▒m─▒ Flutter d├Âk├╝man─▒ndaki kodlar─▒ referans alarak yap─▒yorum.)

Bir stateful widget olu┼čturdu─čumuzda elimizde initState() dispose() ve build() gibi methodlar geliyor. Provider kullanmadan ekranda g├Âr├╝nen bir veriyi de─či┼čtirmek istedi─čimizde bunu setState() fonksiyonu i├žine ├ža─č─▒rarak yap─▒yoruz. Provider kulland─▒─č─▒m─▒zda ise buna hi├ž gerek kalm─▒yor.

Provider entegrasyonu ├Âncelikle kullanaca─č─▒m─▒z widgetÔÇÖ─▒n bir ├╝st widgetÔÇÖ─▒na ekleyece─čimiz ChangeNotifierProvider widgetÔÇÖ─▒ ile ba┼člar. Projenin t├╝m├╝nde kullanaca─č─▒m─▒z i├žin en ├╝st widget olan MaterialAppÔÇÖ─▒ ChangeNotifierProvider ile sarmal─▒yoruz. ChangeNotifierProviderÔÇÖ─▒n bir create fonksiyonu ve bir child widgetÔÇÖ─▒ mevcut. ChildÔÇÖ─▒ zaten bizim MaterialAppÔÇÖimiz olacak. Create fonksiyonunda ise ChangeNotifier ile extend edilmi┼č s─▒n─▒f─▒m─▒z d├Ând├╝r├╝lecek.

Bu ├Ârnekte sadece tek bir ChangeNotifier s─▒n─▒f─▒n─▒ ekledik. Peki birden fazla ChangeNotifier s─▒n─▒f─▒m─▒z varsa ne mi yapaca─č─▒z? ├ç├Âz├╝m basit, yine Provider paketi ile gelen MultiProvider widgetÔÇÖ─▒n─▒ kullanaca─č─▒z.

A┼ča─č─▒daki kod ├Ârne─činde de bir CartModel g├Âr├╝yorsunuz. Bu CartModel ise Flutter framework├╝nde bulundan ChangeNotifier ile extend edilmi┼č. Bu da demek ki ChangeNotifierÔÇÖ─▒n t├╝m fonksiyonlar─▒n─▒ art─▒k CartModelÔÇÖimizde kullanabiliriz.

┼×imdi gelelim buradaki de─či┼čiklikleri nas─▒l dinleyece─čimize. Consumer ad─▒ndaki bu hayat kurtar─▒c─▒ widgetÔÇÖ─▒m─▒z dinlenmek istenilen widget ile sarmalan─▒yor. Ancak bu widgetÔÇÖ─▒n child parametresine koydu─čunuz widget, dinleme yapmaz!!. Dinleyece─čimiz widgetÔÇÖ─▒ ConsumerÔÇÖ─▒n builder fonksiyonu i├žine yazmam─▒z gerekiyor. Builder i├žinde ChangeNotifier ile extend edilmi┼č s─▒n─▒f─▒m─▒zdaki t├╝m nesnelere ula┼čabilir ve dinleyebiliriz.

Burada ├Ânemli olan bir mesele daha var. ConsumerÔÇÖ─▒ yaln─▒zca de─či┼čtirmek istedi─činiz widget ile sarmalamal─▒s─▒n─▒z. E─čer a┼ča─č─▒daki ├Ârnekteki gibi yaparsan─▒z fazladan bellek kayb─▒na u─čram─▒┼č olursunuz, performans d├╝┼čer.

ProviderÔÇÖdan gelen verileri initState i├žinde widgetÔÇÖlar y├╝klenmeden ula┼čmak istiyorsan─▒z ├Ârnekteki gibi kullanabilirsiniz.

Vee geldik yaz─▒m─▒z─▒n sonunaÔÇŽ Umar─▒m yazd─▒klar─▒m ufac─▒k da olsa i┼činize yaram─▒┼čt─▒r. Konu hakk─▒ndaki herhangi bir sorunuz olursa hi├ž ├žekinmeden bana ula┼čabilirsiniz. Elimden geldi─či kadar─▒yla yard─▒mc─▒ olmaktan mutluluk duyar─▒m.

Sa─čl─▒kl─▒ g├╝nler dilerimÔÇŽ

Flutter Developer with ­čĺÖ

Flutter Developer with ­čĺÖ