GetX adalah salah satu library populer di Flutter yang menawarkan solusi lengkap untuk Develop Aplikasi Flutter seperti State Management, Navigasi, Key-Value Storage, Dependency Injection, Localization. GetX dirancang untuk mempermudah pengembangan aplikasi Flutter dengan pendekatan yang sederhana, efisien, dan ramah pengembang pemula. namun karena kesederhanaannya GetX kurang cocok untuk aplikasi yang kompleks yang memiliki fitur yang terus bertambah. GetX cocok untuk aplikasi yang butuh waktu cepat dalam development nya.
Kelebihan GetX
- Ringan dan Cepat: Tidak memerlukan banyak boilerplate code.
- Reaktif: Perubahan state secara otomatis mempengaruhi UI.
- Manajemen Dependensi Mudah: Menghindari kompleksitas dalam mengelola dependensi.
- Navigasi yang Efisien: Routing yang lebih sederhana dibandingkan dengan Navigator bawaan Flutter.
untuk mempelajari lebih lanjut tentang GetX bisa ke link di bawah ini
get_cli
Ada satu tools yang mempermudah untuk membuat aplikasi dengan GetX. tools itu bernama get_cli.
get_cli adalah command line tools yang bisa meng-generate struktur folder dan file aplikasi Flutter dengan GetX Pattern.
untuk instalasinya bisa dengan mengetikkan command ini di cmd atau terminal (pastikan sebelumnya sudah menginstall dart sdk dan Flutter ya)
dart pub global activate get_cli
jika sudah terinstall coba ketikkan command “get”, jika tidak ada error maka berarti get_cli sudah berhasil terinstall.
kamu bisa melihat fitur-fitur dari get_cli di link dibawah ini
https://pub.dev/packages/get_cli
Membuat Project baru dengan get_cli
1. buka cmd atau terminal lalu arahkan ke folder yang kamu inginkan untuk menyimpan project aplikasi nya.
2. setelah itu ketikkan command
get create project
maka akan muncul pilihan type project yang akan kita buat
langsung Enter saja karena kita akan membuat Flutter Project (pilihan nomor 1)
setelah itu kita perlu input nama Project nya. kita ketikkan saja nama project nya, contohnya “latihan”
setelah itu muncul inputan untuk domain. sesuaikan dengan package aplikasi kita
disini saya contohkan com.saifur.
setelah itu akan muncul pilihan untuk bahasa pemrograman default untuk Swift, Kotlin, dan Apakah kita mau memakai linter. disini kita enter saja semua nya.
setelah itu proses generate file akan berlangsung.
setelah generate file selesai selanjutnya akan muncul pilihan Pattern dari Aplikasi kita memakai GetX atau Clean Pattern. disini kita akan memakai GetX maka langsung Enter saja.
akan muncul konfirmasi lagi, langsung Enter saja
disini proses pembuatan project dari get_cli sudah selesai. kita tinggal membuka Project nya ke IDE kita.
Struktur Folder
Setelah project nya kita buka di IDE, kita buka folder lib (di Flutter, semua kode dart letaknya di dalam folder lib) maka akan muncul struktur folder MVC (Model View Controller) yang merupakan Architecture Pattern default dari GetX dan get_cli.
di dalam folder app ada folder :
- data : akan menjadi letak kode yang berhubungan dengan data (seperti config untuk API, model response API, config untuk local database, dll).
- modules : menjadi folder utama untuk kode UI dan Logic nya. di dalam modules ada folder home dengan beberapa folder di dalamnya
- bindings : berisikan dependency injection (kita tidak membahas ini di latihan kali ini)
- controllers : berisikan kode untuk Logic dari UI
- views : berisikan kode untuk UI / view dari halaman
- routes : berisikan kode config untuk Navigasi / Route tiap halaman di Aplikasi
Membuat Halaman baru dengan get_cli
1. Sekarang kita coba membuat halaman baru. ketikkan command berikut
get create page:luaspersegi
yap kita akan coba bikin halaman untuk menghitung luas persegi
maka akan muncul struktur folder baru yang sama seperti di home.
2. Sekarang coba ubah view di halaman luaspersegi (di file luaspersegi_view.dart) menjadi seperti berikut :
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/luaspersegi_controller.dart';
class LuaspersegiView extends GetView<LuaspersegiController> {
const LuaspersegiView({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
width: double.infinity,
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Panjang"),
TextField(
decoration:
InputDecoration(hintText: "Masukkan Panjang Sisi Persegi",),
keyboardType: TextInputType.number,
),
SizedBox(
height: 20,
),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
child: Text(
"Hitung",
),
),
),
SizedBox(
height: 20,
),
Text("Hasilnya disini")
],
),
),
),
);
}
}3. Setelah itu coba untuk run code nya ke perangkat / emulator kalian dengan mengetikkan command
flutter run
lho kenapa kok tampilannya masih Home ?
ini karena kita belum merubah INITIAL route nya. pergi ke file app_pages.dart di folder routes. ganti variable INITIAL menjadi Routes.LUASPERSEGI
4. Setelah itu coba run kembali
maka tampilan akan berubah sesuai dengan isi kode kita.
disini jika kita klik hitung maka tidak akan terjadi apa-apa. karena kita belum menambahkan logic nya. disini kita perlu menambahkan controller untuk TextField dan function hitung untuk menghitung luas persegi dan menampilkan hasilnya di Text di bawah button Hitung.
5. Pergi ke file luaspersegi_controller.dart
import 'package:get/get.dart';
class LuaspersegiController extends GetxController {
//TODO: Implement LuaspersegiController
final count = 0.obs;
@override
void onInit() {
super.onInit();
}
@override
void onReady() {
super.onReady();
}
@override
void onClose() {
super.onClose();
}
void increment() => count.value++;
}disini ada beberapa method default.
ada onInit untuk menjalankan kode saat Halaman di inisialisasi (biasanya kode untuk get data ditaruh disini), ada onReady untuk menjalankan kode saat Halaman selesai di load, dan onClose untuk menjalankan kode saat Halaman di tutup (back ke halaman sebelumnya).
kita tambahkan TextEditingController, hasil perhitungan, dan method hitung nya disini. sehingga kode nya akan menjadi seperti ini :
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class LuaspersegiController extends GetxController {
final TextEditingController panjangController = TextEditingController();
final hasil = 0.obs;
void hitung() {
if (panjangController.text.isNotEmpty && panjangController.text != "0") {
int panjang = int.parse(panjangController.text);
hasil.value = panjang * panjang;
} else {
hasil.value = 0;
}
}
@override
void onInit() {
super.onInit();
}
@override
void onReady() {
super.onReady();
}
@override
void onClose() {
super.onClose();
}
}pada method hitung kita cek dulu apakah text dari inputan panjang tidak kosong dan bukan “0”, dan jika tidak maka set hasilnya adalah 0.
untuk mendapatkan nilai panjang berupa integer, kita ubah dulu String ke Integer dengan int.parse (secara default controller.text mengembalikan nilai bertipe String).
setelah dapat nilainya kita hitung dan masukkan ke value dari variable hasil.
disini variable hasil, menggunakan parameter .obs yang menandakan variable nya bersifat observer (perubahannya akan dibaca di UI) dan jika ingin merubah nilainya maka menggunakan parameter .value maka UI akan otomatis berubah.
6. Selanjutnya kita pasang ke view kita, kembali ke file luaspersegi_view.dart. ubah kode menjadi seperti berikut ini.
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/luaspersegi_controller.dart';
class LuaspersegiView extends GetView<LuaspersegiController> {
const LuaspersegiView({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
width: double.infinity,
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Panjang"),
TextField(
controller: controller.panjangController,
decoration: InputDecoration(
hintText: "Masukkan Panjang Sisi Persegi",
),
keyboardType: TextInputType.number,
),
SizedBox(
height: 20,
),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {
controller.hitung();
},
child: Text(
"Hitung",
),
),
),
SizedBox(
height: 20,
),
Obx(
() => Text(
"Hasilnya : ${controller.hasil.value}",
),
),
],
),
),
),
);
}
}bedanya dari kode awal adalah, kita tambahkan controller di TextField dengan controller.panjangController. untuk mendapatkan variable dari luaspersegi_controller.dart kita tinggal menggunakan variable controller.
kita juga menambahkan method hitung property onPressed di ElevatedButton.
kita juga membungkus Widget Text dengan Widget Obx dan memasang variable hasil di dalam Text nya.
lalu apa itu Widget Obx ?
Obx sendiri berfungsi sebagai penanda bagian mana dari Widget yang perlu di refresh. disini yang membedakan GetX dengan setState. setState me refresh / me load ulang keseluruhan Widget termasuk Widget statis yang tidak berubah, sedangkan GetX kita bisa menentukan bagian mana yang perlu di refresh sehingga pemakaian aplikasi bisa lebih hemat memory karena refresh nya tepat sasaran.
7. sekarang coba untuk running aplikasinya
maka aplikasi akan berjalan dengan semestinya. jika kita isikan Panjang lalu klik Hitung akan muncul hasilnya.
Kesimpulan
Cukup mudah bukan menerapkan GetX di Flutter ? apalagi ada get_cli kita jadi lebih mudah lagi dalam development nya karena semua serba ada dan auto generate sehingga kita tinggal fokus ke Logic dan UI nya.
