Navigasi Dasar: Pindah Halaman

Route stack

Flutter mengelola halaman sebagai tumpukan (stack). Navigator.push menaruh halaman baru di atas tumpukan, Navigator.pop mengambil yang paling atas sehingga kembali ke halaman sebelumnya. Tombol back di Android otomatis memanggil pop.

Push dan pop dasar

// Di halaman daftar produk
ElevatedButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const HalamanDetail()),
    );
  },
  child: const Text('Lihat Detail'),
)

// Di halaman detail, tombol kembali
ElevatedButton(
  onPressed: () {
    Navigator.pop(context);
  },
  child: const Text('Kembali'),
)

MaterialPageRoute memberi animasi transisi standar Material (geser dari kanan di Android). Untuk gaya iOS, ada CupertinoPageRoute.

Mengirim dan menerima hasil

Halaman yang di-pop bisa mengembalikan data ke halaman pemanggil. Pola ini dipakai misalnya untuk halaman pilih alamat yang mengembalikan alamat terpilih.

// Memanggil dan menunggu hasil
final hasil = await Navigator.push<String>(
  context,
  MaterialPageRoute(builder: (context) => const HalamanPilih()),
);

// Di halaman pilih, kembalikan data
Navigator.pop(context, 'Jakarta Selatan');

Karena push mengembalikan Future, kamu bisa await dan dapat datanya setelah user kembali. Tipe generic <String> menjaga null safety: hasil bertipe String? karena user bisa back tanpa memilih.

PushReplacement dan popUntil

Kadang kamu tidak ingin user bisa kembali, misalnya setelah login berhasil:

// Ganti halaman login dengan home, tombol back tidak kembali ke login
Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (context) => const HalamanHome()),
);

// Kembali ke halaman paling awal, buang semua di atasnya
Navigator.popUntil(context, (route) => route.isFirst);

Catatan teknis: Ini jebakan klasik pemula: memakai context setelah await untuk navigasi. Contohnya await API call lalu Navigator.push(context, ...). Kalau user menutup halaman saat API masih jalan, context sudah tidak valid dan muncul warning "Do not use BuildContexts across async gaps". Solusinya: cek if (!context.mounted) return; setelah await, atau simpan Navigator state sebelum await. Selalu pasang lint ini dan jangan diabaikan.