Today I Learned Flutter : GetX State Management

GetX

GetX tidak hanya sekedar state management library saja, tapi melainkan sebuah microframework yang dikombinasikan dengan route management, dan dependency management

GetX memiliki 3 prinsip dasar, yaitu :

• Performance : fokus pada meminimalisir penggunaan memori dan sumber daya sehingga dapat meningkatkan performa
• Productivity : sangat intuitif dan efisien sehingga menghemat waktu pengembangan aplikasi
• Organization : memisahkan logika bisnis dengan logika tampilan dan tidak memerlukan context untuk mengarahkan ke routes berbeda sehingga tidak membutuhkan stateful widget.

Ada 3 Pilar GetX :

• State Management : pada GetX terdapat 2 jenis state manager yang dapat digunakan yaitu reactive dan simple. Untuk reactive dapat menggunakan Obxatau GetX . Sedangkan yang simple dapat menggunaka GetBuilder.
• Route Management : Baik navigasi layar, menampilkan snackbar, dialog box, bisa kita gunakan tanpa menggunkan context.
• Dependency Management : GetX memiliki solusi yang sederhana namun powerful untuk melakukan ini

GetX juga memiliki nilai tambah selain sebagai state manager yaitu :

• Internationalization
• Validation
• Storage
• Theme
• Responsive View

Reactive State Manager

Reactive State Manager salah satu state managet pada getx yang memiliki fungsionalitas yang lebih simple penggunaanya, karena dengan menggunkaan ini kita tidak perlu lagi membuat StreamController maupun StreamBuilder untuk mengakses state yang sudah dibuat. Ada dua macam reactive state manager di GetX, yaitu :

• Obx
• Getx

Contoh Pengguunaan Sederhana :

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get/get.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  var count = 0.obs;
  void add() {
    count++;
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
            child: Obx(
          () => Text(
            "Angka $count",
            style: TextStyle(fontSize: 32),
          ),
        )),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            add();
          },
        ),
      ),
    );
  }
}

untuk menggunakan obx kita harus menambahkan .obx dibelakan nilai dari variabel seperti kode diatas, kemudian kita bungkus widget Text dengan Obx Widget jika kita ingin melihat perubahan yang terjadi pada state yang sudah kita buat

Let’s get going with GetX state management with Obx

Step 1: Buat flutter project baru

Caranya sama seperti biasa ketika membuat flutter project

Step 2: Add required dependecy

tambahkan ini dalam pubspec.yaml file:

get: latest // sesuaikan dengan versi saat ini
get_storage: latest // sesuaikan dengan versi saat ini

lalu jalankan pubspec.yaml

Step 3 : Project Structure

|. main.dart
|  model
|-- orang.dart
|  controller
|-- orangController.dart

Step 4: Coding

pada file orang.dart didalam folder model isikan kode berikut :

class Orang {
  String nama;
  int umur;
  Orang({required this.nama, required this.umur});
}

kode diatas kita membuatkan model Orang yang berisikan properti nama dan umur.

Lalu pada orangController.dart tuliskan kode berikut :

import 'package:get/get.dart';
import 'package:getx_practice/model/orang.dart';
class OrangController extends GetxController {
  var orang = Orang(nama: "faisal", umur: 40).obs;
  void ChangeUpperCase() {
    orang.update((_) {
      orang.value.nama = orang.value.nama.toUpperCase();
    });
  }
}

pertama kita membuat objek orang yang merupakan instance dari Class Orang lalu objek tersebut kita observasi setiap ada perubahan dengan menambahkan .obx . Lalu kita buat fungsi ChangeUpperCase yang didalamnya kita akan mengubah nilai properti nama menjadi uppercase. didalam fungsi ChangeUpperCase terdapat function update , fungsi ini gunakan untuk dapat mengubah nilai dari properti orang, tanpa ini maka properti tidak akan berubah

Lalu pada main.dart tuliskan kode berikut :

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get/get.dart';
import 'package:getx_practice/controller/orangController.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  final OrangC = Get.put(OrangController());
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
            child: Obx(
          () => Text(
            "Angka ${OrangC.orang.value.nama}",
            style: TextStyle(fontSize: 32),
          ),
        )),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            OrangC.ChangeUpperCase();
          },
        ),
      ),
    );
  }
}

get.put(OrangController()) digunakan untuk menggunakan OrangController lalu dimasukan ke dalam variabel OrangC . Untuk menampilkan nilai nama Widget text kita bungkus dengan Widget Obx. lalu pada floating button kita panggil OrangC.ChangeUpperCase() untuk menjalankan fungsi tersebut

Let’s get going with GetX state management with GetX

Terdapat aternative lain untuk menerapkan reactive state management, yaitu dengan menggunakan GetX.

Didalam folder controller yang sudah kita buat sebelumnya , buat sebuah file dengan nama counterController.dart dan tuliskan kode berikut:

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

Lalu ubah main.dart menjadi seperti berikut :

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx_practice/controller/counterController.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
            child: GetX<CounterController>(
          init: CounterController(),
          builder: (controller) => Text(
            "Angka ${controller.count}",
            style: TextStyle(fontSize: 32),
          ),
        )),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            Get.find<CounterController>().increment();
          },
        ),
      ),
    );
  }
}

Kode diatas kita mengganti Obx widget dengan GetX widget yang merupakan instance dari OrangController. kemudian kita init terlebih dahulu controller yang ingin digunakan, disini kita menggunakan OrangController, kemudian kita tempatkan Text widget didalam builder. Untuk memanggil fungsi increment kita menggunakan Get.find() yang sudah di instance dari OrangController sehingga dapat memanggil fungsi increment.