1.1 Tujuan

Tujuan praktikum ini yaitu mahasiswa mampu menguasai konsep Navigation dan Routing pada Flutter:

• Membuat aplikasi yang dapat berpindah dari halaman satu ke halaman lain
• Membuat aplikasi yang dapat mengirim dan menerima data dari halaman lain

1.2 Alat

• Computer / laptop yang telah terinstall lingkungan Flutter development

1.3 Teori

Navigation dan Routing Flutter

Navigation merupakan proses berpindah dari satu halaman (screen/page) ke halaman lain dalam aplikasi Flutter, misalnya perpindahan dari halaman login ke halaman utama, atau dari halaman produk ke halaman detail produk.

Navigasi pada Flutter menggunakan widget Navigator yang bekerja dengan konsep stack.

Berdasarkan gambar di atas dapat dijelaskan:

• Halaman awal aplikasi berada di dasar stack (misal halaman Product).
• Ketika berpindah ke halaman baru, Flutter menggunakan perintah push() sehingga halaman baru berada di atas halaman sebelumnya.
• Ketika menekan tombol kembali, Flutter menggunakan pop() untuk menghapus halaman teratas dari stack dan menampilkan halaman sebelumnya.

Routing adalah sistem untuk mendefinisikan dan mengelola jalur halaman (routes) dalam aplikasi Flutter agar dapat memanggil halaman menggunakan nama route tanpa membuat instance baru setiap kali.

Jenis Routing pada Flutter

• Navigator (Anonymous Routes)
• Named Routes
• Generated Routes
• Router / Navigator 2.0

1.4 Langkah-langkah

A. Multiple Screen

• Buat file dart baru.
• Buat class menggunakan StatelessWidget dengan nama MyNav.
• Inisialisasi route pada MaterialApp.

Contoh Kode Program Lengkap Navigation & Routing:

Output Navigation & Routing:

B. Mengirim dan Menerima Data

• Buat file dart baru dan inisialisasi route pada MaterialApp.
• Buat class baru: HomePage, MyProfile, dan MyProduct.
• Pada HomePage, kirim data ke halaman lain melalui constructor dan named route.

Sent & Get Data:

Output Sent & Get:

1.5 Latihan / Tugas

• Buatlah halaman login dan halaman utama. Ketika tombol login diklik, halaman berpindah ke halaman utama dengan mengirimkan data username dan password, lalu tampilkan data tersebut di halaman utama.
• Beberapa widget Flutter seperti Tabs, BottomNavigationBar, dan Drawer juga menggunakan konsep Navigation & Routing. Berikan contoh penerapan salah satu dari ketiganya.

Tugas: