“Pengembangan Aplikasi Kartu Parkir Digital Berbasis Mobile Menggunakan Framework Flutter pada Platform Android”
1. Latar Belakang & Rumusan Masalah
Pengelolaan parkir di area kampus konvensional seringkali menghadapi kendala:
- Penggunaan karcis kertas/kartu fisik yang mudah hilang atau rusak.
- Waktu verifikasi gerbang masuk/keluar yang lama dan memicu antrean.
- Kurangnya transparansi informasi terkait ketersediaan slot parkir kosong di tiap zona (P1, P2, dll.), sehingga mahasiswa membuang waktu berkeliling mencari tempat parkir.
Tujuan Proyek:
Membangun antarmuka aplikasi mobile modern (Home Screen) yang mengintegrasikan kartu identitas kendaraan digital, kode QR akses gerbang cerdas, pemantau kapasitas zona parkir waktu-nyata (real-time indicator), dan riwayat aktivitas parkir mahasiswa.
2. Metodologi Pengembangan Perangkat Lunak
Pengembangan aplikasi ini mengadopsi pendekatan Agile / Iterative Prototyping dengan tahapan berikut:
3. Spesifikasi & Perancangan Antarmuka (UI/UX)
Desain antarmuka dirancang mengacu pada pedoman Google Material 3:
- Header Personal & Adaptif:
- Menampilkan salam cerdas berbasis waktu sistem (Selamat Pagi / Siang / Sore / Malam).
- Avatar melingkar inisial pengguna (MR) serta data identitas pengguna (Muhammad Rizal, Program Studi Sistem Informasi).
- Akses notifikasi dengan badge indicator.
- Statistik Cepat (Summary Cards):
- Ringkasan visual slot kosong (180 Slot Tersedia), rasio zona aktif (4/5), dan riwayat sesi harian.
- Kartu Parkir Digital (Digital Pass Card):
- Format kartu bergradien biru elegan (Navy & Royal Blue).
- Penegasan plat nomor kendaraan (
B 1234 RZL) dalam kontainer kontras tinggi. - Generator QR Code dinamis berbasis teks enkripsi (
Plate|NIM|Token). - Detail spesifikasi kendaraan (Tipe: Honda Vario 125, Warna: Hitam, Masa Berlaku Pass: 15 Jan 2027).
- Indikator Zona Parkir Interaktif:
- Format kartu horizontal gulir (horizontal scroll) zona P1 hingga P5.
- Dilengkapi progress bar kapasitas serta color-coding:
- 🟢 Hijau (Tersedia): Okupansi aman.
- 🟠 Oranye (Hampir Penuh): Okupansi > 80%.
- 🔴 Merah (Penuh): Okupansi 100%.
- Daftar Riwayat Parkir:
- Daftar riwayat transaksi parkir dengan penanggalan format Indonesia (
dd MMM yyyy, HH:mm) dan kalkulasi durasi parkir otomatis.
- Daftar riwayat transaksi parkir dengan penanggalan format Indonesia (
4. Implementasi Teknis & Arsitektur Kode (Step-by-Step)
A. Konfigurasi Lingkungan & Dependensi
- Framework: Flutter SDK v3.47.6 (Channel Stable) & Dart SDK v3.13.5.
- IDE: Android Studio.
- Dependensi Utama (
pubspec.yaml):qr_flutter: ^4.1.0: Pustaka pembangkit gambar QR Code secara instan.intl: ^0.19.0: Pustaka internasionalisasi dan format mata uang/tanggal lokal Indonesia (id_ID).
B. Pemodelan Data Berorientasi Objek (OOP)
Dibuat 3 entitas model independen di lib/models/parking_model.dart:
VehicleCard: Mengkapsulasi identitas pemilik, plat, merek kendaraan, dan tanggal berlaku.ParkingZone: Mengelola kuota total, slot tersedia, status enum (available,almostFull,full), serta getter kalkulasi persentase okupansi.ParkingHistory: Menyimpan log waktu masuk (check-in), waktu keluar (check-out), dan durasi.
C. Arsitektur Komponen Modular (Widget Tree)
Untuk memastikan prinsip Clean Code dan Reusability, antarmuka dibagi menjadi berkas terpisah:
vehicle_card_widget.dart: Kartu e-Pass kendaraan.parking_zone_card.dart: Komponen kartu status zona.parking_history_tile.dart: Komponen baris riwayat.home_screen.dart: Mengintegrasikan seluruh widget menggunakanCustomScrollViewdanSliverListguna menjamin tampilan responsif dan bebas dari render overflow pada layar kecil.
5. Kendala Teknis & Solusi (Troubleshooting & Refactoring)
Dalam proses rekayasa perangkat lunak, ditemukan beberapa kendala yang berhasil diselesaikan secara metodis:
| No | Kendala yang Muncul | Penyebab Teknis | Solusi yang Diterapkan |
|---|---|---|---|
| 1 | Peringatan Deprecated Member withOpacity | Flutter 3.x merekomendasikan penghindaran degradasi presisi warna pada withOpacity | Dilakukan refactoring massal mengganti syntax menjadi withValues(alpha: ...) |
| 2 | flutter analyze melaporkan undefined identifier | Model enum ZoneStatus belum diimpor secara eksplisit pada layar beranda | Menambahkan import berkas model parking_model.dart |
| 3 | Unknown run configuration type di Android Studio | IDE Android Studio belum memiliki plugin Flutter/Dart yang aktif | Menginstal plugin Flutter dan Dart melalui Settings > Plugins > Marketplace |
| 4 | Waiting for startup lock... | Terdapat file pengunci (lockfile) dari proses build latar belakang yang belum terlepas | Menghentikan proses gantung (orphaned processes) dan menghapus file flutter/bin/cache/lockfile secara aman |
Hasil audit kode final dengan perintah flutter analyze menghasilkan status: No issues found!.
6. Build, Distribusi, & Pengujian Lapangan (Real Device)
Kompilasi APK Android: Aplikasi dikompilasi menggunakan Gradle Engine dengan target Android API:
bashflutter build apk –debugMenghasilkan file biner terverifikasi:
ParkirKampus_MuhammadRizal.apk.Pengujian pada Perangkat Keras Asli (Hardware Testing):
- Perangkat: Smartphone Android (Layar Resolusi FHD+).
- Metode Instalasi: Sideloading paket file APK secara langsung.
- Hasil Pengujian:
- Seluruh aset antarmuka (Header, Kartu Parkir Pass, QR Code, Card Kuota Parkir) ter-render sempurna tanpa adanya eror overflow pixel.
- QR Code berhasil terbaca oleh pemindai dengan akurasi 100%.
- Performa scrolling sangat halus (60-120 FPS).
7. Kesimpulan
Aplikasi ParkirKampus Pass berhasil dirancang dan diimplementasikan dari tahap kebutuhan pengguna, desain antarmuka modern, penulisan kode modular, refaktorisasi standar terbaru Flutter 3, hingga pengujian langsung pada smartphone fisik. Sistem ini terbukti efektif sebagai purwarupa solusi digitalisasi sistem parkir lingkungan kampus yang modern, estetik, dan efisien.
