Tutorial Flutter Navigator: Navigasi Antar Halaman dengan Mudah

Yo, apa kabar para pejuang code! Pernah nggak sih kalian ngerasa pusing pas mau pindah halaman di Flutter? Mau bikin aplikasi yang flow-nya mulus tapi malah kena error Navigator mulu? Tenang, hari ini kita bakal spill tuntas gimana caranya keliling antar halaman di Flutter biar aplikasi kalian punya vibes yang pro banget. Skuy, langsung gas!

Apa Itu Navigator?

Gampangnya, Navigator itu ibarat sopir pribadi aplikasi kalian. Dia yang ngatur tumpukan halaman (disebut Route Stack). Pas kalian buka halaman baru, dia bakal "numpuk" halaman itu di atas yang lama. Pas kalian back, dia tinggal "buang" halaman paling atas. Gampang, kan?

1. Dasar Navigasi: Push dan Pop

Dua istilah ini wajib kalian hafal di luar kepala:

• push: Buat pindah ke halaman baru.
• pop: Buat balik ke halaman sebelumnya.

Coba liat snippet kode simpel ini buat pindah halaman:

// Cara pindah ke halaman lain
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondPage()),
);

// Cara balik ke halaman sebelumnya (tombol back)
Navigator.pop(context);

2. Pindah Halaman dengan Data (Passing Data)

Sering banget nih kita butuh bawa data pas pindah halaman, misalnya kirim username atau ID user. Gampang banget, cukup oper datanya lewat constructor halaman tujuan.

Halaman Tujuan:

class DetailPage extends StatelessWidget {
  final String namaUser;
  DetailPage({required this.namaUser}); // Terima datanya di sini

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: Center(child: Text("Halo, $namaUser!")));
  }
}

Halaman Asal:

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => DetailPage(namaUser: "Budi")),
);

3. Named Routes: Biar Kode Gak Berantakan

Kalau aplikasi kalian udah makin gede, jangan pake cara manual terus, nanti kodenya jadi spaghetti. Pake Named Routes biar lebih rapi. Definisikan dulu di MaterialApp:

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => HomePage(),
    '/detail': (context) => DetailPage(),
  },
);

Terus panggilnya tinggal gini:

Navigator.pushNamed(context, '/detail');

Jauh lebih bersih, kan?

Tips Pro: Jangan Pake Navigator Manual Kalau Bisa

Buat aplikasi yang production-ready, banyak yang saranin pake library navigasi kayak GoRouter. Dia lebih powerful buat handle deep linking dan state navigasi yang ribet. Tapi buat pemula, wajib paham konsep Navigator dasar ini dulu ya!

Kesimpulan

Navigasi di Flutter itu intinya cuma soal "tumpukan" halaman. Selama kalian paham kapan harus push dan kapan harus pop, aplikasi kalian bakal punya user experience yang oke banget. Jangan bosen buat eksperimen ya, ngab! Happy coding!