DEV Community

Cover image for Flutter State Yönetimi : Bölüm 2 💫 🌌 ✨
Gülsen Keskin
Gülsen Keskin

Posted on • Updated on

Flutter State Yönetimi : Bölüm 2 💫 🌌 ✨

Bloklar: İş Mantığı Bileşenleri (Business Logic Components)

B.L.o.C. İş Mantığı Bileşenleri anlamına gelir. Bu model ilk olarak Dart Konferansı'nda ortaya çıkmıştır. Amacı, UI iş mantığını yüksek oranda yeniden kullanılabilir hale getirmektir.

• Public API'leri yalnızca basit girdi ve çıktılardan oluşur.
• Bloklar injectable (enjekte edilebilir) olmalıdır, bu da platformdan bağımsız anlamına gelir yani Flutter ve web için aynı blokları kullanabilirsiniz.

DartConf 2018 de yayınlanan uygulama tasarımı ve UI kuralları:

Uygulama tasarımı için:

  1. Input'lar ve output'lar yalnızca havuzlar ve akışlardır.(streams) Fonksiyon, constant ve değişkenler yoktur.

  2. Bağımlılıklar enjekte edilebilir olmalıdır. Herhangi bir Flutter kitaplığını bloc'a aktarıyorsanız, bu iş mantığı değil, UI çalışmasıdır ve bunlar kullanıcı arayüzüne taşınmalıdır.

  3. Platform dallanmasına izin verilmez. Kendinizi if (device == browser)... yazan bir blokta bulursanız, kodunuzu tekrar gözden geçirmeniz gerekir.

  4. Bu kurallara uyduğunuz sürece başka ne isterseniz yapabilirsiniz.

UI işlevselliği için:

  1. Genel olarak, bloklar ve üst düzey Flutter sayfaları bire bir (1:1) (one-to-one) ilişkiye sahiptir. Gerçekte mesele şu ki, her mantıksal state öznesinin (logical state subject) kendi bloğu vardır.

  2. Componentler girdileri (input) olduğu gibi göndermelidir çünkü widget'ta iş mantığı olmamalıdır! Metni biçimlendirmeniz veya bir modeli serileştirmeniz gerekiyorsa, bu işlem blokta yapılmalıdır.

  3. Çıktılar, kullanıma hazır widget'lara aktarılmalıdır. Örneğin, görüntülenebilir para birimine dönüştürülmesi gereken bir numaranız varsa, bu blokta yapılmalıdır.

  4. Herhangi bir dallanma, basit bloc Boolean logic'e dayanmalıdır. Kendinizi bloktaki tek bir Boolean akışıyla sınırlandırmalısınız. Örneğin, color: bloc.isDestructive ? Colors.red : Colors.blue

if (bloc.buttonIsDestructive && bloc.buttonIsEnabled && bloc.userIsAdmin) { ... gibi karmaşık Boolean yan tümcelerini kullanmanız yanlış kabul edilir.

Aşağıdaki şekil blokları kullanan bir Flutter uygulamasının temel görünüm katmanı mimarisinin nasıl göründüğünü gösterir.

Image description
Blokları kullanarak, görünüm katmanı widget'larınız, widget ağacı boyunca aynı state bilgisi olan sınıfa başvurabilir.

Not: Yukarıdaki şekil verilerin widget'lardan bloklara nasıl aktığını göstermez. Birden çok widget'ın aynı, mantıksal state parçasını temsil eden birkaç blokla iletişim kurduğunu gösterir.

Bu bloklar, servisler, backendler ve hatta iki widget arasında aracıdır.Blok kullanıyorsanız, StatefulWidget kullanmanız gereken pek çok durum yoktur.(Genel istisna, formlarda olan ve henüz gönderilmemiş state'i olan widget'lardır.)

Bloklar nasıl çalışır?

Genel olarak, blokların iki görevi vardır. Widget'ların durumu güncellemesine (veri akışı girmesine) izin veren akışları ortaya çıkarmalı ve yeni bilgiler olduğunda ve yeniden oluşturmaları gerektiğinde widget'lara haber vermelidirler.

Image description

Bu süreçler birbiriyle ilişkilidir, çünkü bir birlerine dayanır, ancak aynı zamanda bağımsızdırlar ve biri olmadan diğeri olabilir. Blok'lar bilgi veya verileri alırlar, manipüle ederler ve uygun tarafa geri iletirler.

Blok mimarisini uygulamak

Bloc pattern'ın mimarisi, InheritedWidget örneğinden çok farklı değildir.Tek fark, inherited widget aracılığıyla dolaşan AppState'in, blokları widget'ın geri kalanına maruz bırakacak olmasıdır.

Bunun işe yaraması için gerekenler:
• InheritedWidget için değiştirilen kodun bir kısmını geri alın veya güncelleyin.
• Blokları inherited widget'la besleyin.
• Blokları ihtiyaç duydukları harici API'lere bağlayın.

AppStateManager ve BlocProvider

Blokları, widget ağacından aşağı ileterek de kullanabilirsiniz.(Bununla birlikte, blokları ağacın etrafından geçirmek olasıdır - ancak arzu edilmez -. Bunları sağlayıcı görevi gören InheritedWidget'larla birleştirmek en kolay yoldur.)

Devamı sonra...

Resources: Flutter in Action Chapter 8

Top comments (0)