Flutter Bloc with Album Story

Herkese merhabalar, bu yazımda Flutter ile bloc patterni amacını ve nasıl kullanılacağını inceleyeceğiz. Ve ardından beraber fotoğraflarımızı görebileceğimiz bir albüm projesi oluşturacağız.

Neler konuşacağız?

• Bloc Nedir ?
• Bloc Pattern nasıl kullanılır ?
• Album projesi ile Bloc pattern

BloC

Business logic components (BLoC) açılımı ile birlikte google ekipleri tarafından tavsiye edilen ve flutter projelerimizde ilerleyişi sağlarken business ve view arasındaki iletişimi sağlayarak uygulamızın performansını güçlendirmeye yardımcı olur.

Cubit vs Bloc

Cubit ve Bloc sınıflarının temellerini ele aldığımıza göre, Cubit’i ne zaman ve Bloc’u ne zaman kullanmanız gerektiğini merak ediyor olabilirsiniz.

Cubit, olaylara dayanmayan ve bunun yerine yeni durumları yaymak için yöntemler kullanan BLoC paketinin bir alt kümesidir. Basit durumlar için Cubit’i kullanabiliriz ve gerektiğinde Bloc’u kullanabiliriz.

Stream Nedir ?

Stream’leri asenkron durumlar olarak adlandırabiliriz. Bir event hazır olduğunda söyler ve gerekli işlemlerin başlatılmasını sağlar.

StreamBuilder Nedir ?

Stream’den gelen veriler hazır olduğunda ve her yeni veri geldiğinde, builder fonksiyonunu tekrar çağırılır ve widget ağacını tekrar çizdirir. Bu sayede bir değişiklik olması durumunda anlık olarak ekrana yansıması sağlanır.

Photo Album with Bloc

Bunlar harici diğer proje bağımlı paketlerimiz pubspec.yaml dosyasındadır

Projemize başlarken gerekli paketlerimiz pub.dev aracılığıyla ekliyoruz.

Projemizin klasör yapısı yanda verilmiş üzere core ve feature ana katmanları olmak üzere alt dallarını oluşturuyoruz.

Burdan Album modelimizi ve servis dosyamızı oluştururak verilerimizi erişebilir hale getiriyoruz. Ve ardından view ve view model sınıflarımıza geçiyoruz.

View ve viewModel farkı kullanıcı iş mantığı ve arayüzü birbirinden ayırmamızı sağlıyordu.

Projemizde API isteklerimiz için https://reqres.in/ kullanarak , verilerimize ulaşabileceğiz.

ViewModel dosyamıza geçip cubit kısa yolu ile sayfamızı başlatıyoruz.

Burada oluşturduğumuz extends AlbumState diyerek bundan sonra oluşturacağımız her birinin buradan türeyeceğini belirtiyoruz.

İlk öncelikli sayfamızın state yöneteceğimiz temel yapıyı sarmalamak için BlocProvider ile sarmalıyoruz. Bu bize cubit ile aradaki en haberleşmeyi sağlayın ağacın yapıtaşı görevi görmektedir.

BlocProvider ile widgetımızı sarmaladıktan sonra bizim bazen sayfayı belirli maddelere göre şekillendirmemiz gerekiyor. BlocConsumer ile birlikte listener methodu içinde gerekli durumu gerekirse koşul ifadeleri ile sağlayarak sayfa yönlendirmesi yapabiliyoruz.

Cubit dosyamızı oluşturmaya başlıyoruz

Parti başlasın!

Dosyamız içerisinde cubit kısayolu ile biraz önce temelini başlamıştık. Sıra içeriğini doldurmaya geldiğinde ise ilk önce servisimizi tanımlıyoruz.

final IAlbumService albumService;
AlbumModel? albumModel; 

gerekli verilerimizi çekeceğimiz modelimiz ve servisimizi tanımladıktan sonra aşağıda fetchAlbumData fonkisyonumuz içerisinde verilermizi elimizde tutuyoruz bir sonraki adımda bunları kullanıcı ile buluşturacağız.

class AlbumCompleted extends AlbumState { 
AlbumModel? albumModel; AlbumCompleted({this.albumModel});}

oluşturduğumuz bu sınıf ile cubit tamamlanması için gerekli modeli tetikliyoruz. Tamamlandı(AlbumCompleted) durumu içerisinde saklıyoruz. Örneğin ileride sayfa içerisindeki ‘AlbumCompleted’ model doğruluğu varsa sonraki sayfaya geç değilse istenilen durum çalıştırılır gibi senaryolar üretilebilir.

Future<void> _init() async {
 await fetchAlbumData(); 
emit(AlbumCompleted(albumModel: albumModel)); }

init methodu ile birlikte sayfa çalıştırıldığında bize sayfa içerisinde gerekli servisi ve modelimizi getirir.

Ve son olarak cubit sınıfında değinmek istediğim bir önemli detay kullanım:

• void changeLoading() { isLoading = !isLoading; }

aslında görünüşte temel fonksiyondur. Bu changeLoading fonksiyonu sayesinde kullanıcı servis cevabı beklerken loading görünümü oluşturulmak amacıyla ekranda çağırırız.

Ekranda bu şekilde loading dönerek servis bekleme süresince kullanıcıya gözükür.

Ekranımızda isLoading fonksiyonu watch() ile dinleyerek çağırarak işlevi koşul şartıyla yerine getiriyoruz. Servis cevabı olumlu ise Card widget geçer.

Ve ekranımızda nasıl kullandığımız kısıma gelecek olursak eğer;

Sayfamızı BlocProvider ve BlocConsumer le sardıktan sonra temel tasarımımızı yukarıda oluşturmuştuk. Şimdi aradaki bağlantıyı yani gerekli verilerimizi nasıl yansıtırız ya da köprüyü nasıl kuruyoruz.

Burada yazı ve resimlerimizi dışarıdan çekeceğimiz kısımdır. Bu kısımda nasıl kullandığımız kısmı genel yapı içersinde read() ile okuyarak, <AlbumCubit> erişerek içerisinde modelimizdeki istediğimiz veriyi çekerek yansıtıyoruz.Evet evet tüm işlem bu kadar :)

Böylece viewModel ve view arasındaki bağlantıyı tamamlayarak projemizi oluşturmuş olduk.

Ekranımızda sliver widgetlerını kullanrak ekranı appbar ve body olmak üzere farklı bir yapı kullandım tavsiye ederim.

Yazımı yazarken faydalandığım siteler:

Bloc State Management Library

List of state management approaches

Projemin kaynak kodlarına erişmek için :

GitHub - Krdnzbyza/flutter_bloc_photoAlbum: This repo was created to explain the photo album with…

Okuduğunuz için teşekkür ederim umarım faydalı olmustur🦹

2021 yılının son yazımı bitirirken bu sene benim için gerek kişisel gelişimim gerekse kariyerim anlamında ilerlediğim bir sene oldu. Daha çok çalışıp daha çok yazıp paylaşarak her geçen gün gelişimime 2022 yılında da devam edeceğim.

2021 yılına benimle birlikte olan başta yanımda her zaman yanımda olan. canım ailem, sevdiklerim, dostlarıma ve herkese teşekkür ederim🍀 Mutlu Seneler!