Laporan Praktikum: Aplikasi Mobile Navigator

A. PENDAHULUAN

Praktikum ini berfokus pada implementasi sistem navigasi dan mekanisme pengiriman data (passing data) antar layar dalam pengembangan aplikasi mobile menggunakan kerangka kerja Flutter. Dalam arsitektur aplikasi Flutter, pengelolaan rute atau halaman beroperasi berdasarkan konsep Stack (tumpukan) yang dikendalikan oleh widget Navigator

B. LANGKAH KERJA

1. Inisialisasi Konfigurasi Proyek

Mengonfigurasi berkas utama aplikasi untuk mendefinisikan entry point melalui fungsi main(). Pada tahap ini, kerangka aplikasi dibangun menggunakan MaterialApp, di mana tema warna utama (primarySwatch) diatur menjadi merah, dan halaman awal aplikasi diarahkan ke antarmuka Dashboard

2. Perancangan Antarmuka Dashboard

Membangun halaman utama yang berfungsi sebagai pusat informasi, menampilkan kartu ringkasan saldo keuangan dan daftar riwayat transaksi. Tombol aksi mengambang (FloatingActionButton) juga disiapkan untuk berpindah ke halaman penambahan transaksi.

3. Pembuatan Layar Penerima Data

Membangun sebuah StatelessWidget baru yang dirancang khusus untuk menampilkan detail transaksi. Pada tahap ini, variabel final disiapkan dan constructor kelas dideklarasikan dengan penanda required agar mewajibkan pengisian data (judul, nominal, kategori, dan tanggal) dari layar sebelumnya.

4. Implementasi Navigasi dan Passing push

Menambahkan event listener onTap pada komponen ListTile di daftar riwayat transaksi layar Dashboard. Di dalam fungsi tersebut, disematkan perintah Navigator.push untuk memicu transisi ke layar Detail Transaksi sekaligus mengirimkan data baris transaksi yang diklik ke dalam constructor tujuan.

5. Pengembangan Formulir Transaksi Baru

Membuat StatefulWidget yang berisi Form untuk mencatat entri transaksi baru. Tahap ini mencakup penggunaan TextEditingController dan penambahan kolom input khusus read-only yang memicu fungsi showDatePicker, sehingga pengguna dapat memilih tanggal secara presisi.

6. Penerapan validasi dan navigasi

Memastikan properti validator pada setiap input bekerja dengan benar sebelum data dikirim. Setelah sistem memvalidasi seluruh input dengan sukses melalui tombol "Simpan", aplikasi akan menampilkan notifikasi SnackBar, kemudian mengeksekusi Navigator.pop(context) untuk menutup layar form dan mengembalikan pengguna ke Dashboard secara otomatis.

D. Penyelesaian Tugas

Langkah pertama adalah mendeklarasikan variabel controller baru di dalam State dari form transaksi. Controller ini, yaitu _dateController, berfungsi untuk menangkap, menyimpan, dan menampilkan string tanggal yang telah dipilih oleh pengguna ke dalam antarmuka form

Sebuah elemen TextFormField baru disematkan pada susunan form, ditempatkan secara spesifik sebelum tombol "Simpan". Kolom ini diatur menjadi mode baca-saja (readOnly: true) untuk mencegah keyboard sistem muncul, sehingga memastikan pengguna hanya dapat memasukkan data melalui jendela pop-up kalender

Untuk menambahkan interaktivitas pada kolom input saat ditekan, event listener onTap dikonfigurasi. Saat form tersebut diklik, program akan memicu fungsi bawaan Flutter yaitu showDatePicker. Objek tanggal yang dipilih kemudian diformat menggunakan logika pemrograman menjadi struktur string DD/MM/YYYY untuk ditampilkan sebagai teks.

Untuk memastikan kelengkapan pencatatan data transaksi, fungsi validator ditambahkan pada TextFormField tersebut. Sistem akan mengevaluasi secara otomatis apakah value di dalamnya dalam keadaan kosong (isEmpty). Jika pengguna mencoba menyimpan tanpa mengisi tanggal, proses akan dicegah dan pesan peringatan "Tanggal wajib diisi!" akan muncul.

Keseluruhan kode sumber dan aset untuk praktikum Modul IV ini telah diunggah dan dapat diakses secara publik melalui Repositori GitHub berikut.