flutternavigasirouteMenengah3 mnt baca

Named Route: Navigasi dengan Nama

Kelola navigasi skala besar dengan named route, daftarkan rute di MaterialApp dan pindah dengan pushNamed.

Kenapa named route?

Saat aplikasi punya belasan halaman, memanggil MaterialPageRoute(builder: ...) di mana-mana bikin navigasi tersebar dan sulit dilacak. Named route memusatkan definisi rute di satu tempat dengan nama string seperti '/login' atau '/produk/detail'.

Mendaftarkan rute

dart
MaterialApp(
  title: 'Aplikasi Kasir',
  initialRoute: '/',
  routes: {
    '/': (context) => const HalamanHome(),
    '/login': (context) => const HalamanLogin(),
    '/produk': (context) => const HalamanProduk(),
    '/pengaturan': (context) => const HalamanPengaturan(),
  },
)
dart
// Pindah halaman
Navigator.pushNamed(context, '/login');

// Ganti halaman (misalnya setelah login sukses)
Navigator.pushReplacementNamed(context, '/');

// Kembali ke home dan buang semua rute di atasnya
Navigator.pushNamedAndRemoveUntil(context, '/', (route) => false);

Kode jadi lebih bersih: cukup sebut nama rutenya, tanpa perlu import class halaman di setiap file yang butuh navigasi.

Mengirim argumen

Named route bisa membawa data lewat arguments:

dart
// Mengirim
Navigator.pushNamed(context, '/produk/detail', arguments: 'kopi-tubruk');

// Menerima di halaman tujuan
class HalamanDetailProduk extends StatelessWidget {
  const HalamanDetailProduk({super.key});

  @override
  Widget build(BuildContext context) {
    final id = ModalRoute.of(context)!.settings.arguments as String;
    return Scaffold(
      appBar: AppBar(title: Text('Produk: $id')),
      body: Center(child: Text('Menampilkan produk $id')),
    );
  }
}

Perhatikan as String: arguments bertipe Object?, jadi kamu wajib cast dengan tipe yang benar. Salah cast berarti runtime error, jadi dokumentasikan tipe arguments tiap rute.

onGenerateRoute untuk kasus dinamis

Untuk rute dengan parameter path seperti '/produk/123', pakai onGenerateRoute:

dart
MaterialApp(
  onGenerateRoute: (settings) {
    final uri = Uri.parse(settings.name ?? '/');
    if (uri.pathSegments.length == 2 && uri.pathSegments[0] == 'produk') {
      final id = uri.pathSegments[1];
      return MaterialPageRoute(
        builder: (context) => HalamanDetailProduk(id: id),
      );
    }
    return MaterialPageRoute(builder: (context) => const HalamanNotFound());
  },
)

Catatan teknis: ModalRoute.of(context)! memakai null assertion. Ia aman di dalam build halaman yang memang dibuka lewat Navigator, tapi akan null kalau widget dipakai di luar route (misalnya di widget test tanpa MaterialApp). Untuk kode yang lebih defensif, pakai ModalRoute.of(context)?.settings.arguments lalu tangani null dengan halaman error yang ramah, bukan crash.