Navigasi Antar Halaman

Aplikasi biasanya punya banyak halaman

Daftar produk, detail produk, keranjang, profil — semuanya halaman terpisah. Di Flutter, halaman (disebut route) hanyalah widget biasa, biasanya sebuah Scaffold. Perpindahan antar halaman diatur oleh Navigator.

Navigator = tumpukan halaman

Bayangkan tumpukan piring. Halaman yang tampil adalah piring paling atas.

• Navigator.push — menaruh halaman baru di atas tumpukan (halaman lama tetap di bawahnya).
• Navigator.pop — membuang halaman teratas sehingga halaman sebelumnya muncul lagi.

Berpindah halaman

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const Detail()),
);

• context — dari parameter build.
• MaterialPageRoute — membungkus halaman tujuan dengan animasi perpindahan standar Material.
• builder — function yang membuat halaman tujuan.

Kembali

Navigator.pop(context);

Pada Scaffold yang berada di atas halaman lain, AppBar otomatis menampilkan tombol panah kembali yang memanggil pop untukmu. Tombol "Kembali" buatan sendiri dipakai bila butuh tampilan khusus. Tombol kembali bawaan HP (Android) juga otomatis melakukan pop.

Contoh dua halaman

class Beranda extends StatelessWidget { ... tombol -> push(Detail) }
class Detail  extends StatelessWidget { ... tombol -> pop }

Setiap halaman adalah widget tersendiri, sehingga kodenya rapi dan mudah dirawat.