Flutter'da GetX Kullanımı


Görsel Referansı


Geçtiğimiz dönemde Flutter'da state ve navigate management için yeni bir çözüm sunan GetX kütüphanesi tanıtıldı. Bir süre GetX kullandıktan sonra GetX'in genel hatlarına bu yazıda değineceğim.


GetX, geliştiricilere daha kolay ve performanslı bir şekilde state management, navigation manager, internationalization ve tema kullanımı olanağı sunuyor. Ve bu sunduklarının hem performanslı olmasını hem de kolay bir şekilde uygulanmasını da sağlıyor. Kolaylığı sayesinde geliştiricilerin kalbini kısa sürede kazandı.


GetX'e Giriş

  • GetX'de bir route kullanımında bir yere gitmek istiyorsanız context kullanmanıza gerek yok. Çünkü GetX bunu sizin yerinize yapıyor. Örnek olarak ikinci bir sayfaya gitmek için Get.to(SecondPage()) demeniz yeterli hepsi bu kadar.

  • GetX ile iş mantığı ile UI görünümünü tamamen ayırabilirsiniz. Bunun için bindings yapısını implement etmeniz yeterlidir. Proje büyüdükçe de rahatlıkla UI ile iş mantığını ayrı tutabilirsiniz.

  • GetX, paket yönetimi için de oldukça kullanışlıdır. Proje içindeki paketlerin güncellemelerini takip eder. Çoğunu tek pakette topladığı için bir sorun yaşama olasılığınız düşük olur.

  • SharedPrefences çözümü noktasında GetX kendi çözümünü sunuyor ve GetStorage() ile key-value şeklinde datayı saklamanızı sağlıyor.

  • Eğer uygulamanızda bir giriş ekranı varsa ve form içinde girilen datayı validate etmek istiyorsanız yine GetX kolaylıkla validasyon yapmaktadır.


GetX Kurulumu


İlk olarak kütüphaneye buradan ulaşabilirsiniz. Bu şekilde ekleyip sonrasında pub upgrade ile güncelleyelim.


Adım 1- GetMaterialApp


MaterialApp() yerine GetMaterialApp ile kullanın. Peki neden? Sebebi ise state management ve route için kullanacaksanız eklemeniz gerekir. GetMaterialApp sayesinde uygulama içindeki route'u ayarlayabilir, iş parçağını görünümden ayırmak için bindings kullanmanıza olanak sağlar.


Aşağıdaki kod parçağında ise ilgili sayfadadaki logic bindingsi bildirmek için kullanılıyor.

 getPages: [GetPage(name:"/", page: () =>MyHomePage(), binding:HomeBinding())      ],


GetxController

Controller, iş mantığının olduğu sınıflardır. Değişkenler, fonksiyonlar buradan yönetilir. Buraya ise görünümden erişilmektedir. Asıl amaç görünüm ile iş mantığının işlemlerini birbirinden ayırarak kontrolü sağlamaktır. GetX bunu GetxController aracılığıyla sağlamaktadır.


GetxController ile birlikte onInit() ve onClose() metodları StatefulWidget yöntemi içinde olan initState() ve dispose() yerine geçer.


Örnek olarak Flutter'ın ilk açılışta barındırdığı increase uygulamasını kullandık. İş mantığı olan increase metodunu controller sınıfına taşıyarak görünümden ayırıyoruz. Burada 0.obs kullanarak herhangi bir değişkeni gözlemlenebilir yapabilirsiniz.



Burada ise oluşturulan Controller sınıfı bindings yoluyla implement ediyoruz.


Görünümde iş mantığını nasıl kullanılırız?


Burada bir home sayfası mevcut, floating butonuyla sayıyı arttırma işlemi yapılıyor. İlk olarak butona bastığım zaman çalışacak mantığı ve bastıktan sonra fonksiyondan dönen değeri ekrana nasıl bastırmalıyım sorusuna yanıt vermek gerekiyor.

final controller =Get.put(Controller());

Controller sınıfını Get.put yardımıyla sayfaya implement ediyoruz. Bu sayede Controller sınıfına ulaşabilir içindeki fonksiyonlara erişebilir ve kullanabilirim.

onPressed: () => controller.count.value++,

Butona basıldığında controller sınıfındaki count'a ulaşıp bu şekilde değerini attıracaktır.



Obx, widget'ta bir denetleyicidir. Belli bir türe ihtiyaç duymadan, herhangi bir değişkeni gözlemleyebilirsiniz. Burada ise count değerini gözlemleyip ekrana bastırmak için kullanıyoruz.

Obx(() => Padding(padding:constEdgeInsets.all(8.0),                  child:Text('${controller.count.value}',                    style:TextStyle(fontSize:25.0), 
 ),


Home Screen






Navigate ve Veri Taşıma


Peki GetX ile bir başka sayfaya nasıl gidebiliriz ve o sayfaya bir veriyi nasıl taşıyabiliriz? Bu sorunun cevabını GetX kolaylıkla verebiliyor.

Get.to(SecondPage(controller.count.value),                    transition:Transition.rightToLeftWithFade);

Get.to(Gidilecek Yer) ile kolaylıkla navigate yapabilir, bir butona basıldığında istenen sayfaya gidebilirsiniz. İstenen veriyi taşımak için de SecondPage() içinde istenen veri tipini belirten bir parametre eklemek gerekmektedir.


SecondPage()'de integer değerinde bir parametreyle gelen değeri alabilir ve ekrana bastırabilirsiniz.




SnackBar Kullanımı



SnackBar kullanımı oldukça kolay. Tek yapmanız gereken Get.snackbar() yazıp istenen parametrelere göre veriyi yazmaktır. Burada hem action belirtebilir hem arka plan rengini değiştirebilir hem de text'in rengini değiştirebilirsiniz.




Dialog Kullanımı



Dialog kullanımı yine Snackbar kullanımı gibi oldukça kolay. Get.defaultDialog() ile dialog yaratabilir, butonlara işlevler atayabilirsiniz.



Dark Theme


Tema kullanımı açısından da Flutter'ın kendi dark thema'sını kullanabilirsiniz. Get yardımıyla rahatlıkla temayı değiştirebilirsiniz. Burada belirtmekte fayda var. İlk olarak iki temayı da önce istediğiniz renk paletlerinde özelleştirmeniz daha doğru olur. Örnek olarak bir temayı özelleştirmedim, direkt olarak Flutter'ın kendi temasını kullandım.




Özet


Bu makalede GetX kütüphanesine genel bir bakış açısıyla yaklaştım ve genel hatlarıyla anlatmaya çalıştım. İçerisindeki konular kendi içlerinde detaylı anlatılması hepsi bir başka makalenin konusu.


Flutter'a giriş yapanlar veya Bloc, Provider gibi state management kütüphanelerinin öğrenilmesinde ve kullanılmasında zorluk yaşayanlar için GetX hayli çekici gelmektedir.


Kullanımı ve implementasyonu bir hayli kolay olan GetX kütüphanesini bireysel projelerinizde kullanabilirsiniz.


Github: https://github.com/merttoptas/getx_example


Kaynaklar

  1. https://pub.dev/packages/get


#cross #flutter #getx

0 yorum

Son Paylaşımlar

Hepsini Gör

Komünite

Platform

Mobiler.dev Anasayfa
  • Twitter
  • Instagram
  • development_düzenlendi_düzenlendi
  • Youtube
  • slack-icon-black_edited_edited_edited
  • Gri LinkedIn Simge
imageedit_2_9667998092.png
JetBrains Hakkında Detaylı Bilgi Alın

© 2021 by mobiler.dev

Kurumsal Yazar Hesapları

adesso.png
mobilerdevLogo.jpg
Yazarlık Başvurusu Hakkında Bilgi Alın, Başvuru Yapın.
Topluluk Yazarlarını Tanıyın