Flutter'da Bloc ve Cubit Kullanımı



Herkese selamlar,

Bugün sizlerle beraber Flutter'da State yönetim metotlarından olan Bloc ve Cubit'den, Bloc ile Route işlemlerinden, Bloc'lar arası iletişimden, BuildContext yapısı ile BlocProvider'ın ilişkisinden ve son olarak da Bloc 6.1.0 güncellemesinden bahsederek, örnek bir proje ile yazımı sonlandıracağım. Bazı kısımlarda kod açıklamalarıyla beraber yazdığım minik projeleri açıp beraber incelemeniz, konuyu anlamanıza daha yardımcı olacaktır. Umarım yazıyı sonuna kadar takip edebilirsiniz, çünkü güzel detaylara değinmeye çalıştım. Ve son olarak 2 adet örnek proje ile yazımı tamamladım. İyi okumalar :)


Neden setState metoduyla yetinemiyoruz?


Hepimizin ilk öğrendiği State yönetim metodu olan setState metoduyla tüm ekranımızın içerisindeki Component'ler tekrar çizilir. Birden fazla setState metodu çağrıldığında ise tekrar çizilmesine ihtiyaç duyulmayan Widget'lar da tekrar çizileceği için performansı kaybı yaşayabiliriz. Bunu önlemek, uygulamamızın mimarisini düzenlemek için bir diğer State yönetim şekli olan ve Google tarafından desteklenen Bloc'u veya onun basitleştirilmiş versiyonu olan Cubit'i kullanabiliriz.


Bloc'a Geçmeden Önce Bilmemiz Gerekenler


Future:

Tamamlanacağı söz verilmiş işleme asenkron işlem denir. Future kelimesi de bu işlemin tipidir. Diyelim ki bir fonksiyon size bir integer değer döndürsün. Future<int> size değerin elinize ulaşacağı ama ne zaman olduğu kesin bir şekilde olmayacağını belirtir. .then(){} şeklinde veya await kelimesiyle beraber gelen sonuca göre ne yapacağınızı belirtebilirsiniz.


Stream:

Stream yapısını anlamak için bir adet girişi ve çıkışı olan bir boruyu düşünebiliriz. Bir şeyi boruya attığımızda ne zaman çıkacağını bilmediğimiz bir sürece girer ama çıktığında elimizde bir ürün olur. Kısacası Stream, asenkron olan olayları kontrol eden bir akıştır.

Flutter'da kısaca:

  • Stream'deki işlemlerin kontrolünü StreamController sağlar.

  • Stream'e (akışa) bir şey yollandığında, StreamController'ın açmış olduğu girişe StreamSink adı verilir ve yine StreamController ile o girişte işlemler yapabiliriz.

  • Eğer bir şeyin Stream'den geçip geçmediğini anlamak istersek Stream yapısını StreamController sayesinde dinleyebiliriz.

  • Ne zaman bir listener tanımlandığımızda StreamSubscription objesi elde ederiz. Bu sayede Stream akışını dinleyebiliriz.

Aktif bir listener sayesinde Stream aktif olan StreamSubscription nesnelerine aşağıdaki olaylar gerçekleştiğinde bildirir:

  • Veri Stream'den geçerken

  • Hata Stream'e yollandığında

  • Stream kapatıldığında

Stream için konsolda çalışan minik bir örnek olarak counter uygulamasını yaptım ve setState'den kurtuldum, açıklamalarıyla beraber incelemek isterseniz:

https://github.com/elifbilgep/counter_stream


Reactive Programlama:

Reactive Programlama asenkron gerçekleşen stream yapılarının çalışma biçimine verilen genel addır. Flutter'da Reactive bir şekilde çalışır. Böylelikle Widget'ların State'lerini takip edebilir ve UI'ı etkin bir şekilde kullanabiliriz.