Document Details

RespectfulHyperbole

Uploaded by RespectfulHyperbole

Bilecik Åžeyh Edebali Ãœniversitesi

Tags

flutter state management programming

Full Transcript

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