CV'me Gözat

Flutter GetX İle State Managament

Haziran 27, 2021

Flutter GetX İle State Managament

Flutter GetX İle State Managament.

Bu yazımda sizlere Flutter’de state magament konusunda bize yardımcı olan GetX paketinden kısaca bahsedip, basit bir uygulama ile sizlere aktaracağım.

Yazıma geçmeden önce state ve state managament nedir kısaca ondan bahsetmek istiyorum.

State Nedir?

State uygulamanın bulunduğu durumu temsil etmektedir. Bu durum arka planda bir çok parametreye bağlıdır ancak kullanıcı tarafından sadece arayüz gözüktüğünden kısaca state; ekranda görülen andır diyebiliriz.

State Managament Nedir?

Kısaca uygulamanın bulunduğu durumu kontrol edip yönetmekte işimize yarar.

Birden fazla ekranın olduğu uygulamalarda tüm ekranları StatfulWidget içerisinde,setState metodu ile kontrol etmek,güncellemek hem kod okunabilirliği açısından hem de uygulamanın verimliliği anlamında maalesef pekte iyi etki ve sonuçları olmayan bir yapıya ulaştırır bizleri. Birden fazla ekranı kontrol etmek için kullanacağımız bu paketler ile hem kod okunabilirliği yüksek hem de daha verimli uygulamalar geliştiriyor olacağız.

Şimdi gelelim GetX nedir ona..

GetX Nedir?

Flutter GetX İle State Managament yapacağız madem GetX’e ve bize sunduklarına bir göz atalım hemen.

GetX, geliştiricilere daha kolay ve performanslı bir şekilde state management, navigation manager ve tema kullanımı olanağı sunuyor. Gerek performans gereksede kullanım kolaylığı açısından geliştiricilere büyük katkıda bulunuyor diyebiliriz.

  • Route tanımlaması yaptığımız da bizden context istemez.
  • Bindings yapısı ile ui ve logic kısımlarının birbirinden ayrılmasını ve böylelikle ikisininde kolay yönetilmesini sağlar .
  • Cache işlemlerinde kendi yarattığı ve sunduğu GetStorage() yapısı vardır.

Şimdi gelin bu paketi örnek bir uygulama üzerinden inceleyip anlamaya çalışalım hep beraber. Flutter GetX İle State Managament rnek uygulamamızda bir sayaç uygulaması olacak.

 

  1. Öncelikle yeni bir Flutter projesi oluşturun.

  2. Daha sonra buradan GetX kütüphanesini projenize ekleyin. Ben 4.1.4 sürümü ile çalışıyorum.

  3. Projenize eklediğinizde pubspec.yaml dosyanız böyle bir hal alacaktır;

    dependencies:
      flutter:
        sdk: flutter
      
      cupertino_icons: ^1.0.2
      get: ^4.1.4

     

  4. Projemize kütüphaneyi başarılı bir şekilde import ettikten sonra main.dart dosyamızı açalım.

  5. Main.dart dosyamızda default olarak gelen MaterialApp() yerine GetMaterialApp() kullanıyoruz. Bu sayede uygulama içindeki route’u ayarlayabilir, logic kısmını views kısmından ayırmak için bindings kullanmanıza olanak sağlar.

  6. Hemen aşağıda ki kodları bir göz atalım

    import 'package:examp_1/Controller/home_binding.dart';
    import 'package:examp_1/VIEWS/home_page.dart';
    import 'package:flutter/material.dart';
    import 'package:get/get.dart';
    
    void main() => runApp(GetMaterialApp(home: HomeViews()));
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return GetMaterialApp(
          initialRoute: "/",
          initialBinding: HomeBinding(),
          getPages: [
            GetPage(name: "/", page: () => HomeViews(), binding: HomeBinding())
          ],
          title: "GETX EXAMPLE 1",
          theme: ThemeData(
            primarySwatch: Colors.blue,
            visualDensity: VisualDensity.adaptivePlatformDensity,
          ),
        );
      }
    }
    //main.dart

    main fonksiyonu içerisinde GetMaterialApp() parametresini kullandık. Daha sonrasında başlangıç için ilk route ve binding parametlerini tanımladık.getPages ilgili sayfaya logic bağlantısını(binding) sağladık.

  7. Sırada Controller mekanizmasını kurmak var. Controller içerisinde logicler barındıran yapılardır. Yani fonksiyon ve değişken gibi yapıları buradan kontrol ederiz. Kontrolü de elbette arayüzden sağlarız.

  8. controller.dart adında yeni bir sayfa açıp içerisine aşağıda ki kodları yazıyoruz.

    import 'package:get/get.dart';
    
    class Controller extends GetxController {
      var count = 0.obs;
      increment() => count++;
    }//controller.dart

    kontrolü gördüğünüz üzere GetxController ile sağlıyoruz. 0.obs ile değişken dinleme işlemi yapıyoruz. increments fonksiyonu ile de count değerini bir bir arttırıyoruz.

  9. Bindings işlemi için HomeBindings.dart dosyasını oluşturalım ve aşağıdaki kodları yazalım.

    import 'package:examp_1/Controller/controller.dart';
    import 'package:get/get.dart';
    
    
    class HomeBinding implements Bindings {
      @override
      void dependencies() {
        Get.put<Controller>(Controller());
      }
    }

    Burada Controller sınıfı bindings yoluyla implement ediyoruz.

  10. Şimdi sıra geldi views kısmında bu olayı görüntüleme ve tetikleme işlemine. Bunun için home_page.dart adında bir doysa oluşturup içine aşağıdaki kodları yazıyorum.

    import 'package:examp_1/Controller/controller.dart';
    import 'package:flutter/material.dart';
    import 'package:get/get.dart';
    
    class HomeViews extends StatelessWidget {
      final controller = Get.put(Controller());
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("GET_x EXAMPLE"),
            centerTitle: true,
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  "Sayacı artırmak için butona basın",
                ),
                Obx(
                  () => Padding(
                    padding: EdgeInsets.all(8.0),
                    child: Text(
                      "${controller.count.value}",
                      style: TextStyle(
                        fontSize: 18.0,
                      ),
                    ),
                  ),
                ),
                FloatingActionButton(
                  onPressed: () => controller.count.value++,
                  tooltip: 'Artır',
                  child: Icon(Icons.add),
                ),
              ],
            ),
          ),
        );
      }
    }
    

    Burada butona bastığım zaman çalışacak logic ve logic içerisinde ki fonksiyondan dönen değeri almak için “final controller = Get.put(Controller());” yapısını kullanıp Get.put ile controlleri implement ediyoruz. Daha sonra logicten dönen değeri alıp ekrana basmak için controlleri kullanıp içerisindeki değere ulaşıyoruz. Onuda butona basınca birer birer artırıyoruz. Bu işlemi onpress metodunda “controller.count.value++” kodlarıyla gerçekleştiriyoruz. Butona her basıldığında controller sınıfındaki count’a ulaşıp bu şekilde değeri artıracıktı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.

Projenin source koduna erişmek için buraya tıklayın.

Evet artık uygulamamızı tamamladık. Artık derleyip çalıştırabiliriz. Uygulamanın ekran görüntüsü aşağıdaki gibidir.

 

Yardımcı kaynaklar: https://www.mobiler.dev/post/flutter-da-getx-kullanimi

Posted in Blog, Dart, FlutterTags:
Write a comment