Flutter -Mobx İle Zar Uygulaması
Herkese Merhaba 🙋♀️ Mobx ile tüm sihiri elinizde tutup, kullanmaya hazır mısınız?
Bu yazımda Flutter Mobx’den bahsedip, örnek ile açıklamaya çalışacağım.Hazırsanız başlayalım💥
Mobx, uygulamamızın reaktif verilerini (reaktif diyorum çünkü ne zaman bir değişiklik yapılsa otomatik olarak bildirir) UI ile bağlamayı kolaylaştırır.
Neden Mobx?
Mobx, kullanıcı arayüzünü iş (logic) mantığından ayırmayı kolaylaştırarak kodlama sürecini; hızlı, test edilebilir ve yeniden kullanabilir hale getirir.
Mobx yapı taşları nedir dersek;
- Observable( @ observable ): Projemizdeki sayfadaki değişiklikleri değerlendirip,gözlemlendirebilir hale getirir.
- Computed ( @ computed): Sayfamızdaki observer değişkenlere bağlıdır. Observer her değiştiğinde yeni hesaplanan değeri döndürür.
- Action ( @ action): Doğrudan observable değiştirebilir ancak bunu yaparken action kullanılması önerilir.Yani observable olarak tanımlanan değişkenleri değiştirmemizi sağlar.
Örnek projemize geçmek istersek:
Projemizde sayfamızda bulunan zarlar ile oynuyoruz.Amacı zarlara dokundukça zarın yüzeyindeki sayıların, random değişimini sağlıyor ve toplamını veriyor.
MVVM ile Mobx kullanarak geliştiriyoruz.MVVM; model,view, viewmodel oluşan katmanlı mimaridir.Model ve view arasında katman oluşturup işlemlerin belirlenip yapıldığı yerdir.
Mobx ile projemize başlarken öncelikle eklemiz gereken paketler:
Sıradaki aşama aşağıdaki komutu yazarak kod oluşturucuyu çalıştırmak:
Klasör yapımızı oluşturduktan sonra ekran tasarımına geçebiliriz.
Ekranımızda 2 zar ve bunların toplamını veren total değerini görüyoruz.Zarlarımızı oluştururken StatelessWidget kullandık çünkü mobx bizim için gerekli çağırmayı ve oluşturmayı sağlayacaktır.Sayfa tasarımı için gerekli kodlara buradan ulaşabilirsiniz.
Dilerseniz mobx ile ilgili kısma geçebiliriz💁♀️
Burdaki oluşumda build runner watch çalıştığını kontrol edilmeli.Çünkü eşzamanlı olarak ‘dice_game_model.g.dart’ dosyasının oluşması gerekiyor.
İlk olarak left ve right değerlerinde sayılarımızı oluşturarak başlıyoruz.
@ observable : Random değiştirilecek sayılarımızı observable ekledik çünkü bu her değişkeni reaktif yapar yani yapılan değişiklik otomatik olarak değiştirilir.Random değişecek sayılarımız, her tıklanıldığında değişmesi gereken sayıları haber verecektir.
@ action : Zar üstünde rakamları dokunuşla oluşturmak için yeni bir değişken kullanıyoruz.Bu da @ action oluyor.
Observable ile güncellediğimiz değişkenleri action ile sarıyoruz.Bu kısımda view klasöründeki Image değişkenini Observe ile bağlayarak tıklanıldığında otomatik güncellenmesini başlatmış oluyoruz.
@ computed : Bu kısımda observer olan left ve right değerlerini dinleyerek computed bize total değişkenin son halini hesaplanmış bir şekilde değerini verecektir.
Sona yaklaşırken projemizin son aşaması aşağıdaki gibidir.
Umarım faydalı bir içerik olmuştur! Okuduğunuz için teşekkür ederim,bol hatasız kodlamalar 🌟Projenin tamamının kodlarına buradan erişebilirsiniz.
Referanslar:
