Flutter Clean Architecture (1)
Merhabalar.
// Anahtar kelimeler: MVVM, Repository, Dependency Injection, Clean Code, Clean Architecture
Yönetilebilirliği ve test edilebilirliği yüksek projeler için temiz kod yazmak gerekir. Flutter da tasarım kalıplarını nasıl kullanacağımızı ve dikkat etmemiz gereken durumları inceleyeceğiz bir yazı olacak.Bir seri olarak oluşturacağım. Öncelikle bilmemiz gereken anahtar kelimelerle ilgili bir kaç bağlantı paylaşacağım.
Clean Architecture Nedir ?
Buraya tıklayarak ilgili yazıya ulaşabilirsiniz. “Katmanlar “ başlıklı kısmı daha dikkatli okumanızı tavsiye ederim.
MVVM nedir?
Buraya tıklayarak ilgili yazıya ulaşabilirsiniz? “MVVM Yapısı” başlığı durumu özetler niteliktedir.
Repository nedir?
Buraya tıklayarak ilgili yazıya ulaşabilirsiniz. “Repository Design Pattern” başlıklı kısmı daha dikkatli okumanızı tavsiye ederim.
Dependency Injection nedir?
Buraya tıklayarak ilgili yazıya ulaşabilirsiniz. İkinci paragrafındaki açıklama yeterli yine de yazının tamamı okumanızı öneririm.
Yukarıdaki yazıları incelediğinize göre projemizi oluşturmaya başlayabiliriz.
// projenin paket ismini ayarlamak için projeyi terminalden oluşturmanızı tavsiye ederim. Paket ismi ve daha fazla bilgi için buraya tıklayınız.
flutter create — org com.emintolgahanpolat clean_architecture
Clean Architecture da bahsedilen katmanların dosya yapımızla doğrudan ilişkisi yoktur. Dosya yapısı projenin ihtiyacına ve geliştirme yönteminize göre değişebilir. Görseldeki yapı çoğu projenin ihtiyaçlarını karşılayacaktır.
Klasör yapısında gördünüz gibi Clean Architecture da bahsedilen katmanlarla oluşturduğum klasör isimleri aynı değil kendi projenize göre farklı klasör yapıları oluşturabilirsiniz. Yinede mantıksal olarak bağlantılılar yazı serimizin sonunda bunu daha net göreceğiz.
App : Projenin mimarisiyle ilgili tüm işlemleri bu klasör altında barındırıyoruz. Örneğin model, view, viewmodel, repository, service, data source vs..
Core : Projeyi geliştirmede ihtiyaç duyabileceğimiz kodları bu klasör altında barındıracağız. Örneğin temalar, renk paletleri, ikonların ve görsellerin referansları, base sınıflar, extentionlar vs..
flutter projeleri main.dart dosyasındaki main fonksiyonu yürütülmesiyle başlatılır. main fonksiyonu içerisinde runApp(); fonksiyonuna uygulama yürütülürken ilk gösterilecek widget eklenir. Projede material design kullanmak istediğimden MaterialApp widget ını çağırdım. Alternatif olarak Cupertino widget larını da kullanabilirsiniz. Material App Flutter widget larının Material design’a uygun olarak düzenlenmesini sağlıyor. home parametresine göndereceğimiz widget bizim başlangıç sayfamız olacaktır.
Konuyu biraz detaylandırmak istiyorum sadece mvvm konusuna takılıp kalmak doğru olmaz. Flutter da state yönetimi ile ilgili konularıda göz önünde bulundurmak gerekir. State yönetiminin daha net anlaşılması ve performanslı uygulamalar geliştirmek için 3 farklı yöntemle viewModel kullanımını aktarmaya çalışacağım.
- Stateful kullanarak ViewModel kullanımı
Burada State sınıfını extends ederek yeni bir viewModel oluşturduk ve View ımızdan bu view modeldeki parametrelere erişip işlemlerimizi yapabiliriz. Bu kullanımın dezavantajı unit test yazarken state durumunun tetiklenmesi diye biliriz.
Bonus: AppBar içerisindeki title text i güncellenmediği için const kullandık benzer işlemlerde const kullanmak rebuild işleminde performansı olumlu etkiler.
2. Change Notifier Kullanarak ViewModel kullanımı
ChangeNotifier sınıfını extends ederek oluşturduğumuz viewModelde notifyListeners() fonksiyonunu tetikleyerek sınıfın içerisindeki parametrelerin güncellendiğini dinleyici fonksiyonlara iletiyoruz. AnimatedBuilder widget view modelimizin güncellendiği bilgisi gittiğinde builder fonksiyonunu tetikleyerek ekranın güncellenmesini sağlar. Bu durumda da view’ın build fonksiyonu tek sefer çağrıldığı için yeni güncellemeler sadece AnimatedBuilder altındaki widgetlar oluşturularak gösterilecektir. Bu da ekran yenilenmesinde performansı olumlu etkiler.
3. ValueNotifier Kullanarak ViewModel kullanımı
ValueNotifier sınıfı changeNotifier sınıfından türetilmiştir değer değişikliklerinin bildirmek için kullanılır. Bu durumda sadece viewModel içerisindeki _counter değişkenini dinleyen widgetlar güncellenecektir.
Atomic design a uygun geliştirdiğimiz durumda 3 yönteminde fark edeceğini düşünmüyorum. Provider kütüphaneside 2. yöntemi tercih ediyor.
Bonus: Provider kütüphanesi kullanarak bu viewModellere widget ağacında alt widgetlardan ulaşılmasını kolaylaştırabilirsiniz. Örnek kullanım e ticaret uygulamasında sepet viewModeline diğer ekranlardan erişip ürün ekleyip kaldırabilirsiniz.
Bonus
Her seferinde AnimatedBuilder tanımlamak zorundamıyız? Sürekli bununla mı uğraşacağız? Evet tanımlamak zorundayız fakat base bir widget oluşturup bu sorunu pratik bir yolla çözebiliriz.
BaseWidget adında bir sınıf oluşturdum ve artık tüm widgetlarımda bunu kullanacağım.
Ana sayfamı bu sınıftan türeterek oluşturdum ve constructor’ında HomeViewModel’i tanımladım. Artık her şey daha kolay.
Peki BaseViewModel nereden çıktı?
Basit bir soruna basit bir çözümle yaklaştık view model li güncellememize yarayan notifyListener() fonksiyonu asenkron işlemler sonucunda view kapatıldıktan sonra çağrılabilir bu da uygulamada hataya neden olacaktır. Bunu için viewModel in dispose olup olmadığını kontrol etmemiz gerekir.
Sonraki yazımızda Repository Pattern’i inceleyeceğiz.
