Pendahuluan

Aplikasi mobile membutuhkan tampilan dan navigasi yang baik agar pengguna dapat berpindah dari satu halaman ke halaman lainnya dengan mudah. Dalam pengembangan aplikasi menggunakan Flutter, navigasi antar halaman dapat dilakukan menggunakan Navigator.push untuk membuka halaman baru dan Navigator.pop untuk kembali ke halaman sebelumnya setelah suatu proses selesai. Selain itu, data antar halaman juga dapat dikirim melalui constructor sehingga informasi yang dipilih atau dimasukkan pada satu halaman dapat ditampilkan pada halaman lainnya.

Pada praktikum ini dibuat aplikasi sederhana berupa Expense Tracker yang memiliki beberapa halaman, yaitu dashboard, form pencatatan transaksi, dan detail transaksi. Penerapan navigasi digunakan untuk berpindah dari dashboard ke form transaksi, kembali ke dashboard setelah transaksi disimpan, serta membuka halaman detail dengan mengirimkan data transaksi melalui constructor. Pada form transaksi juga ditambahkan input tanggal dengan showDatePicker dan validasi agar tanggal wajib diisi. Melalui implementasi tersebut, praktikum ini memberikan pemahaman mengenai penggunaan navigasi dan pengiriman data antar halaman pada aplikasi Flutter.

Tujuan Praktikum

Praktikum ini bertujuan untuk:

• Menerapkan Navigator.push untuk berpindah ke layer baru.
• Menggunakan Navigator.pop untuk menutup layer setelah aksi selesai.
• Mengirim data (String, int) antar layer melalui Constructor.

Langkah Praktikum

1. Membuat Halaman Detail Transaksi

Langkah pertama yang harus kita lakukan yaitu membuat halaman detail transaksi dan mendeklarasikan variabel final serta menampilkan data pada UI (Text) di detail_transaction_screen.dart.

2. Pindah ke Detail & Mengirim Data (Push)

Pada file Dashboard, pada widget ListTile daftar transaksi, tambahkan fungsi onTap. Dalam penambahan fungsi ini, gunakan Navigator.push dengan MaterialPageRoute, lalu isi data constructor (title & amount) sesuai data baris yang diklik.

3. Menutup Layar / Kembali Otomatis (Pop)

Setelah itu, kembali ke file add_transaction_screen.dart lagi, lalu gunakan kode ini agar formular tertutup otomatis dan kembali ke Dashboard setelah klik Simpan.

4. Hasil Akhir: Mockup Halaman Detail

Dari output di atas dapat kita lihat demonstrasi dari program yang dikerjakan pada praktikum.

Tugas

Membuat Input Tanggal Sebelum Tombol Simpan untuk Mengisi Tanggal Transaksi

Untuk melakukan hal ini, pertama-tama kita perlu menambahkan controller baru untuk tanggal agar bisa menampung tanggal yang dipilih dari showDatePicker. Bagian ini ditambahkan pada file add_transaction_screen.dart.

Selanjutnya, tepat di bawah controller yang ditambahkan tadi, tambahkan pula kode program ini untuk membuka kalender ketika tombol ditekan, serta memasukkan hasilnya ke _dateController.

Selanjutnya, tambahkan kode program berikut pada bagian child dengan tujuan untuk membuat tampilan teks input dan validasi teks input tidak bisa dibiarkan kosong.

Hasil

Pada output di atas, dapat kita lihat jika input tanggal transaksi telah ditambahkan. Pada output juga diperlihatkan tampilan kalender yang muncul ketika tombol tambah pada input tanggal diklik.

Kesimpulan

Berdasarkan praktikum yang telah dilakukan, dapat disimpulkan bahwa navigasi pada Flutter dapat diterapkan dengan menggunakan Navigator.push untuk membuka halaman baru dan Navigator.pop untuk kembali ke halaman sebelumnya. Pengiriman data antar halaman dapat dilakukan melalui constructor dengan menggunakan parameter seperti String dan int, sehingga data transaksi dapat ditampilkan pada halaman detail sesuai data yang dikirim dari dashboard.

Selain itu, penambahan input tanggal menggunakan showDatePicker dan validasi membantu membuat form transaksi lebih terstruktur dan memastikan data yang diperlukan telah diisi sebelum transaksi disimpan. Praktikum ini memberikan pemahaman yang baik tentang konsep navigasi stack-based pada Flutter dan cara mengelola aliran data antar screen dalam aplikasi mobile.