Memulai Dengan Paket GetX Dalam Aplikasi Flutter

Flutter adalah salah satu cara tercepat untuk membangun aplikasi asli lintas platform yang sesungguhnya. Ini menyediakan fitur yang memungkinkan pengembang untuk membangun pengalaman UI yang benar-benar indah bagi penggunanya.

Namun, sering kali untuk mencapai hal-hal seperti menavigasi ke layar, manajemen status, dan menunjukkan peringatan, banyak boilerplate diperlukan. Pelat boiler ini cenderung memperlambat efisiensi pengembangan pengembang yang mencoba membangun fitur dan memenuhi tenggat waktu mereka.

Ambil contoh boilerplate yang diperlukan untuk menavigasi ke layar dalam aplikasi Flutter. Katakanlah Anda ingin menavigasi ke layar bernama AboutScreen . Anda harus menulis:

 Navigator.push( context, MaterialPageRoute(builder: (context) => AboutScreen()), );

Akan lebih efisien dan ramah pengembang untuk melakukan sesuatu seperti:

 Get.to(AboutScreen());

Saat Anda perlu menavigasi kembali ke halaman sebelumnya di Flutter, Anda harus menulis:

 Navigator.pop(context);

Anda akan melihat bahwa kami selalu bergantung pada properti konteks untuk sesuatu yang biasa seperti menavigasi antar layar. Bagaimana jika sebaliknya, kita dapat melakukan sesuatu seperti ini:

 Get.back();

Contoh di atas adalah beberapa cara pengembangan aplikasi di Flutter dapat ditingkatkan menjadi lebih intuitif dan efisien dengan lebih sedikit boilerplate. Jika Anda menyukai kesederhanaan dan efisien dalam membangun fitur dan ide, di Flutter maka paket Get akan menarik minat Anda.

Apa itu GetX

Get atau GetX adalah framework yang cepat, stabil, dan ekstra ringan untuk membangun aplikasi Flutter.

GetX dikirimkan langsung dengan manajemen status kinerja tinggi, injeksi ketergantungan cerdas, dan manajemen rute dengan cara yang sederhana dan praktis.

GetX bertujuan untuk meminimalkan boilerplate sambil juga menyediakan sintaks yang sederhana dan intuitif untuk digunakan pengembang saat membangun aplikasi mereka. Inti dari GetX adalah 3 prinsip ini:

• Pertunjukan
  GetX berfokus pada kinerja aplikasi Anda dengan menerapkan fitur-fiturnya untuk menggunakan sumber daya sesedikit mungkin.
• Produktifitas
  GetX ingin pengembang menggunakan fitur-fiturnya untuk menjadi produktif secepat mungkin. Ia melakukannya dengan menggunakan sintaks dan praktik yang mudah diingat. Misalnya, secara umum, pengembang harus peduli untuk menghapus pengontrol dari memori tetapi GetX di luar kotak menyediakan manajemen cerdas yang memantau pengontrol di aplikasi Anda dan menghapusnya saat tidak digunakan secara default.
• Organisasi
  GetX memungkinkan pemisahan Tampilan, logika presentasi, logika bisnis, injeksi ketergantungan, dan navigasi di aplikasi Flutter Anda. Anda tidak memerlukan konteks untuk bernavigasi di antara rute, jadi Anda tidak bergantung pada pohon widget untuk navigasi. Anda tidak memerlukan konteks untuk mengakses pengontrol/blok Anda melalui inheritedWidget , sehingga Anda dapat sepenuhnya memisahkan logika presentasi dan logika bisnis dari lapisan tampilan Anda. Anda tidak perlu menyuntikkan kelas Controllers/Models/Blocs Anda ke dalam pohon widget Anda melalui multiproviders, karena GetX ini menggunakan fitur injeksi ketergantungannya sendiri, memisahkan DI dari tampilannya sepenuhnya.

Fitur GetX

GetX hadir dengan beberapa fitur yang Anda perlukan dalam pengembangan aplikasi harian Anda di Flutter. Mari kita lihat mereka:

Manajemen Negara

Salah satu fitur unggulan GetX adalah fitur manajemen status intuitifnya. Manajemen status di GetX dapat dicapai dengan sedikit atau tanpa boilerplate.

Manajemen Rute

GetX menyediakan API untuk menavigasi dalam aplikasi Flutter. API ini sederhana dan dengan sedikit kode yang dibutuhkan.

Manajemen Ketergantungan

GetX menyediakan cara cerdas untuk mengelola dependensi dalam aplikasi Flutter Anda seperti pengontrol tampilan. GetX akan menghapus pengontrol yang tidak digunakan saat ini dari memori. Ini adalah tugas yang Anda sebagai pengembang harus lakukan secara manual tetapi GetX melakukannya untuk Anda secara otomatis di luar kotak.

Penginternasionalan

GetX menyediakan i18n yang memungkinkan Anda untuk menulis aplikasi dengan dukungan berbagai bahasa.

Validasi

GetX menyediakan metode validasi untuk melakukan validasi input di aplikasi Flutter Anda. Ini cukup nyaman karena Anda tidak perlu menginstal paket validasi terpisah.

Penyimpanan

GetX menyediakan nilai kunci yang cepat, ekstra ringan, dan sinkron dalam memori, yang mencadangkan data ke disk pada setiap operasi. Itu ditulis seluruhnya dalam Dart dan mudah diintegrasikan dengan paket inti GetX.

Memulai Dengan GetX

Sekarang setelah Anda melihat apa itu GetX dan fitur serta manfaat yang diberikannya, mari kita lihat cara menyiapkannya di aplikasi Anda. Kami akan membangun aplikasi demo untuk melihat sebagian besar fitur yang telah kami sebutkan dalam tindakan. Mari kita mulai.

Buat Aplikasi Flutter Baru

Kami akan memulai dengan membuat aplikasi Flutter baru melalui Flutter CLI. Saya berasumsi mesin Anda sudah disiapkan untuk pengembangan aplikasi dengan Flutter. Jadi kami menjalankan:

 flutter create getx_demo

Ini akan menghasilkan kode dasar yang diperlukan untuk aplikasi Flutter. Selanjutnya, buka proyek yang baru saja Anda buat di editor pilihan Anda (Kami akan menggunakan Kode VS untuk artikel ini). Kami kemudian akan menjalankan proyek untuk memastikannya berfungsi dengan baik (Pastikan Anda memiliki perangkat yang terhubung atau emulator/simulator berjalan).

Saat aplikasi berjalan, Anda akan melihat aplikasi penghitung default yang menjadi perancah Flutter untuk Anda saat Anda membuat aplikasi Flutter baru. Apa yang akan kita lakukan adalah mengimplementasikan aplikasi penghitung yang sama tetapi dengan GetX untuk mengelola status aplikasi (yang merupakan variabel hitungan).

Kita akan mulai dengan membersihkan main.dart dan hanya menyisakan potongan kode ini:

 # main.dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } }

Sekarang aplikasi kita sudah rusak karena tidak ada widget MyHomePage lagi. Mari kita perbaiki itu. Dengan GetX, kita tidak memerlukan widget stateful dan juga UI kita dapat dipisahkan dengan jelas dari logika bisnis kita. Jadi kita akan membuat dua direktori di dalam lib/ . Direktori ini adalah:

Mari kita buat widget MyHomePage di dalam views/ . Nama filenya adalah my_home_page.dart . Setelah Anda membuatnya, tambahkan cuplikan kode berikut ke dalamnya:

 import 'package:flutter/material.dart'; class MyHomePage extends StatelessWidget { final String title; MyHomePage({this.title}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), Text( '0', style: Theme.of(context).textTheme.headline4, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: null, tooltip: 'Increment', child: Icon(Icons.add), ), ); } }

Sekarang kita memiliki widget MyHomePage , mari kita impor di main.dart . Tambahkan pernyataan import ke bagian atas main.dart di bawah import 'package:flutter/material.dart';

 import './views/my_home_page.dart';

Sekarang file main.dart Anda akan terlihat seperti ini:

 import 'package:flutter/material.dart'; import './views/my_home_page.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } }

Saat Anda menyimpan aplikasi Anda sekarang, semua kesalahan seharusnya telah diperbaiki dan aplikasi akan berjalan. Tetapi Anda akan melihat ketika Anda mengklik tombol itu lagi, penghitung tidak akan diperbarui. Jika Anda melihat kode views/my_home_page.dart , Anda akan melihat bahwa kami hanya mengkodekan 0 sebagai nilai widget Teks dan meneruskan null ke handler onPressed tombol. Mari gabungkan GetX agar aplikasi berfungsi kembali.

Menginstal GetX

Buka halaman instal GetX di pub.dev dan Anda akan melihat baris kode untuk disalin ke file pubspec.yml Anda untuk menginstal GetX. Pada saat penulisan artikel ini, versi GetX saat ini adalah 3.23.1. Jadi kita akan menyalin baris:

 get: ^3.23.1

Dan kemudian tempel di bawah bagian dependencies dari file pubspec.yml kami. Saat Anda menyimpan file, get harus diinstal secara otomatis untuk Anda. Atau Anda dapat menjalankannya secara manual di terminal Anda.

 flutter pub get

Bagian dependensi dari file pubspec.yml Anda akan terlihat seperti ini:

 dependencies: flutter: sdk: flutter get: ^3.23.1

GetxController

Kami telah menyebutkan bahwa GetX memungkinkan Anda untuk memisahkan UI aplikasi Anda dari logika. Ini dilakukan dengan menyediakan kelas GetxController yang dapat Anda warisi untuk membuat kelas pengontrol untuk tampilan aplikasi Anda. Untuk aplikasi kami saat ini, kami memiliki satu tampilan sehingga kami akan membuat pengontrol untuk tampilan itu. Buka direktori controllers/ dan buat file bernama my_home_page_controller.dart . Ini akan menahan pengontrol untuk tampilan MyHomePage .

Setelah Anda membuat file, pertama-tama impor paket GetX dengan menambahkan ini ke bagian atas file:

 import 'package:get/get.dart';

Kemudian Anda akan membuat kelas bernama MyHomePageController di dalamnya dan memperluas kelas GetxController . Ini adalah bagaimana file akan terlihat seperti:

 import 'package:get/get.dart'; class MyHomePageController extends GetxController {}

mari tambahkan status hitungan ke kelas yang telah kita buat.

 final count = 0;

Di GetX, untuk membuat variabel dapat diamati — ini berarti bahwa ketika berubah, bagian lain dari aplikasi kita yang bergantung padanya akan diberi tahu. Untuk melakukan ini, kita hanya perlu menambahkan .obs ke inisialisasi variabel. Jadi untuk variabel count di atas, kita akan menambahkan .obs ke 0 . Jadi deklarasi di atas sekarang akan terlihat seperti ini:

 final count = 0.obs;

Beginilah tampilan file pengontrol kami saat ini:

 import 'package:get/get.dart'; class MyHomePageController extends GetxController { final count = 0.obs; }

Untuk menyelesaikan semuanya dengan MyHomePageController , kami akan mengimplementasikan metode increment . Ini adalah cuplikan untuk melakukan itu:

 increment() => count.value++;

Anda akan melihat bahwa kami perlu menambahkan .value ke variabel count untuk menaikkannya. Kami melakukan ini karena menambahkan .obs ke variabel membuatnya menjadi variabel yang dapat diamati dan untuk mendapatkan nilai dari variabel yang dapat diamati, Anda melakukannya dari properti value .

Jadi kita selesai dengan controller. Sekarang ketika nilai hitungan berubah, setiap bagian dari aplikasi kita yang menggunakannya akan diperbarui secara otomatis.

Kami sekarang akan menuju ke tampilan kami dan memberi tahu tentang pengontrol yang baru saja kami buat. Kami akan melakukannya dengan membuat instance kelas pengontrol menggunakan fitur manajemen ketergantungan GetX. Ini akan memastikan bahwa pengontrol kami tidak akan berada di memori saat tidak lagi diperlukan.

Di views/my_home_page.dart , impor paket Get dan juga pengontrol yang Anda buat seperti:

 import 'package:get/get.dart'; import '../controllers/my_home_page_controller.dart';

Kemudian di dalam kelas MyHomePage kita akan membuat MyHomePageController :

 final MyHomePageController controller = Get.put(MyHomePageController());

Sekarang kita memiliki instance dari MyHomePageController , kita dapat menggunakan variabel status serta metode. Jadi mulai dengan status, di GetX untuk menandai bagian dari UI Anda yang akan dibangun kembali saat variabel status berubah, Anda akan membungkus bagian itu dengan widget Obx . GetX menyediakan cara lain untuk melakukan ini, tetapi metode ini jauh lebih sederhana dan bersih.

Untuk aplikasi hitungan kami, kami ingin widget Teks diperbarui dengan hitungan saat ini. Jadi kita akan membungkus widget Teks dengan widget Obx seperti:

 Obx(() => Text('0',style: Theme.of(context).textTheme.headline4,),)

Selanjutnya kita akan mengganti static string 0 dengan variabel count dari MyHomePageController seperti berikut:

 Obx(() => Text('${controller.count.value}', ,style: Theme.of(context).textTheme.headline4,),)

Terakhir, kita akan memanggil metode increment ketika floatingActionButton ditekan seperti ini:

 floatingActionButton: FloatingActionButton( onPressed: controller.increment, tooltip: 'Increment', child: Icon(Icons.add), ),

Jadi secara keseluruhan, file tampilan MyHomePage kami sekarang akan terlihat seperti ini:

 import 'package:flutter/material.dart'; import 'package:get/get.dart'; import '../controllers/my_home_page_controller.dart'; class MyHomePage extends StatelessWidget { final String title; final MyHomePageController controller = Get.put(MyHomePageController()); MyHomePage({this.title}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), Obx( () => Text( '${controller.count.value}', style: Theme.of(context).textTheme.headline4, ), ) ], ), ), floatingActionButton: FloatingActionButton( onPressed: controller.increment, tooltip: 'Increment', child: Icon(Icons.add), ), ); } }

Saat Anda menyimpan aplikasi atau menjalankannya kembali, aplikasi penghitung seharusnya berfungsi seperti saat pertama kali kita membuat aplikasi.

Saya yakin Anda telah melihat betapa intuitifnya manajemen status dengan GetX, kami tidak perlu menulis banyak boilerplate dan kesederhanaan ini akan lebih jelas karena aplikasi Anda menjadi kompleks. Anda juga akan melihat tampilan kami tidak memiliki atau mempertahankan status apa pun sehingga bisa menjadi widget tanpa kewarganegaraan. Otak tampilan pada gilirannya sekarang menjadi kelas pengontrol yang akan menampung status untuk tampilan dan metode.

Navigasi Di GetX

Kami telah melihat manajemen negara di GetX. Sekarang mari kita lihat bagaimana GetX mendukung Navigasi dalam aplikasi Anda. Untuk mengaktifkan fitur Navigasi GetX, Anda hanya perlu melakukan satu perubahan di main.dart yaitu mengubah widget MaterialApp menjadi widget GetMaterialApp . Mari kita lakukan itu dengan terlebih dahulu mengimpor Dapatkan di bagian atas main.dart

 import 'package:get/get.dart';

Kemudian kita ubah ke MaterialApp sehingga file main.dart kita sekarang terlihat seperti ini:

 import 'package:flutter/material.dart'; import 'package:get/get.dart'; import './views/my_home_page.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return GetMaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } }

Sekarang aplikasi kami telah disiapkan untuk mendukung navigasi GetX. Untuk mengujinya, kita akan membuat tampilan lain di direktori views/ . Kami akan memanggil ini di about_page.dart dan itu akan berisi kode berikut:

 import 'package:flutter/material.dart'; import 'package:get/get.dart'; import '../controllers/my_home_page_controller.dart'; class AboutPage extends StatelessWidget { final MyHomePageController controller = Get.put(MyHomePageController()); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('About GetX'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Padding( padding: const EdgeInsets.all(16.0), child: Text( 'GetX is an extra-light and powerful solution for Flutter. It combines high performance state management, intelligent dependency injection, and route management in a quick and practical way.', ), ), ], ), ), ); } }

Kami kemudian akan pergi ke MyHomePage dan menambahkan tombol yang ketika ditekan akan menavigasi kami ke AboutPage . Seperti begitu. Tombol harus berada di bawah widget Obx. Ini dia:

 FlatButton(onPressed: () {}, child: Text('About GetX'))

Kami juga perlu mengimpor AboutPage di atas file MyHomePage :

 import './about_page.dart';

Untuk memberitahu GetX untuk menavigasi ke AboutPage yang kita butuhkan hanyalah satu baris kode yaitu:

 Get.to(AboutPage());

Mari tambahkan itu ke callback onPressed dari widget FlatButton seperti:

 FlatButton( onPressed: () { Get.to(AboutPage()); }, child: Text('About GetX'))

Saat Anda menyimpan aplikasi Anda sekarang, Anda sekarang dapat menavigasi ke AboutPage .

Anda juga dapat memilih untuk mengganti tampilan MyHomePage dengan AboutPage sehingga pengguna tidak akan dapat menavigasi kembali ke halaman sebelumnya dengan menekan tombol kembali perangkat. Ini berguna untuk layar seperti layar login. Untuk melakukan ini, ganti konten handler onPressed dengan kode di bawah ini:

 Get.off(AboutPage());

Ini akan memunculkan tampilan MyHomePage dan menggantinya dengan AboutPage .

Sekarang kita dapat menavigasi ke AboutPage , saya pikir tidak akan terlalu buruk untuk dapat kembali ke MyHomePage untuk melakukan ini, kita akan menambahkan tombol di AboutPage setelah widget Padding dan di dalamnya handler onPressed kita akan membuat panggilan ke Get.back() untuk menavigasi kembali ke MyHomePage :

 FlatButton( onPressed: () { Get.back(); }, child: Text('Go Home') )

snack bar

Di Flutter secara konvensional untuk menampilkan Snackbar, Anda perlu menulis sesuatu seperti ini:

 final snackBar = SnackBar(content: Text('Yay! A SnackBar!')); // Find the Scaffold in the widget tree and use it to show a SnackBar. Scaffold.of(context).showSnackBar(snackBar);

Anda dapat mengamati kami masih bergantung pada properti context . Mari kita lihat bagaimana kita bisa mencapai ini di GetX. Masuk ke tampilan MyHomePage dan tambahkan widget FlatButton lain di bawah tombol terakhir yang kami tambahkan. Berikut cuplikan tombolnya:

 FlatButton( onPressed: () { // TODO: Implement Snackbar }, child: Text('Show Snackbar'))

Mari kita tampilkan pesan 'Yay! GetX Snackbar yang Luar Biasa'. Di dalam fungsi handler onPressed tambahkan baris kode di bawah ini:

 Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar');

Jalankan aplikasi Anda dan ketika Anda mengklik "Tampilkan tombol Snackbar" Anda akan melihat snackbar di atas aplikasi Anda!

Lihat bagaimana kami mengurangi jumlah baris yang diperlukan untuk menampilkan snackbar di aplikasi Flutter? Mari lakukan beberapa penyesuaian lagi di Snackbar; Mari kita membuatnya muncul di bagian bawah aplikasi. Ubah kode menjadi ini:

 Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar',snackPosition:SnackPosition.BOTTOM, );

Simpan dan jalankan aplikasi Anda dan Snackbar sekarang akan muncul di bagian bawah aplikasi. Bagaimana kalau kita mengubah warna latar belakang Snackbar seperti saat ini transparan. Kami akan mengubahnya menjadi warna amberAccent dari kelas Colors di Flutter. Perbarui kode menjadi ini:

 Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar',snackPosition:SnackPosition.BOTTOM, backgroundColor: Colors.amberAccent );

Secara keseluruhan, kode tombol akan terlihat seperti ini:

 FlatButton( onPressed: () { Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar', snackPosition: SnackPosition.BOTTOM, backgroundColor: Colors.amberAccent); }, child: Text('Show Snackbar'))

Dialog

GetX menyediakan metode sederhana untuk membuat AlertDialog di Flutter. Mari kita lihat aksinya. Buat tombol lain di bawah yang sebelumnya:

 FlatButton( onPressed: () { // TODO: Show alert dialog }, child: Text('Show AlertDialog'))

Mari kita panggil GetX untuk menampilkan Dialog peringatan:

 Get.defaultDialog();

Itu akan menampilkan Dialog Peringatan default yang dapat ditutup dengan mengetuk di luar Dialog. Anda dapat melihat bagaimana dalam satu baris kode kami memiliki dialog peringatan yang berfungsi. Mari kita sesuaikan sedikit. Mari kita ubah judul dan pesannya:

 Get.defaultDialog( title: 'GetX Alert', middleText: 'Simple GetX alert');

Simpan dan jalankan aplikasi Anda dan Anda akan melihat perubahannya saat Anda menekan tombol "Show AlertDialog". Kami dapat menambahkan tombol konfirmasi dan Batal seperti:

 Get.defaultDialog( title: 'GetX Alert', middleText: 'Simple GetX alert', textConfirm: 'Okay', confirmTextColor: Colors.amberAccent, textCancel: 'Cancel');

Ada banyak cara untuk menyesuaikan dialog GetX dan API cukup intuitif dan sederhana.

Kesimpulan

GetX dibuat untuk meningkatkan produktivitas developer Flutter saat mereka membangun fitur. Daripada harus mencari boilerplate yang diperlukan untuk melakukan hal-hal seperti manajemen status, manajemen navigasi, dan banyak lagi, GetX menyediakan API intuitif sederhana untuk mencapai aktivitas ini tanpa mengorbankan kinerja. Artikel ini memperkenalkan GetX kepada Anda dan cara mulai menggunakannya di aplikasi Flutter Anda.

• Anda dapat menemukan demonya di sini →