Navigator: mengelola layar di Flutter

Apa itu Navigator di Flutter

Navigator — adalah widget yang mengelola tumpukan objek Route dan mengimplementasikan navigasi layar di aplikasi Flutter. Setiap panggilan push menempatkan Route baru di atas tumpukan, pop menghapus Route teratas dan kembali ke layar sebelumnya. MaterialApp secara otomatis membuat Navigator untuk seluruh aplikasi, membuatnya dapat diakses melalui Navigator.of(context).

Tidak seperti StatefulWidget, di mana penggantian konten terjadi melalui setState di dalam satu widget, Navigator beroperasi pada seluruh layar dengan siklus hidupnya sendiri. Setiap Route dalam tumpukan adalah status terisolasi dengan BuildContext sendiri, yang mencegah kebocoran memori dan menyederhanakan manajemen dependensi. Saat pop dipanggil, Route yang tidak digunakan akan dimusnahkan, membebaskan sumber daya.

Menurut Flutter Navigation Guide (2026), Navigator telah berevolusi dari API imperatif (Navigator 1.0) ke deklaratif (Navigator 2.0). Navigator 1.0 menggunakan metode push/pop secara langsung, yang nyaman untuk skenario sederhana. Navigator 2.0 (Router) cocok untuk aplikasi dengan tautan dalam, navigasi adaptif, dan perutean web.

Bagaimana Navigator bekerja di dalamnya

Di dalam, Navigator menggunakan Overlay — widget khusus yang menampilkan Route satu di atas yang lain. Setiap Route membuat posisinya sendiri di Overlay dengan indeks Z yang sesuai dengan kedalaman di tumpukan. Ini menjelaskan mengapa saat push layar baru dianimasikan di atas yang sebelumnya, dan saat pop — layar sebelumnya sudah siap ditampilkan: ia tidak dimusnahkan, hanya tetap di Overlay di bawah yang baru.

Untuk animasi transisi, Navigator menggunakan PageTransitionsTheme, yang dapat ditimpa di ThemeData. Animasi platform diatur melalui CupertinoPageRoute untuk iOS (geser dari kanan) dan MaterialPageRoute untuk Android (geser dari bawah). Navigator secara otomatis memilih animasi yang tepat saat menggunakan PlatformRoute.

Metode Navigator: push, pop, dan pushReplacement

Navigator menyediakan serangkaian metode untuk mengelola tumpukan Route. Setiap metode menyelesaikan tugas navigasi tertentu — dari transisi sederhana hingga penggantian lengkap riwayat layar. Mari kita lihat metode utama dengan contoh penggunaan.

Push dan Pop: operasi dasar

Metode push menerima Route dan mengembalikan Future dengan hasil yang diteruskan saat pop. Ini memungkinkan menerima data dari layar yang kita tuju. Misalnya, layar pemilihan tanggal dapat mengembalikan DateTime melalui Navigator.pop(context, selectedDate). Metode pop tanpa argumen mengembalikan null, dengan argumen — meneruskan nilai ke layar pemanggil.

PushReplacement: penggantian layar

pushReplacement mengganti Route saat ini dengan yang baru, menghapus yang saat ini dari tumpukan. Ini penting dalam skenario di mana pengguna tidak boleh kembali ke layar sebelumnya. Contoh tipikal — layar login: setelah berhasil masuk, layar saat ini diganti dengan layar utama, dan tombol “Kembali” tidak kembali ke formulir login.

Rute bernama dan onGenerateRoute

Navigator mendukung navigasi melalui rute bernama dengan metode pushNamed. Alih-alih membuat Route secara langsung, pengembang menentukan pengenal teks, dan Navigator secara otomatis membuat Route berdasarkan konfigurasi di MaterialApp. Ini menyederhanakan kode dan memusatkan definisi rute di satu tempat.

Rute bernama didefinisikan melalui properti routes di MaterialApp, di mana setiap kunci adalah string jalur dan nilainya adalah fungsi yang mengembalikan Widget. Untuk rute dinamis (dengan parameter), digunakan onGenerateRoute — callback yang menerima RouteSettings dan mengembalikan Route. Ini memungkinkan penerusan argumen melalui arguments dan implementasi navigasi dalam.

Menurut Flutter Cookbook (2026), penerusan argumen melalui pushNamed dilakukan dengan parameter arguments: Object?. Layar penerima mengekstrak argumen melalui ModalRoute.of(context)!.settings.arguments, yang memastikan transfer data yang aman secara tipe tanpa variabel global atau InheritedWidget.

Penanganan rute tidak dikenal

Properti onUnknownRoute di MaterialApp menangani kasus ketika pushNamed dipanggil dengan rute yang tidak ada. Ini berguna untuk menampilkan layar 404 atau mengarahkan ke halaman utama. Dalam kombinasi dengan onGenerateRoute, ini memastikan cakupan lengkap dari semua kemungkinan skenario navigasi.

Navigator 2.0 dan navigasi deklaratif Router

Navigator 2.0 (juga dikenal sebagai Router API) — adalah pendekatan deklaratif untuk navigasi, diperkenalkan di Flutter 2.0. Tidak seperti Navigator 1.0 imperatif di mana pengembang memanggil push/pop, Router mengelola navigasi melalui status, secara otomatis menyinkronkan URL browser dengan layar saat ini. Ini sangat penting untuk aplikasi web dan versi desktop.

Arsitektur Navigator 2.0 terdiri dari tiga komponen utama: RouteInformationParser mengurai URL menjadi konfigurasi rute, RouterDelegate mengubah konfigurasi menjadi daftar Route, dan BackButtonDispatcher menangani tombol sistem “Kembali”. Arsitektur semacam itu membuat navigasi sepenuhnya dapat diprediksi dan diuji.

Untuk menyederhanakan pekerjaan dengan Navigator 2.0, ada paket wrapper: go_router (direkomendasikan oleh Google), auto_route, dan beamer. go_router menyediakan DSL deklaratif untuk mendefinisikan rute dengan dukungan untuk navigasi bersarang, pengalihan, dan tautan dalam tanpa implementasi manual RouterDelegate. Menurut pub.dev (2026), go_router digunakan dalam 35% proyek Flutter baru yang lebih memilih pendekatan deklaratif.

Contoh navigasi di aplikasi Flutter

Mari kita lihat contoh Navigator dengan rute bernama dan transfer data antar layar. Kode mendemonstrasikan layar daftar produk, transisi ke layar detail, dan kembali dengan hasil.

// Konfigurasi rute di MaterialApp
MaterialApp(
  initialRoute: '/',
  onGenerateRoute: (RouteSettings settings) {
    if (settings.name == '/') {
      return MaterialPageRoute(
        builder: (context) => const ProductListPage(),
      );
    }
    if (settings.name == '/product') {
      final productId = settings.arguments as String;
      return MaterialPageRoute(
        builder: (context) => ProductDetailPage(productId: productId),
      );
    }
    return MaterialPageRoute(
      builder: (context) => const NotFoundPage(),
    );
  },
)

// Navigasi dengan transfer data
final result = await Navigator.pushNamed(
  context,
  '/product',
  arguments: 'product_42',
);

// Mendapatkan data di layar penerima
final args = ModalRoute.of(context)!.settings.arguments as String;

// Ganti layar setelah login
Navigator.pushReplacementNamed(context, '/home');

// Bersihkan tumpukan ke layar utama
Navigator.pushNamedAndRemoveUntil(
  context,
  '/home',
  (route) => false,
);

Dalam contoh, Navigator.pushNamed meneruskan pengenal produk ke layar detail. Saat kembali melalui Navigator.pop(context, updatedProduct), layar pemanggil menerima data yang diperbarui dalam variabel result. pushReplacementNamed mengganti layar saat ini setelah otorisasi, dan pushNamedAndRemoveUntil dengan kondisi (route) => false membersihkan tumpukan sepenuhnya, mencegah kembali ke layar sebelumnya.