Flutter GetX ile State Yönetimi

GetX, Flutter için basit ve güçlü bir çözümdür. Yüksek performanslı state yönetimi, bağımlılık enjeksiyonu (dependency injection) ve route yönetimini hızlı ve pratik bir şekilde birleştirir.

GetX’in 2 temel prensibi vardır: VERİMLİLİK VE PERFORMANS. GetX, performansa ve minimum kaynak tüketimine odaklanmıştır. GetX, Streams veya ChangeNotifier’ı kullanmaz. (ChangeNotifier’ın çok fazla kullanılması Flutter dökümantasyonunda da belirtildiği üzere performans sorunlarına yol açabilir.)

Bu yazımda GetX’in state management kısmından bahsedeceğim.

class HomeController extends GetxController {

  var isLoading = false.obs;
  Rx<UrunModel> _urunler = Rx<UrunModel>();
  
  UrunModel get urunler => _urunler.value;
  
  @override
  void onInit() {
    fetchAPI();
    super.onInit();
  }
  
  void fetchAPI() async {
    try {
      isLoading(true);
      var res = await ApiService.urunleriGetir();
      if (res != null) {
        _urunler.value = res;
      }
    } finally {
      isLoading(false);
    }
  }

}

Bir değişkeni GetX değişkenine çevirmek için 3.satırdaki gibi sonuna .obs ekleyebilir ya da 4. satırdaki gibi “Rx” ile sarmalayabiliriz.

View üzerinden değişkene 6. satırdaki gibi bir getter metod tanımlayarak erişebileceğimiz gibi HomeView.dart dosyasının 28.satırındaki gibi direkt değişken isminin sonuna “.value” koyarakta erişebiliriz. (“.value” ile bir GetX değişkeninin değerini alırız.)

8. satırda yer alan “onInit()” metodu ise Stateful Widget’taki “InitState” gibidir, bu Controller ilk çalıştığında gerçekleştirilecek işlemleri barındırır.

Şimdi Controller üzerindeki verileri view’da nasıl gösterebileceğimize bakalım.

class HomeView extends StatelessWidget {
  final HomeController Controller = Get.put(HomeController());
  final String text =
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elementum at quam vitae porta. ';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: IconButton(
            onPressed: () {
              Get.back();
            },
            icon: Icon(
              Icons.arrow_back_ios,
              color: Colors.black,
            ),
          ),
          title: Text(
            'Ürünler',
            style: TextStyles.appBarMenu,
          ),
          centerTitle: true,
          backgroundColor: Color(0xffffffff),
          elevation: 0,
        ),
        body: Obx(() {
          if (Controller.isLoading.value)
            return Center(child: CircularProgressIndicator());
          else
            return SingleChildScrollView(
              child: Container(
                width: 1000,
                decoration: BoxDecoration(
                  color: Colors.grey.shade300,
                ),
                child: Center(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      SizedBox(
                        height: 20,
                      ),
                      for (var item in Controller.urunler)
                        UrunCard(
                          resim: item.imageUrl,
                          baslik: item.title,
                        ),
                      SizedBox(
                        height: 50,
                      ),
                    ],
                  ),
                ),
              ),
            );
        }));
  }
}

Burda 2. satırda gördüğümüz şekliyle controller çağırabilir ve 44. ü satırdaki gibi Controller’da tanımladığımız getter metoduna ulaşabiliriz.

GetX değişkenlerinde yapılan değişikliklerin yakalanıp ekranın tekrar render edilmesi için 27. satırdaki gibi değişkenleri kullandığımız yerleri “Obx” widgetı ile sarmalamalıyız.

Bir sonraki yazımda GetX ile route yönetimi ve bağımlılık enjeksiyonundan (dependency injection) bahsedeceğim.