Flutter Bloc Pattern ve Stream Kullanarak Anlık Network Durumunu Dinleme

Merhabalar, bu yazımızda BLoC patternine uygun şekilde networkümüzün durumunu ve bu durumdaki değişiklikleri stateler üzerinden takip etmekten bahsedeceğim.

Mobil cihazlar için uygulama geliştirirken şüphesiz ki internet bağlantısını kontrol etmek önemli bir husus. Bunun için bağlantı durumunu ve üzerinde gerçekleşen değişiklikleri takip etmemiz gerekmekte. Bunu da bir paket yardımıyla Flutterda gerçekleştireceğiz.

Durumlardaki değişiklikleri stateler üzerinden takip edebilmek için BLoC yapısını kullanırken, connection durumunu dinlemek için kullandığımız listenerımızın yakaladığı değişen durumları BLoC yapısına bildirmek için de streamden yararlanacağız.

Sonuç

Kodlama

Paketleri Dahil Etme

İlk olarak kullanacağımız bloc ve network için paketlerimizi pubspec.yaml dosyamızın içinde dependencies bölümüne ekliyoruz.

Sonrasında flutter pub get eklediğimiz paketleri projemize dahil ediyoruz.

BLoC Dosyalarını Oluşturma

Öncelikle network durumu için oluşturacağımız bloc yapısının dosyalarını oluşturalım. State ve event classlarını ayrı bir dosyada, bunların işlendiği blocı da ayrı bir dosyada tanımlayacağız.

Ben bunları network_bloc, network_event, network_state olarak adlandıracağım.

Gelin şimdi neyi neden yaptığımızı inceleyerek bloc yapımızı kodlayalım.

Network Event:

Burada 2 adet network event’ımız olacak. Yani bloc yapımızı tetikleyecek iki olay: Bunlar connectionListen ve connectionChanged olayları.

Uygulamamız başlatıldığında connectionListen ile network durumumuzu dinlemeye başlayacağız, sonrasında stream akışıyla değişiklikleri dinlemeye devam edeceğiz. Dolayısıyla connectionListen eventımızı sadece bir kez kullanacağız. Listenerımızın yakaladığı her değişiklikten sonra statelerimizi duruma uygun şekilde güncellemek için ise connectionChanged eventımızı tetikleyeceğiz.

Network State:

Yine burada ConnectionInitial, ConnectionFailure, ConnectionSuccess olmak üzere 3 stateimiz bulunacak. ConnectionInitial durumumuz “Network Bloc” yapımızı ilk oluşturduğumuz anda döndüreceğimiz geçici bir başlatma durumu. Bizim asıl statelerimiz ConnectionSuccess ve ConnectionFailure diyebiliriz. Eğer internete bağlanabiliyorsak ConnectionSuccess, bağlanamıyorsak ConnectionFailure bizim mevcut stateimiz olacak.

Network Bloc:

İşte asıl işlemi yaptığımız kısım. Burada ListenConnection eventimiz geldiğinde bir stream oluşturuyoruz. Bu stream kullandığımız paket vasıtasıyla ağdaki değişimleri dinlemekte. Dolayısıyla gerçekleşen değişim durumu, internetin gidişine dair ise mevcut stateimiz ConnectionFailure olurken eğer internet bağlantısı sağlanmışsa ConnectionSuccess stateini elde etmeliyiz. Bu sebeple herhangi bir değişiklik yakalandığında bu değişikliği ConnectionChanged eventimizin constructorında bulunan connectivity alanına vererek BLoC yapımıza gönderiyoruz. BLoC yapımız ise ConnectionChanged eventimizi alarak ConnectionFailure ya da ConnectionSuccess olmak üzere 2 seçenekten birini state olarak döndürmekte.

Arayüz

Arayüzümüz internete bağlı olup olmadığımızı anlatan basit bir Text’ten oluşacak çünkü yazıdaki asıl amacım arkaplanda yapılan işi anlatmak.

Tabii ki burada state’e özgü bir çıktı alacağımız için BlocBuilder kullanacağız. BlocBuilderı kullanmak için ise BlocProvider tanımlıyoruz. BlocProviderımızı oluşturduktan hemen sonra ListenConnection eventımızı başlatıyoruz.

Ve arayüzümüzü de tamamlayarak amacımıza ulaştık diyebiliriz. Proje kodlarına buradan erişebilirsiniz :)