Pengenalan go_router

Kenapa go_router?

Navigator 1.0 itu imperatif: kamu memberi perintah push dan pop secara langsung, dan tumpukan halamannya tidak terlihat sebagai data. Akibatnya tiga hal menjadi sulit: deep link (link aplikasiku://produk/42 harus membuka halaman yang tepat), URL web (tombol back browser harus sinkron dengan aplikasi), dan proteksi halaman (user yang belum login dilarang masuk). go_router membalik pendekatan menjadi deklaratif: kamu mendaftarkan semua route sebagai konfigurasi, dan URL atau path menjadi sumber kebenaran tunggal. Ini package resmi dari tim Flutter yang menyelesaikan ketiga masalah itu sekaligus.

Instalasi & Konfigurasi Dasar

flutter pub add go_router

import 'package:go_router/go_router.dart';

final router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HalamanUtama(),
    ),
    GoRoute(
      path: '/detail/:id',
      builder: (context, state) {
        final id = state.pathParameters['id']!;
        return HalamanDetail(id: id);
      },
    ),
  ],
);

// di fungsi main:
MaterialApp.router(routerConfig: router);

Perhatikan :id pada path: itu parameter dinamis yang bisa dibaca lewat state.pathParameters. Tidak perlu parsing String manual seperti pada named route.

go vs push: Dua Cara Pindah

// mengganti halaman saat ini (tidak bisa back ke sebelumnya)
context.go('/detail/42');

// menumpuk di atas halaman saat ini (bisa back)
context.push('/detail/42');

Aturan praktisnya: go untuk navigasi utama (pindah tab, menu drawer), push untuk alur detail yang wajar bisa di-back (dari daftar ke detail produk). Salah pilih membuat tombol back berperilaku aneh, jadi biasakan membedakan sejak awal.

Contoh nyata memakai query parameter untuk halaman pencarian:

// pindah dengan filter pencarian:
context.go('/cari?query=kopi');

// definisi route '/cari':
GoRoute(
  path: '/cari',
  builder: (context, state) {
    final query = state.uri.queryParameters['query'] ?? '';
    return HalamanCari(queryAwal: query);
  },
),

Catatan teknis: state.pathParameters untuk segmen path seperti :id, state.uri.queryParameters untuk ?key=value, dan state.extra untuk object Dart apa pun yang tidak muat di URL. Pilih sesuai kebutuhan datanya.

Redirect: Proteksi Halaman Login

Fitur yang paling membenarkan pemakaian go_router adalah redirect terpusat:

final router = GoRouter(
  redirect: (context, state) {
    final sedangLogin = state.matchedLocation == '/login';
    if (!sudahLogin && !sedangLogin) return '/login';
    if (sudahLogin && sedangLogin) return '/';
    return null; // null berarti tidak redirect
  },
  routes: [
    GoRoute(path: '/login', builder: (context, state) => const HalamanLogin()),
    GoRoute(path: '/', builder: (context, state) => const HalamanUtama()),
  ],
);

Satu fungsi menjaga seluruh aplikasi: halaman apa pun yang dibuka tanpa login otomatis dilempar ke /login, dan user yang sudah login tidak bisa membuka halaman login lagi. Dengan Navigator 1.0, pengecekan seperti ini harus ditulis manual di setiap halaman.

Edge Cases & Best Practices

• Route tidak dikenal: isi errorBuilder agar URL yang salah menampilkan halaman 404 yang ramah, bukan layar merah error.
• Jangan campur Navigator 1.0 dan go_router dalam satu aplikasi kecuali terpaksa; dua sistem stack yang berjalan paralel akan membingungkan.
• context.go butuh context di bawah router: pastikan widget berada di dalam MaterialApp.router, kalau tidak akan muncul error bahwa GoRouter tidak ditemukan.
• Untuk Flutter web: go_router hampir wajib, karena URL browser sinkron otomatis dan bisa di-share atau di-bookmark.

Kapan Jangan Pakai

Untuk aplikasi tiga sampai lima halaman tanpa deep link, tanpa versi web, dan tanpa proteksi login, go_router adalah overkill: Navigator.push biasa lebih sedikit kode dan lebih mudah dipahami tim. Pakai go_router saat skalanya menuntut: deep link, URL web, auth guard, atau nested navigation per tab lewat StatefulShellRoute.