Laporan Praktikum 4: Navigasi & Passing Data (Navigator, Konsep Stack, dan Constructor)

Pendahuluan

Praktikum ini bertujuan untuk menerapkan 'Navigator.push' guna berpindah ke layar baru, menggunakan 'Navigator.pop' untuk menutup layar setelah sebuah aksi selesai dilakukan, serta mengirim data (String, int) antar layar melalui 'Constructor'.

Flutter mengelola perpindahan halaman menggunakan 'Navigator', sebuah widget pengelola rute yang bekerja layaknya tumpukan kartu (stack). Aksi 'push' meletakkan halaman baru di tumpukan teratas, sedangkan aksi 'pop' menghapus/menutup halaman teratas untuk kembali ke halaman sebelumnya. Untuk mengirim data dari satu halaman ke halaman lain, halaman tujuan perlu menyiapkan variabel 'final' sebagai penampung data serta 'Constructor' dengan parameter bertanda 'required'.

Repository Github

Navigator: Widget pengelola rute (halaman) yang bekerja seperti tumpukan kartu.

Push (Maju): Meletakkan halaman baru di tumpukan teratas melalui 'Navigator.push'.

Pop (Mundur): Menghapus/menutup halaman teratas untuk kembali melalui 'Navigator.pop'.

Constructor & Passing Data: Variabel 'final' sebagai tempat penampung data, dan 'required' sebagai penanda bahwa data tersebut wajib diisi saat berpindah layar.

Langkah Kerja

1. Membuat Halaman Detail Transaksi

Membuat file baru bernama 'transaction_detail_screen.dart' berisi class 'TransactionDetailScreen' yang meng-extend 'StatelessWidget'. Disiapkan dua variabel penerima parameter, yaitu 'title' dan 'amount', yang dideklarasikan sebagai 'final String'. Kedua data tersebut wajib diserahkan dari layar sebelumnya melalui 'Constructor' dengan penanda 'required', lalu ditampilkan pada UI menggunakan widget 'Text' di dalam 'Column'.

2. Pindah ke Detail & Mengirim Data (Push)

Kembali ke halaman Dashboard. Pada widget 'ListTile' daftar transaksi, ditambahkan fungsi 'onTap' yang memanggil 'Navigator.push' dengan 'MaterialPageRoute'. Di dalam 'builder', dibuat instance 'TransactionDetailScreen' dengan mengisi parameter 'title' dan 'amount' sesuai data baris transaksi yang diklik, sehingga data tersebut terkirim dan tampil pada halaman detail.

3. Menutup Layar / Kembali Otomatis (Pop)

Kembali ke file 'add_transaction_screen.dart' (Modul 3). Setelah validasi formulir berhasil dan notifikasi 'SnackBar' ditampilkan, dipanggil 'Navigator.pop(context)' pada 'onPressed' tombol "Simpan Transaksi" agar formulir otomatis tertutup dan kembali ke halaman Dashboard setelah transaksi berhasil disimpan.

4. Hasil Akhir

Daftar transaksi pada Dashboard kini dapat diklik dan akan membuka halaman detail yang berisi data lengkap. Tombol "Panah Kiri" otomatis muncul di 'AppBar' berkat 'Navigator.push', sedangkan teks judul dan nominal menyesuaikan dengan baris transaksi yang diklik sebelumnya. Struktur proyek pada modul ini dibagi menjadi empat file terpisah ('main.dart', 'dashboard_screen.dart', 'add_transaction_screen.dart', dan 'transaction_detail_screen.dart') agar rapi.

5. Full Code

Berikut Saya lampirkan kode lengkap untuk setiap file yang telah dibuat.

6. Latihan

Menambahkan input tanggal disaat menambah transaksi. Dan membuat field tersebut wajib diisi.