Flutter Blog -Login

Selamlar, bugün sizlerle birlikte Flutter üzerinde “end to end” bir blog application gerçekleştireceğiz. Bizleri neler bekliyor:

• MVVM kullanımı
• Provider Pattern
• File Structre
• Dependency Injection
• Firebase Rest Call
• Firebase Custom Authentication
• Sliver Component
• Refactor (Projeyi ilk başta en temelden başlatıp sonrasında daha temiz kod yazarak farkı göreceğiz.)

Genel Yapı (Project Structure)

• Code’larda login ve list sayfaları bulunuyor yazımızda ilk olarak login’den başlıyoruz.
• Firebase backend service olarak kullanılıp REST olarak call edildi.
• MVVM pattern’i kullanıldı.
• DI işlemleri için _getit kütüphanesi referans alındı.
• Router yapısı kullanıldı.

Klasör Yapısı (Folder Structure)

Burada bir çok yapı denedim son olarak en çok hoşuma giden ve ortaklaştırdığını düşündüğüm şu yapı;

Core: Burada logic’lerimizi yazıp sayfanın ana işlerini yapıyoruz.Api call VM katmanı veya constant’lar gibi.

UI: Burada ise sayfanın sadece ön yüz kısmını yapıyoruz.Shared altında style dosyalarımızı views ekranında ise bir sayfamızın ekranlarını çiziyoruz.Widgets da ise ortak katmanları kodluyoruz.

Locator & Router : Burada sayfalarımızın VM lerini set ederken navigation property’lerini yönetiyoruz.

İlk olarak sayfamızın ön yüzünü yapalım.

Login User Interface

• Burada sadece UI kodlarına bakmanız daha iyi olacaktır. Biz alt tarafta baseview yapısını ele aldık.
• Padding ile sayfaya genel bir boşluk atadık.
• Colum ile alt alta dizilmesini ve sayfanın center’ında olmasını sağladık.
• Global bir form key oluşturarak validasyonları sağladık.
• Özellikle bu sayfada hiç logic olmaması da sayfayı daha şık ve temiz yapmış oldu.

Login View Model

• Api isteklerimiz için getit aracılığı ile objemizi çağrıyoruz.
• TextEditting ve context gibi property’ler ile sayfamızda ki ui kısımlarını yönetiyoruz.
• Login de ise artık user butona basar ve email ve ilgili alanlar eğer form alanında validate ise sayfaya gönderilir.
• Bu noktada dikkat edeceğimiz şey, sayfadaki değişikliğin algılanması için setState ile sayfaya uyarı mesajı göndermemiz.
• OnSuccess ve OnError metod’ları ile api’den gelen request’in sonucunu dinliyoruz.
• SaveUserState de ise telefonumuzun hafızasına kullanıcın bir bilgisini basıp splash ekranında bu logic’i yakalıyoruz.

Aslında burada refactor edilmesi gereken çok yer var fakat şuanlık tüm çıplaklığıyla kodumuzu geliştiriyoruz amaç süreci iyi anlamak.

Api

Sayfalarımız daki backend isteklerini kullanıp yönetmek için tanımlıyoruz.

• Completer, projede kullandığımız future’ları yönetebileceğimiz bir özellik.
  Sayfa da işlem bittiğinde istediğimiz logic’i yazıp çalıştırmaktayız.
• Gelen body de ki nesne json’a çevirip fromJson ile objeye set ediyoruz.(Bir altta model kısmın da bu durumu anlatıyoruz.)

Model

Model katmanı flutter’da özellikle dart dilinde bir tık uğraştırıcı. Gelen response parse etmek için direk bir library yok. Bir kaç yöntemle bu işi yapabiliyorsunuz.

• Json Annotation
• Json To Dart

Json annotation ile bir model tanımlayıp terminalden alacağınız build ile code generate edilmekte.

Json to dart ise json file bize class a çevirip kullanılmak üzere çalışıyor.

• Bizim bir json parse yapan araca ihtiyacımız var. Bunun için iki yol var önümüz de:

Base View

Bizim için yine en çok önemli olan kısım sayfalarımız da ortaklaşmış bir yapı kurmak için kullanıyoruz ve sayfada ki logic’leri yönetiyoruz.

• Function ile sayfalarımızda kullanacağımız context, model, ve child yapısını kullanıyoruz.
• OnModelReady ise sayfa init edilde çalışan kısım burada first init’lerimizi ve diğer logiclerimizi yönetiyoruz.
• T model ile getit ile de tanımladığımız modellerimizi set ediyoruz.
• ChangeNotifierProvider provider patternden bize notifyListener metodu ile herhangi bir anda sayfayı uyarıp ui’mizi yenilemeyi sağlıyor.
• Consumer ile hangi model tarafından bu iş yapılacağını aktarıyoruz.

BaseModel

Yine bizim için hayati niteliği olan basemodel sınıfımız.

• Bir abstract yapısı tanımlanır ve buradan türeyen her sınıfta bir context bind etmesi beklenir.
• ViewState ile ise sayfada en basit düzeyde boş ve dolu olma durumları kontrol edilir.
• Setstate ile sayfanın State’ni güncelleyip ilgili dinleyicilere pass edilir.

Buraya kadar olan kısımda aslında sayfada en temel olan yapıları çok hızlı bir şekilde işleyip ortaklaştırılmış şekilde kullanmış olduk.

Locator

BaseView sayfalarımızı yazarken T tipinde bir model alacak ve bu model VM locator dan türeyecek diye işaretlemiştik. Muhakkak VM katmanlarımızı bir yerde set etmiş olmamız gerekiyor ve Application run etmeden önce çağırıp yazmak gerekiyor.

• Singleton olarak tanımladığımızda tüm sayfalarımızda ortaklaşmış sadece bir kere çağırılıp kullanabileceğimiz ve istersek değişiklik de yapabileceğimiz bir instance oluşmakta.
• Factory de ise her çağrıldığında bize yeni bir instance döndürüp sadece VM’larda veya sayfalarda kullanılmak için tanımlanır.

Ve günün sonuna geldik bir tık fazla bir tık karışık olabilir ama burası direk canlı bir şekilde kullanabileceğimiz yer. Yapıyı net olarak anlamak için bilerek kod satırlarını dümdüz bıraktım. Bir çok eleştiri veya düşüncenizi bizimle benimle paylaşıp birlikte geliştirip daha ileriye en dipten gidebilmek için.

Sevgilerimle

Kaynak : https://github.com/VB10/hwablog

Referanslar : https://www.filledstacks.com/tutorials