Hi, guys! Jadi di sini gw pengen bikin blog singkat untuk dokumentasi belajar gw. Kali ini gw belajar gimana sih caranya untuk menggunakan State & Route Management dengan GetX di Flutter. Langsung cekidot aja!

Note: Ini adalah catatan gw dalam belajar GetX, jadi kalo bisa jangan dijadikan patokan yak gais h3h3 :D.

Get Package

Step 0:

Sebelum kita ngutak ngatik, mari kita ambil (copy) package getnya dulu di web pub.dev.

Setelah itu, jangan lupa kita paste di pubspec.yaml

Jangan lupa untuk flutter pub get yak gais!

Project Structure

Step 1:

Dalam /lib, buatlah dua folders yang bernama controllers dan juga pages. DI dalam folder controllers, tambahkan file counterController.dart, sedangkan di dalam folder pages, tambahkan file home.dart dan otherScreen.dart. Sehingga nantinya akan terlihat seperti gambar di bawah :D

State Management

Step 2:

Saatnya kita bikin state management! Kita bisa import get packagenya terlebih dahulu, lalu membuat stateless widget! Kurang lebih seperti ini!

import 'package:get/get.dart';

class CounterController extends GetxController {
  var counter = 0.obs;

  void increment() {
    counter++;
  }
}

Note: selalu gunakan .obs (observable) ketika elu mau keep track value dari datanya.

Route Management

Step 3:

Oke sekarang kita udah masuk di route management gais, sekarang mari kita ke main.dart dan meng-import get packagenya.

PENTING! Agar route management berfungsi, kita harus mengganti MaterialApp() menjadi GetMaterialApp().

Home.dart

Beralih sejenak ke home.dart, di sini kita membuat sebuah column berisi text dan button yang dibungkus dengan Scaffold(). Jangan lupa untuk meregister controller kita sebelum menggunakannya, caranya cukup mudah, yaitu:

final CounterController counterController = Get.put(CounterController());

Setelah itu, kita bisa memasukkan value dari counterController ini ke dalam Text yang tadinya sudah kita buat di dalam column,

Text("Clicks ${counterController.counter.value}")),

Di dalam button yang sudah kita buat tadi, tambahkan Get.to(OtherScreen()); agar nantinya kita dapat berpindah ke screen other.dart

Terakhir tinggal kita buat FloatingActionButton untuk menambahkan counter, sehingga hasil akhirnya akan terlihat seperti ini

import 'package:flutter/material.dart';
import 'package:flutweb_admin/controllers/counterController.dart';
import 'package:flutweb_admin/pages/other.dart';
import 'package:get/get.dart';

class HomeScreen extends StatelessWidget {
  final CounterController counterController = Get.put(CounterController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // Use Obx so that the increment (state) can work
      body: Obx(
        () => Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(child: Text("Clicks  ${counterController.counter.value}")),
            const SizedBox(
              height: 10,
            ),
            Center(
              child: ElevatedButton(
                  onPressed: () {
                    Get.to(OtherScreen());
                  },
                  child: const Text("Open other screen")),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counterController.increment();
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

Other.dart

Dalam other.dart, isinya kurang lebih sama aja kaya di home.dart, bedanya di sini adalah karena tadi kita udah ngeregister controller di home.dart. Di sini kita tinggal panggil doang dengan

final CounterController _counterController = Get.find();

Dan juga dalam buttonnya, kita menggunakan Get.back() untuk kembali ke page sebelumnya

ElevatedButton(
              onPressed: () {
                Get.back();
              },
              child: const Text("Open other Screen"))

Hasil akhir other.dart akan menjadi seperti ini

import 'package:flutter/material.dart';
import 'package:flutweb_admin/controllers/counterController.dart';
import 'package:get/get.dart';

class OtherScreen extends StatelessWidget {
  final CounterController _counterController = Get.find();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text("Screen was clicked ${_counterController.counter.value} times"),
          const SizedBox(
            height: 10,
          ),
          ElevatedButton(
              onPressed: () {
                Get.back();
              },
              child: const Text("Open other Screen"))
        ],
      ),
    );
  }
}

Hasil Akhir

Horeee semuanya udah selesai gais! Kalau kalian ngikutin dari awal sampai akhir, kira kira hasilnya akan seperti ini nih!

Note: Gambar kedua memang seperti itu :D untuk memperbaikinya, tinggal bungkus Text dan juga buttonnya dengan widget Center.

That’s all from me guys! Semoga dengan adanya blog ini, saya akan menjadi lebih paham dengan State Management & Route Management menggunakan GetX di Flutter, dan juga semoga ada yang terbantu dengan adanya blog ini :D Namun, seperti yang sudah saya katakan sebelumnya, blog ini hanyalah untuk dokumentasi saya belajar. Jadi, jangan jadikan patokan ya gais!