Pada praktikum kali ini, pembahasan difokuskan pada Navigation dan Routing serta Multiple Screen pada framework Flutter. Tujuan dari kegiatan ini adalah:
- Membuat aplikasi yang mampu berpindah dari satu halaman ke halaman lainnya.
- Membuat aplikasi yang dapat mengirim dan menerima data antarhalaman.
Konsep Navigation dan Routing pada Flutter
Navigation (navigasi) adalah proses perpindahan dari satu halaman (screen/page) ke halaman lain dalam aplikasi Flutter. Misalnya, ketika pengguna menekan tombol login dan aplikasi berpindah dari halaman login ke halaman utama, atau ketika berpindah dari halaman produk ke halaman detail produk, serta kembali lagi dari detail produk ke halaman produk.
Flutter menggunakan widget Navigator untuk mengatur navigasi, yang bekerja berdasarkan konsep tumpukan (stack). Gambar ilustrasi biasanya menunjukkan bagaimana setiap halaman baru “ditumpuk” di atas halaman sebelumnya.
Penjelasan konsep tersebut dapat diringkas sebagai berikut:
- Halaman awal aplikasi berada di posisi dasar tumpukan, misalnya halaman product.
- Saat berpindah ke halaman baru, Flutter menggunakan perintah push(), yang menempatkan halaman baru di atas halaman sebelumnya (contohnya, dari product ke detail product).
- Ketika pengguna menekan tombol kembali di halaman detail product, Flutter menjalankan perintah pop(), menghapus halaman tersebut dari tumpukan dan menampilkan halaman sebelumnya, yaitu product.
Sementara itu, Routing (rute) adalah sistem untuk mendefinisikan dan mengelola jalur navigasi (routes) dalam aplikasi. Dengan adanya route, setiap halaman dapat dipanggil hanya dengan menyebutkan nama route-nya, sehingga proses navigasi menjadi lebih mudah tanpa harus membuat instance baru dari halaman tersebut setiap kali ingin diakses.
Jenis-jenis Navigation dan Routing di Flutter
- Navigator (Anonymous Routes)
Pada jenis ini, navigasi dilakukan menggunakan konsep tumpukan dengan animasi transisi antarhalaman. Perpindahan halaman dilakukan melalui BuildContext dengan memanggil metode sepertipush()ataupop()secara langsung. - Named Routes
Named Routes atau Rute Bernama memungkinkan pengelolaan route di dalamMaterialAppatauCupertinoApp. Setiap route memiliki nama unik sehingga halaman dapat dipanggil berdasarkan nama tersebut. - Generated Routes
Generated Routes digunakan untuk mengelola route secara lebih dinamis, termasuk pengiriman parameter antarhalaman dan penanganan kesalahan (error handling).
Langkah-Langkah Praktikum
Pada praktikum ini, langkah pertama yang dilakukan adalah membuat file baru dan mendefinisikan sebuah class dengan tipe StatelessWidget bernama MyNav.
Kode programnya adalah sebagai berikut: