12._State_Management.pdf

Flutter ile Uygulama Geliştirme Kursu | Android & IOS State Management Kasım ADALAN Elektronik ve Haberleşme Mühendisi Android - IOS Developer and Trainer  Eğitim İçeriği State Yapısı Provider Mobx Bloc (...

Flutter ile Uygulama Geliştirme Kursu | Android & IOS State Management Kasım ADALAN Elektronik ve Haberleşme Mühendisi Android - IOS Developer and Trainer  Eğitim İçeriği State Yapısı Provider Mobx Bloc ( Cubit ) Kasım ADALAN 2 State Yapısı State Yapısı Eğer ara yüzde değişiklik yapacak değişken oluşturacaksanız kullanılır. setState() metodu değişkene state özelliği katmaktadır. setState() metodu ile değişken değeri kodlama içinde değiştiği anda ilişkili olduğu bütün kodlamalarda anlık olarak değişir. setState() metodu StatefulWidget özelliği olan sınıflar içinde olabilir. Örnek kodlamada sayac 1’er 1’er $ artacaktır ve Text içinde anlık değeri görülecektir.  Klasik Yöntem ve State Yapısı Karşılaştırması. $ Uygulama ilk açıldığı anda Text içinde sayaç değeri 0 görünür. Uygulama ilk açıldığı anda label içinde sayaç değeri 0 görünür. Butona tıklanıldığı anda sayaç artar ve sayaç değeri kodlama içinde Butona tıklanıldığı anda sayaç artar ve sayaç değeri button metodu var olan her yerdeki değerini değiştirir ve kodları günceller.Bu sayaç içinde anlık olarak arayüzde görünmesi için label içine aktarılır. artımı dikkat edin button metodu içinde olduğu halde sayac değeri Bu sayaç artımı ve label içine aktarımı dikkat edin button metodu text içine aktarım farklı bir yerde yer almaktadır.Bu durum state içinde gerçekleşti. özelliği ile oluşmaktadır. Provider  Provider Daha az kodlama ile sayfalar arası veri akışı sağlar. Ortak bir veri oluşturup bu veriye heryerden erişim sağlanır. Veride değişim olduğunda , veriyi dinleyen sayfalar bu değişimi alırlar. Dinleme işlemi otomatik gerçekleşir. Büyük çaplı uygulamalarda veri kontrolünü provider sayesinde daha az kodlama ile sağlayabiliriz. Çok fazla sayfada sayfa geçişlerinde taşınan bilgi bir süre sonra karmaşık olabilir. NOT : Provider Stateless widget içinde çalışabilmektedir. setState() metodu gibi sadece Stateful widget içinde çalışmamaktadır. Provider Genel Çalışma Yapısı Provider Sınıf Modeli Tetikle Dinle Tetikle Dinle Tetikle Dinle Anasayfa İkinciSayfa UcuncuSayfa Provider Kütüphanesini Ekleme provider: ^4.1.2  Provider Sınıf Modeli Oluşturma Sınıfa provider özelliği katmak için ChangeNotifier özelliğini extend ediyoruz. ChangeNotifier bize notifyListeners() metodunu kullanmamızı sağlıyor. Değişim olduğunda notifyListeners() metodları Dışardan veri alabiliriz. uygulamada yer alan bütün dinleyicileri ( Consumer ) uyarır ve dinleyiciler değişen değeri arayüze aktarır.  Provider Yapısını Uygulamaya Tanıtma Tüm uygulamayı kapsaması için MyApp altında tanıtım yapılır. MultiProvider ile birden fazla Provider Sınıf modeli uygulamaya tanıtılabilir ve ChangeNotifierProvider ile çalışılabilir. Provider Sınıf modelini uygulamaya ekliyoruz. Dinleme işlemi için hazır bekliyor.  Provider Sınıfını Dinleme child iç içe daha geniş bir provider yapısı kurulduysa erişim için. Değişikliği yapmak ve dinlemek için Consumer kullanılır. Değişikliğe erişim için Provider sınıfı modelinin nesnesi ile değer okumak için gerekli metoda erişilir ve okuma yapılır. NOT : Provider stateless widget içinde çalışabilmektedir. Provider Sınıfı İçeriğini Değiştirme ve Tetikleme Değişikliği yapmak ve dinlemek için Dinleme Consumer kullanılır. Değişikliğe yapmak child iç içe daha geniş bir provider için Provider sınıfı yapısı kurulduysa erişim için. modelinin nesnesi ile değişim yapacak Tetikleme metoda erişilir ve çalıştırılır. Tetikleme NOT : Provider stateless widget içinde çalışabilmektedir.  Uygulama İkinci Sayfa üzerinden hem kendi sayfasındaki Text içeriğini hemde Anasayfa içeriğini değiştirme. Tam Kodlama Mobx  Mobx Sayfa içinde veride değişim olduğunda anlık olarak değişimi dinleyebiliriz. Tetikleme ve dinleme işlemi sadece bulunduğu sayfada olmaktadır. Bir sınıftan tetikleme yapıldıktan sonra geçiş yaptığımız sayfalarda tetikleme sonucunu göremeyiz kendini resetler. Provider gibi çalışmamaktadır. Dinleme işlemi otomatik gerçekleşir. Büyük çaplı uygulamalarda veri kontrolünü mobx sayesinde daha az kodlama ile sağlayabiliriz. NOT : Mobx Stateless widget içinde çalışabilmektedir. setState() metodu gibi sadece Stateful widget içinde çalışmamaktadır. Kaynak : https://mobx.netlify.app/examples/counter Mobx Kütüphanesini Ekleme mobx: flutter_mobx: mobx_codegen: build_runner:  Mobx Base Sınıf Modeli Oluşturma Mobx kullanmak için Store sınıfını özellik olarak interface’e Değişimini eklemeliyiz. Dosya adı gözlemleyeceğimiz yapının tanımlaması. Değişimi tetikleyeceğimiz yapının tanımlaması. Dışardan veri alabiliriz. Not : with kelimesi sınıfa kalıtım olmadan özellik katmak için kullanılır.  Mobx Base Sınıfı için Otomatik Sınıf Üretme Bu iki satır kodlama oluşturulduktan 2 sonra part içinde yazan sınıf otomatik oluşur.Eğer oluşmuyorsa terminal ekranını açabilirsiniz. Bu sınıf g.dart uzantılı dosyada yer alıyor. Interface oluşturulur ve terminal 1 ekranında kurulum kodu çalıştırılır. flutter packages pub run build_runner watch Sayfa içinde değişim yapıldığında terminal ekranı açılırsa otomatik olarak en son değişim g.dart uzantılı dosyada oluşur. Eğer oluşmuyorsa flutter packages pub run build_runner watch kodlamasını çalıştırabilirsiniz.  Mobx Yapısını Kullanma Sayfa içinde kullanmak için modelden nesne oluşturulur.  Mobx Sınıfı İçeriğini Tetikleme ve Dinleme Mobx Sınıf modelimizdeki Değişikliği observable değişkene erişim dinlemek için Observer kullanılır. Dinleme Değişikliğe yapmak için mobx sınıfı Tetikleme modelinin nesnesi ile değişim yapacak metoda erişilir ve çalıştırılır. Tetikleme NOT : Provider stateless widget içinde çalışabilmektedir.  Mobx Uygulama İkinci Sayfa üzerinden sadece kendi sayfasındaki Text içeriğini değiştirebilir. Tam Kodlama Bu sayfada değer hep sıfır olacaktır çünkü bu sayfa içinde tetikleme yoktur.  Bloc (Business Logic Component)  Bloc(Business Logic Component) StateManagement için kullanışlı bir yapıdır. Provider yapısını içinde bulundurur. Proje alt yapı mimarisidir. Uygulamanızı başta böyle bir mimari ile tasarlarsanız ilerde uygulama çok büyüdüğü zaman kodlama kontrolü daha kolay olacaktır. setState() arayüzün tamamını tekrar çalıştırdığı için büyük uygulamalarda performans sorununa yol açabilir. Bloc Kütüphanesini Ekleme flutter_bloc: ^6.1.1  Bloc Sınıf Modeli Oluşturma Cubit oluşturmak için Cubit yapısını yöneteceğimiz veri türü ile sınıfa eklemeliyiz. super Cubit sınıfı temsil eder ve 0 değeri int değerini Veri türü istediğimiz türde olabilir burada sayısal bir sayaç olduğu için temsil eder.Doğal olarak bu int tanımladık. değer başlangıç değeri olmuş olur. emit() Arayüzde değişimi state Cubit sınıfının veri dinleyen kodlamaları türünü temsil eder ve en tetikler ve arayüzü yeniler. Dışardan veri alabiliriz. son değer içinde yer alır.  Bloc Yapısını Uygulamaya Tanıtma Tüm uygulamayı kapsaması için MyApp altında tanıtım yapılır. MultiBlocProvider ile birden fazla Bloc Sınıf modeli uygulamaya tanıtılabilir ve BlocProvider ile Bloc Sınıf çalışılabilir. modelini uygulamaya ekliyoruz. Dinleme işlemi için hazır bekliyor.  Bloc Sınıfını Dinleme sayacDegeri , SayacCubit sınıfının yönettiği veriyi temsil eder ve değişimi bununla Değişikliği görebiliriz. dinlemek için BlocBuilder kullanılır. NOT : Provider stateless widget içinde çalışabilmektedir.  Bloc Sınıfı İçeriğini Tetikleme Dinleme Tetikleme Değişikliğe yapmak için Bloc sınıfı modelinin tanımlaması ile context.read() değişim yapacak metoda erişilir ve çalıştırılır. Tetikleme NOT : Provider stateless widget içinde çalışabilmektedir.  Bloc Uygulama İkinci Sayfa üzerinden hem kendi sayfasındaki Text içeriğini hemde Anasayfa içeriğini değiştirme. Tam Kodlama Bloc ile Listeleme Bloc ile Listeleme Bloc Kütüphanesini Ekleme flutter_bloc: ^6.1.1  Veri Modeli Oluşturma Not : kisi_id String çünkü http dersimizde buna ihtiyaç duyucaz.  Verileri İşlemek için Sınıf Oluşturma Bu interface ile metod taslaklarımızı oluşturuyoruz sonrada kullanıyoruz. Taslak metodlarımızı kullandığımız sınıf Taslak metodun kullanılması  Veri Çalışma Durumu Kontrol Sınıfları KisilerDaoRepository sınıfı içindeki metodların çalışma durumlarını oluşturuyoruz. Bu durumlara göre veri Cubit sınıfının varsayılan yönetimi yapılacak.Verilerin başlangıç değeri olacak. dinlenilme işlemleri bu durumlara göre Yüklenme durumunu belirtir. şekillenecek.Bunun için bir Kullanmasakta olur. interface oluşturarak ortak bir tür oluşturuyoruz. Yüklenme olduktan listeye yani veriye erişim sağlanır. Bu durumları takip edicez hangi durum çalışıyorsa ona göre kodlama yapıcaz. Hata oluşursa hata mesajına erişim sağlar. Bu sınıf Repository sınıfı Cubit ( Bloc ) Sınıfımız üzerindeki metodları Veri çalışma durumu takip edecek çalıştırır. sınıfı Cubit olarak ekliyoruz. Verileri yönetmek için oluşturduğumuz sınıflara erişmek için gerekli sınıf. Veri çalışma durumları için başlangıç değeri. emit() kodlaması ile veriyi dinleyen kodlara Repository veri çalışma durumu Sınıfından veriyi hakkında bilgi veriyoruz alma ve tetikliyoruz. Alınan veriyi bu çalışma durumunu dinleyen kodlara iletme. Hata mesajını iletme  Bloc Yapısını Uygulamaya Tanıtma Tüm uygulamayı kapsaması için MyApp Repository Sınıfına erişmek için altında tanıtım yapılır. burda tanımlama yapmalıyız aksi halde erişemeyiz. MultiBlocProvider ile birden fazla Bloc Sınıf modeli uygulamaya tanıtılabilir ve çalışılabilir. BlocProvider ile Bloc Sınıf modelini uygulamaya ekliyoruz. Dinleme işlemi için hazır bekliyor.  Veriyi Dinleme ve Listeleme KisilerCubit sınıfını dinleme Çalışma durumu kontrol Tetiklenen verinin alınması Repository sınıfından alınan verinin tetiklenmesi Bloc Yapısını Tetikleme Cubit içindeki metodu çalıştırmazsak arayüzü tetikleyemeyiz. Bu metodu çalıştırdığımızda dinleme yapan BlocBuilder TETİKLEME yapısına veri iletilir. DİNLEME  Bloc ile http Kütüphanesi Kullanımı http Kütüphanesini Ekleme Webservis Cevabına Uygun Sınıfları Oluşturma 2 1 http ile listeleme  Güncelleme http 0.13.1 versiyonu sonrasında url Uri türünde olması gereklidir. Eski sürümlerde buna gerek yoktur. İsterseniz eski sürümleride kullanabilirsiniz. Eski Yeni  Repository Sınıfında http metodlarını oluşturma import 'dart:convert'; import 'package:http/http.dart' as http; json parse http ile webservisten veri alma Cubit Sınıfı http ile webservisten alınan veriyi arayüze tetikleme ile aktarmak için metod.  Listeleme DİNLEME TETİKLEME http ile Kayıt Silme Tasarımsal Ekleme Repository Sınıfında http metodlarını oluşturma Cubit Sınıfı Silme işleminden sonra arayüzdeki bilgiler güncel olması için en son veriler tekrar alınır ve arayüz tetiklenerek yenilenir. Tasarımda Kullanım Silme işlemi yapma ve TETİKLEME http ile Kayıt Ekleme Tasarımsal Ekleme Anasayfa Tasarımsal Ekleme NOT : Bu sayfada kayıt yaptıktan sonra geri gelince arayüzü değiştiğiniz görebilicez. Repository Sınıfında http metodlarını oluşturma Cubit Sınıfı Kayıt işleminden sonra arayüzdeki bilgiler güncel olması için en son veriler tekrar alınır ve arayüz tetiklenerek yenilenir. Kayıttan sonra geri tuşu ile geri döndüğümüzde güncel bilgileri bu şekilde görebiliriz.  Tasarımda Kullanım Kişi Ekleme yapma ve TETİKLEME Eğer main.dart dışında başka bir dosya içindeki sayfadan cubit metoduna erişmek istiyorsak. BlocProvider.of(context) ile erişim sağlayabiliriz read yapısını kullanamayız. GERİ TUŞUNU BASINCA ARAYÜZDE VERİNİN EKLENDİĞİNİ GÖRÜCEZ. http ile Kayıt Güncelleme Tasarımsal Ekleme Anasayfa Tasarımsal Ekleme NOT : Bu sayfada kayıt yaptıktan sonra geri gelince arayüzü değiştiğiniz görebilicez. Repository Sınıfında http metodlarını oluşturma Cubit Sınıfı Günceleme işleminden sonra arayüzdeki bilgiler güncel olması için en son veriler tekrar alınır ve arayüz tetiklenerek yenilenir. Güncellemeden sonra geri tuşu ile geri döndüğümüzde güncel bilgileri bu şekilde görebiliriz.  Tasarımda Kullanım Kişi Güncelleme yapma ve TETİKLEME Eğer main.dart dışında başka bir dosya içindeki sayfadan cubit metoduna erişmek istiyorsak. BlocProvider.of(context) ile erişim sağlayabiliriz read yapısını kullanamayız. GERİ TUŞUNU BASINCA ARAYÜZDE VERİNİN EKLENDİĞİNİ GÖRÜCEZ.  Teşekkürler... kasım-adalan [email protected] kasimadalan