MODUL FLUTTER

BAB 3 :
STATE MANAGEMENT & ROUTES & SPLASHSCREEN
A. STATE MANAGEMENT GETX SERTA GET CLI

GET X
GetX adalah solusi ekstra ringan dan kuat untuk Flutter. Ini menggabungkan manajemen
status berkinerja tinggi, injeksi ketergantungan cerdas, dan manajemen rute dengan
cepat dan praktis.

GetX adalah micro-framework yang bertujuan untuk memudahkan developer dalam

pengembanan aplikasi yang kompleks dan dikombinasikan dengan sintaks yang rapi
dan pendekatan yang sederhana. Saat mengembangkan aplikasi flutter dengan GetX,
percaya semuanya akan terasa lebih praktis.

GET CLI
Get CLI(Command Line Interface) adalah salah satu bagian dari GetX yang tujuannya
juga membantu developer dalam membuat Project Flutter yang terstruktur dan untuk Get
CLI ini kita perlu untuk Menginstallnya bisa install menggunakan terminal atau cmd.
Dengan menggunakan Get CLI kita bisa menggunakan struktur GetX

B. PREPARING
GetX (https://pub.dev/packages/get)
Get CLI (https://pub.dev/packages/get_cli)

C. INSTALASI

Get CLI
-Silahkan kalian masuk kedalam website Get CLI kalian dapat mengaksesnya melalui
link diatas, jika sudah terbuka maka akan muncul tampilan website seperti dibawah ini
 Tampilan Utama Website GET CLI

-Setelah itu silahlkan kalian buka project flutter kalian pada modul modul sebelumnya,
lalu kalian akses terminal pada VsCode dengan kombinasi seperti berikut ini
“CTRL+SHIFT+` ”, setelah itu silahkan kalian ketikan perintah “dart pub global activate
get_cli” pada terminal tersebut, maka akan ada tampilan seperti berikut ini

Aktivasi Get CLI

-Apabila sudah terinstal maka langkah selanjutnya iyalah menginstal GetX pada project
flutter kalian

Get X
-Silahkan kalian akses website GetX melalui link diatas, apabila sudah masuk kedalam
link website tersebut maka akan muncul tampilan seperti dibawah ini
 Tampilan Website GetX

-Selanjutnya iyalah silahkan kalian masuk kedalam tab “Installing” maka akan muncul
tampilan website seperti dibawah ini

Tampilan web GetX

-Selanjutnya silahkan kalian ketikan perintah berikut pada terminal project kalian “flutter
pub add get” apabila sudah maka akan muncul tampilan seperti berikut pada terminal
flutter kalian
 Depedensi Get Berhasil Terinstal

-Setelah berhasil menambahkan/menginstal depedensi flutter silahkan kalian membuat

1 page yang bernama “Home” silahkan kalian ketikan perintah berikut “get create page
home” apabila sudah berhasil maka akan muncul tampilan seperti dibawah ini

Create page home

D. PENGENALAN SPLASHSCREEN & ROUTES

SplashScreen
Splash Screen merupakan salah satu pattern dalam Android Development. Splash
Screen diimplementasikan pada saat aplikasi mulai dijalankan dengan memperlihatkan
brand logo aplikasi.
-Untuk membuat SpalshScreen langkah pertama iyalah kalian membuat folder baru
pada folder app, lalu kalian buat folder baru bernama “Widget” seperti pada gambar
dibawah ini

Struktur Folder

-Setelah itu silahkan kalian buat file bernama “splash.dart”, sehabis itu silahkan kalian
isikan kode dibawah ini
 Kode SplashScreen

Routes
Routing merupakan konsep inti dalam pengembangan Aplikasi Mobile, yang
memungkinkan para pengguna untuk berpindah halaman yang berbeda. Dan yang
sudah kita ketahui seluruh aplikasi memiliki beberapa halaman untuk menampilkan jenis
informasi

-Langkah pertama iyalah silahkan kalian masuk kedalam file “main.dart” lalu silahkan
kalian ketikan kode dibawah ini untuk routes dari splashscreen menuju page home
(NOTE: PADA FILE “app_pages.dart” SILAHKAN KALIAN UBAH “INITIAL” yang tadinya
huruf besar menjadi huruf kecil)
 Kode main.dart
Apabiala sudah maka kalian akan diarahkan dari splashcreen menuju ke page home

E. PENUGASAN
1. Silahkan kalian ketikan kode latihan diatas lalu kalian ganti lama delay splash
screen menjadi 5 detik
2. Ubah warna background splash screen menjadi warna favorit kalian, serta ubah
gambar dan teks pada splash screen
3. Pada “home_view.dart” silahkan kalian masukan kode pada modul sebelumnya
yaitu modul “Stateful widget”