Dart/Flutter / Mobil · Mayıs 2, 2021 0

Flutter State management, Provider

Flutter öğrenmeye, öğrendikçe yazmaya çalışıyorum. Bu birazda tetikleyici rol alıyor benim için. Bu aşamada yazdıklarımda hatalar olabilir, iletirseniz tabiki hatalarımı düzeltirim.

Flutter da State management dendiğinde ilk başlarda zihnimde bir şeyler canlanmıyordu, biraz biraz şekillenmeye başladı. Widget lar,sınıflar,sayfalar arası verilerin alınması, verilmesi bir yerde bekletilmesi olarak düşünebiliriz.

Sizlerin daha iyi bildiği gibi, bir ağaca benzeyen yapısı ile verileri taşımak biraz güç. En yukarıdaki sınıfın içinde bulunan widget dan, yapının en altındaki widget e veri almak  biraz zahmetli ve sistem için pahalı. Bu yüzden bazı paketler geliştirilmiş provider paketi bunlardan biri.

Paketinin çalışmasına bakarsak,  işlenecek veriler hiyerarşik yapının dışında tutuluyor diyebiliriz. Bir nevi bir data sınıfı oluşturuyoruz ve alacağımız vereceğimiz bilgileri buraya gönderiyor, sonrada “veri değişti” diyerek yayın yapıyoruz. Sonrasında ilgili widget lar gerekeni yapıyor. Yapısını çok basit bir çizimle aşağıda şekilde görebilirsiniz. Ayrıca flutterda “tekrar boyama” yapılması için statefull widget kullanılması gerekirken, provider ile bu ortadan kalkıyor. Stateless widgetda da, artık tekrar boyamak veriyi değiştirmek provider ile mümkün.

Şimdi, provider paketini projeye yüklemek için iki yol var.

  1. Flutter projesinin klasörü içerisinde terminale flutter pub add provider yazarak, ki bu pubspec.yml dosyası içinde değişiklikleri otomatik yapıyor.
  2. pubspec.yml dosyası içerisinde aşağıdaki değişikliği yapmak.

Bu hazırlığı yaptıktan sonra yapılması gereken bir “veri model sınıfı” oluşturmak. Alınacak  gönderilecek verileri buradan yollayacağız ya da alacağız, üzerinde işlem yapacağız

Veri model sınıfına models.dart adını verdim. Bu dosya içerisinde üç sınıf oluşturdum. Dosya içeriği aşağıda. Sınıfların içindeki notifyListeners() metodları “dinleyicilere” veri değişti bilgisi vermek için kullanılıyor.

Daha sonra bu verilere erişecek uygulama sınıflarını oluşturmak gerekiyor. Bunlar ise page2,page3,page4 adlı dosyalarda barıdırdım. Bu sınıflar içindeki widgetlerin sarıldığı (wrapping) Consumer i açıklamak için kod örneğinden yararlanmakta yarar var.

Yukarıdaki kod örneğinde IntegerModel: verinin gönderileceği sınıf ve IntegerModelObject:ModelSınıfını temsil eden obje  olarak tanımlayabiliriz. Dikkat ederseniz OnPressed() metodunda models.dart dosyası içerisindeki, IntegerModel sınıfı içindeki incCounter metodu çalıştırılmıştır.

Bu işlemleri yaptıktan sonra verinin taşınacağı, işleneceği alınacağı yere provider işlemlerini yapmak kaldı. Ben bunu en üstte bulunan sınıf içerisinde yaptım. main.dart dosyası içerisinde materialApp widget ini MultiProvider ile sardıktan ve child olarak materialApp ı gösteriyoruz. Şimdi ChangeNotifierProvider ları oluşturma zamanı. Örnek çalışmada üç adet ChangeNotifierProvider tanımladım. Bir örneği aşağıda.

buradaki IntegerModel(), models.dart dosyası içerisindeki bir sınıf. Verilere ulaşacak olan widget ler buradan veri alacak. Tabi “değişiklik oldu” haberi geldikten sonra.

Şimdi Bu widget lara yapılacak işlemleri hazırlayalım. Bu işlemi yine Consumer widget i ile yapacağız. Main.dart içerisinde bulunan Text widget ine, models.dart içerisindeki integerModel sınıfındaki readCounter metoduyla veri alıyoruz aşağıdaki örnekte.

Çalışmanın dosyaları için tıklayınız.

Sağlıcakla.

Ziyaretci : 1058