Praktikum Pertemuan 4 Flutter: Navigation & Routing (Multiple Screen)

Published: Selasa, 7 Oktober 2025 | Author: Ezza Addini

Praktikum ini membahas implementasi konsep Navigator dan Routing dalam Flutter. Mahasiswa belajar membuat aplikasi dengan banyak halaman (multi screen) dan mempelajari cara berpindah antar halaman menggunakan Navigator.push(), Navigator.pop(), dan Navigator.pushNamed().

Langkah-Langkah Praktikum
  1. Membuat file utama main.dart Buat file main.dart pada folder lib/. Tambahkan konfigurasi MaterialApp dengan properti initialRoute dan routes yang memetakan nama halaman ke widget masing-masing. Jangan lupa impor halaman seperti product.dart dan product_detail.dart.
    Kode main.dart
    Gambar 1: Kode file main.dart untuk konfigurasi route.
  2. Membuat file product.dart Buat file baru product.dart yang berisi class Product (StatelessWidget). Tambahkan widget AppBar dan ElevatedButton yang ketika ditekan akan berpindah ke halaman ProductDetail menggunakan Navigator.pushNamed().
    Kode product.dart
    Gambar 2: Kode file product.dart dengan tombol navigasi.
  3. Membuat file product_detail.dart Tambahkan class ProductDetail yang menampilkan halaman detail produk. Gunakan Navigator.pop() untuk kembali ke halaman sebelumnya.
    Kode product_detail.dart
    Gambar 3: Kode file product_detail.dart dengan tombol kembali.
  4. Membuat file home_page.dart Buat halaman utama yang berisi dua tombol: Profile dan Product. Tombol Profile menggunakan Navigator.push() untuk mengirim data melalui constructor, sedangkan tombol Product menggunakan Navigator.pushNamed() dengan arguments.
    Kode home_page.dart
    Gambar 4: Kode file home_page.dart dengan dua tombol navigasi.
  5. Membuat file my_profile.dart Buat class MyProfile untuk menerima data id dan name dari constructor. Tampilkan data tersebut dengan widget Text().
    Kode my_profile.dart
    Gambar 5: Kode file my_profile.dart untuk menampilkan data pengguna.
  6. Membuat file my_product.dart Buat class MyProduct (StatelessWidget) untuk menerima data menggunakan ModalRoute.of(context)!.settings.arguments dan menampilkannya di halaman.
    Kode my_product.dart
    Gambar 6: Kode file my_product.dart untuk menerima data lewat arguments.
Kesimpulan

Pada praktikum ini dipelajari implementasi Navigator dan Routing untuk navigasi antar halaman di Flutter. Mahasiswa memahami penggunaan push(), pop(), dan pushNamed() untuk berpindah antar halaman serta mengirim data antar screen menggunakan constructor dan arguments.

Tugas

Praktikum ini ditutup dengan tugas yang dapat diakses melalui link berikut: GitHub Repository.

Tugas Navigation & Routing
Gambar 7: Tampilan hasil tugas Navigation & Routing.
Kembali ke Daftar Laprak