Flutter State Management
Selamlar✋
Bu yazımda aslında kendim için aldığım MobX kullanımı notlarımı sizlerle paylaşmaya karar verdim. Henüz bilgilerim çok yeni, bu yüzden çok basic bir anlatım olacak. Anlattıkça geliştiğimi düşündüğüm için(biraz da görev bilinci oluyor😇) kendime kattığım bilgiler MobX konusunda ilerledikçe bu yazının devamı gelecek. O zaman başlayalım!💃
MobX:
Basit ve ölçeklenebilir state yönetimi.
MobX yaklaşımını sadece bir framework ya da herhangi bir yere bağlı olarak düşünmek yanlış olur, MobX tamamiyle bir yönetim şeklidir.
Visual studio’da proje oluşturalım ve başlayalım!
● flutter create flutter_intro_mobx
● cd flutter_intro_mobx
● code .
Daha sonra mobx mimarisinin özelliklerini edinebilmek için mobx library’sini pubspec.yaml dosyamıza ekliyoruz. Bu sayede anlık build almayı sağlıyoruz.
Flutter’daki widgetlarda MobX kullanabilmek için flutter_mobx library’sini pubspec.yaml dosyamıza ekliyoruz. Ayrıca isterseniz vscode’da extensions kısmından da flutter mobx eklentisini kurabilirsiniz. Bu bize snippets getiriyor ve Observer’ı kolayca diğer widgetlarımıza sarmamızı sağlıyor.
Bir diğer paketimiz mobx_codegen. Bunu da pubspec.yaml klasörüne ekleyelim. Bu paketi eklememizin amacı da MobX kullanımını kolaylaştırmak için MobX koduna açıklama eklemek amacıyla @Observable, @computed, @action annotation’ları eklenmiş. Başka türlü annotation’ları kullanamıyoruz.
Note that these annotations only work inside store-classes.
(Annotationları sadece store classlarda kullanabilirsiniz)
Store class:
MobX’te store, ilgili observable state’i tek bir class altında toplamanın bir yoludur. Store, annotation’ları kullanmamıza olanak tanır ve kodu basit tutar.
Son olarak build runner paketini de ekleyelim ki g.dart dosyalarımız otomatik olarak oluşturulabilsin. Flutter ile mobx paketinin çalışma prensibi, yazılan mobx store classlarının, build runner paketiyle generator g.dart classlarını oluşturması diyebiliriz.
Artık klasörleme yapımıza geçebiliriz. Burada bir core, bir feature klasörü oluşturacağız. Feature’da ne yapacaksak ona göre sub klasör açacağız. Örneğin todo uygulaması için task olarak isimlendirebiliriz. Task klasörü de kendi içinde model, view ve view_model olarak genişletilecek(MVVM)).
Şimdi view içerisinde bir task_view.dart oluşturalım ve bu view bir StatelessWidget olsun.
Bir tane de model_view klasörü altında task_view_model.dart oluşturalım. Burada mobx yazacağız ve bize otomatik olarak dolduracak, klasik StatelessWidget veya StatefulWidget gibi isim soracak biz ismine TaskViewModel diyeceğiz.
★ Normalde flutter projesi oluşturduğumuzda bir sayaç var ve biz bu sayacı arttırıp ekranda görebiliyoruz. MobX ile bu nasıl yapılır şimdi buna bakalım.
Bir counter nesnesi var ve counter’ı değiştiren basic bir metot var. Burada dikkat edilecek nokta setState(), şimdi MobX ile nasıl yaparız ona bakalım.
Counter objesinin observable olan bir değişkene göre, tek veya çift olduğunun hesaplanmasını istiyorsak burada @computed anotation’ını kullanırız.
Değişkenimizi bir widget ile dinleyeceğimiz için counter variables’ını @observable anotation’ı ile kullanırız.
Değişkenimizi (counter) incrementCounter() metodu ile değiştireceğimiz için burada da @action anotation’ını kullanırız.
Yukarıda wrap with observer snippet’ından bahsetmiştik. TaskViewModel()’dan _viewModel adında nesne ürettik ve icon’a basıldığında _viewModel instance’ı ile incrementCounter() metoduna erişip counter’ı arttıracağız.
Neden Observer ile sardık çünkü observable anotationları değiştiğinde, Observer yeniden oluşturur ve işler. Counter da bir observable anotation’ı olduğu için burada Observer ile sarmak oldukça mantıklı.
Son olarak main’de çağıralım ve ilk MobX kodumuzu hayata geçirelim.
Basit bir şekilde klasik her yerde verilen bir örnekle aldığım notları sizlerle paylaşmış oldum. Umarım faydalı olmuştur. Bir sonraki yazımda görüşmek üzere. 🙋
