State Management Flutter dengan GetX

Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar cara menggunakan plugin GetX untuk state management di flutter dengan studi kasus sederhana. Bagaiaman caranya?, ayo ikuti selengkapnya di bawah ini.

State Management

State Management adalah cara bagaimana aplikasi mengelola dan mempertahankan data di dalam sebuah aplikasi. Jika digunakan, penggunaan resource pada sebuah aplikasi akan sangat efisien. Sebelum menggunakan state management, kita bisa menggunakan widget stateful yang disediakan oleh flutter. Tapi widget ini akan merender ulang keseluruhan aplikasi. Padahal, kita hanya butuh untuk memperbarui satu atau beberapa data saja. Maka dari itu kita membutuhkan state managment.

Pada tutorial kali ini, kita akan belajar cara menggunakan state management dengan package GetX. Caranya cukup mudah, studi kasus kita kali ini adalah membuat counter sederhana. Counter ini biasa dibuat saat project flutter di-create pertama kali. Kita akan ubah counternya menggunakan state management.

Baca Artikel Lain ✨

📰 1. Membuat Restful Api di Laravel Tanpa Library Tambahan Part 1 read more

📰 2. Menampilkan Data dengan API dan Token di Laravel Part 2 read more

📰 3. Cara Membuat Custom Registrasi dan Prosesnya di Laravel Part 1 read more

📰 4. Cara Membuat Custom Login di Laravel Part 2 read more

Cara Menggunakan State Management GetX

1. Buatlah sebua project flutter baru dengan nama yang kalian inginkan. Gunakan flutter versi terbaru atau minimal support null safety.

2. Buka file pubspec.yaml. Lalu tambahkan package get: seperti gambar di bawah ini. Lalu simpan file untuk mengunduh package

pubspec.yaml

3. Buka lib/main.dart lalu ganti dengan script di bawah ini.

  import 'package:flutter/material.dart';
  import 'package:get/get.dart';
  
  void main() {
    runApp(CounterPage());
  }
  
  class CounterController extends GetxController {
    var counter = 0.obs;
  
    void increment() {
      counter.value++;
    }
  }
  
  class CounterPage extends StatelessWidget {
    final CounterController _counterController = Get.put(CounterController());
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          appBar: AppBar(
            title: Align(
              alignment: Alignment.center,
              child: Text("State Management with GETX")
            ),
          ),
          body: Center(
            child: Obx(
              () => Text(
                _counterController.counter.value.toString(),
                style: TextStyle(fontSize: 24),
              ),
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: _counterController.increment,
            child: Icon(Icons.add),
          ),
        ),
      );
    }
  }

Script tersebut adalah contoh penggunaan GetX untuk state management dalam aplikasi Flutter. Berikut adalah penjelasan script tersebut:

1. CounterController adalah kelas yang mengextends GetxController, yang berfungsi sebagai controller untuk mengelola state. Di dalamnya terdapat var counter = 0.obs;, yang merupakan variabel state yang akan diobservasi menggunakan obs (observables) dari GetX. 
2. void increment() adalah fungsi yang digunakan untuk menambahkan nilai counter. Ketika fungsi ini dipanggil, counter.value++ akan meningkatkan nilai variabel counter secara otomatis.
3. CounterPage adalah kelas StatelessWidget yang berfungsi sebagai halaman yang akan ditampilkan. Pada CounterPage, terdapat _counterController yang diinisialisasi dengan Get.put(CounterController()). Ini berarti _counterController akan digunakan sebagai instance dari CounterController dan diatur sebagai controller untuk halaman ini menggunakan GetX.
4. Di dalam build() method, halaman ditampilkan menggunakan Scaffold. Di tengah halaman, terdapat Obx widget, yang digunakan untuk mengamati perubahan pada state counter dari CounterController. Saat terjadi perubahan, Text widget akan diperbarui dengan nilai terbaru dari counter. Nilai tersebut diambil dengan _counterController.counter.value.toString(). 
5. Di bagian bawah halaman, terdapat FloatingActionButton yang akan menjalankan fungsi increment() ketika ditekan. Ketika tombol tersebut ditekan, nilai counter di CounterController akan bertambah, dan widget yang menggunakan Obx akan diperbarui secara otomatis dengan nilai terbaru.

Ok, sekarang saatnya kita melakukan uji coba. Silahkan jalankan emulator jika berhasil maka tampilan akan terlihat seperti gambar di bawah ini. Tap tombol + untuk menaikan angka.

Counter App

Mudah bukan?, sekarang kalian sudah bisa menggunakan state management. Selanjutnya kalian bisa melakukan improvisasi penggunaan state management pada studi kasus yang lebih kompleks lagi. Untuk melengkapi pemahaman kalian tentang state management berikut ini link cara menggunakan state management studi kasus menghitung cart produk

Sekian tutorial cara menggunakan GetX flutter. Semoga tutorial ini bermanfaat. Jika ada pertanyaan, silahkan tanya di kolom komentar di bawah ini. Sekian dan terima gaji.