Repository untuk Tugas mata kuliah Mobile Computing menggunakan Flutter.
Sebuah aplikasi browser game Steam yang dibangun menggunakan kerangka kerja Flutter. Aplikasi ini berfokus pada penerapan Routing & Navigation yang solid, manajemen stack memori halaman, serta praktik standar industri dalam penyimpanan data lokal persisten menggunakan SharedPreferences.
| 1️⃣ Steam List Page | 2️⃣ Game Detail Page | 3️⃣ Avatar Detail Page |
|---|---|---|
 |
 |
 |
| List dan Grid View dengan fitur Live Search | Halaman detail lengkap game (Developer, Tanggal, dll) | Fitur Zoom Gambar + Tombol Skip Navigation |
(Screenshots untuk Splash Screen, Onboarding, dan Login akan ditambahkan kemudian)
Aplikasi ini telah diperbarui secara signifikan dari versi dasarnya untuk memenuhi standar industri dan mengakomodasi manajemen sesi pengguna:
-
Penyimpanan Lokal (SharedPreferences) 💾
- Manajemen sesi persisten: Menyimpan status login sehingga pengguna tidak perlu login berulang kali saat aplikasi ditutup (memori tidak hilang).
- Onboarding Flag: Menyimpan riwayat instalasi untuk memastikan layar perkenalan (Onboarding) hanya muncul satu kali saat aplikasi pertama kali dibuka.
-
Onboarding & Splash Screen Interaktif 🚀
- Splash Screen mulus yang secara otomatis mendeteksi status pengguna (baru vs sudah login).
- Onboarding Screen dinamis yang menggunakan
PageViewinteraktif dengan 3 slide penjelasan aplikasi, dilengkapi indikator progress animasi.
-
Autentikasi & Validasi Standar Industri 🔒
- Desain kolom input Static Label modern (UI/UX standar iOS/Web).
- Helper text preventif yang memandu pengguna sebelum melakukan kesalahan.
- Validasi ketat (RegExp) menolak penggunaan spasi dan menegakkan batas karakter minimal untuk Username dan Password.
-
Arsitektur Kode Bersih (Clean Code) 🧹
- Pemisahan Logika (Separation of Concerns): Logika Shared Preferences tidak dicampur di UI, melainkan diabstraksi ke dalam satu class terpusat (
PreferencesService). - Ekstraksi fungsi validasi ke dalam folder
utils/validators.dartuntuk mencegah spaghetti code di layar antarmuka. - Integrasi sistem warna global berbasis Dark Mode Steam di
app_colors.dart. - Menggunakan rute nama (
Navigator.pushNamed) untuk memisahkan UI dan mekanisme navigasi.
- Pemisahan Logika (Separation of Concerns): Logika Shared Preferences tidak dicampur di UI, melainkan diabstraksi ke dalam satu class terpusat (
- List Page (Halaman 1):
- ✔️ Menampilkan lebih dari 4 item dinamis menggunakan
ListView.builder(dan dilengkapi juga denganGridView). - ✔️ Tapping bernavigasi menggunakan
Navigator.push()membawa objek utuh ke Halaman 2.
- ✔️ Menampilkan lebih dari 4 item dinamis menggunakan
- Detail Page (Halaman 2):
- ✔️ Menerima data dari Halaman 1 melalui Class Constructor.
- ✔️ Tapping gambar memicu navigasi ke Halaman 3 mengirim URL.
- Avatar Detail Page (Halaman 3):
- ✔️ Terdapat
InteractiveVieweruntuk zoom gambar. - ✔️ Tombol memotong jalur (skip route) langsung ke Halaman 1 menggunakan
Navigator.popUntil(context, (route) => route.isFirst);.
- ✔️ Terdapat
Alih-alih menggunakan data hardcode, aplikasi ini menerapkan teknik ekstraksi data dinamis dengan memanggil JSON publik dari GitHub Gist. Ini membuktikan kemampuan dalam implementasi HTTP Request, JSON Parsing, dan integrasi Model Data Dart.
- Pastikan Anda telah menginstal Flutter SDK terbaru di perangkat Anda.
- Clone repository ini ke folder lokal Anda:
git clone https://github.com/username-anda/repo-ini.git
- Masuk ke folder project dan unduh semua paket dependensi:
cd moc03_flutter flutter pub get - Jalankan aplikasi di emulator atau device yang tersambung:
flutter run
💡 Tips Debugging (Cheat): Terdapat tombol kuning bergambar "refresh" melayang (Floating Action Button) di layar Home Screen. Tombol ini berfungsi untuk menghapus seluruh data SharedPreferences, sehingga Anda bisa melihat kembali alur perkenalan (Onboarding) dan Login secara utuh layaknya aplikasi yang baru diinstal ulang.
Dikembangkan dengan ❤️ untuk eksplorasi Routing, Navigation, dan Local Storage pada Flutter.