Bagaimana cara kerja navigasi di Flutter?

Question

Accepted Answer

**Navigasi** di Flutter berpindah antar layar (halaman/rute) — menggunakan **Navigator** (sebuah stack rute) untuk navigasi dasar, atau paket routing deklaratif untuk aplikasi yang lebih kompleks. Memahami navigasi sangat penting untuk membangun aplikasi multi-layar.

## Navigasi dasar dengan Navigator (sebuah stack)

```dart
// the Navigator manages a STACK of routes (screens)
// PUSH a new screen onto the stack (navigate to it)
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondScreen()),
);

// POP — go back (remove the top screen, return to the previous)
Navigator.pop(context);
```

```text
Think of navigation as a STACK of screens:
  → PUSH adds a screen on top (navigate forward)
  → POP removes the top screen (go back)
  → the back button / gesture also pops
```

## Melewatkan data antar layar

```dart
// pass data forward (via the constructor)
Navigator.push(context, MaterialPageRoute(
  builder: (context) => DetailScreen(itemId: 42),
));

// return data back when popping
Navigator.pop(context, result);          // return a result
final result = await Navigator.push(...); // receive it (push returns a Future)
```

## Named routes dan routing modern

```dart
// NAMED routes — define routes by name (cleaner for many screens)
Navigator.pushNamed(context, '/details');
// configured in MaterialApp(routes: {...})

// MODERN: declarative routing packages (go_router) for complex apps:
//   → URL-based routing, deep linking, web support, nested navigation
//   → go_router is the recommended approach for non-trivial apps
```

## Mengapa ini penting

Memahami navigasi sangat penting karena **sebagian besar aplikasi memiliki banyak layar**, dan berpindah antar layar merupakan bagian fundamental dari fungsionalitas aplikasi, sehingga merupakan pengetahuan Flutter yang wajib dikuasai.

Konsep inti — **Navigator Flutter mengelola stack rute** (layar), di mana Anda **push** untuk menavigasi maju (menambahkan layar di atas) dan **pop** untuk kembali (menghapus layar teratas) — adalah model mental fundamental untuk navigasi, dan metafora stack (sesuai dengan cara pengguna menavigasi maju dan mundur melalui aplikasi) membuatnya intuitif.

Memahami **navigasi dasar** (push/pop) diperlukan untuk aplikasi multi-layar apa pun.

Memahami **melewatkan data antar layar** (mengirim data maju melalui konstruktor dan mengembalikan hasil saat pop, karena push mengembalikan Future) sangat penting karena layar biasanya perlu berbagi data (melewatkan item ke layar detail, mengembalikan pilihan).

Memahami **named routes** (mendefinisikan rute berdasarkan nama untuk organisasi lebih rapi dengan banyak layar) dan khususnya **routing deklaratif modern** (paket seperti **go_router**, yang direkomendasikan untuk aplikasi non-trivial, menyediakan routing berbasis URL, deep linking, dukungan web, dan navigasi bersarang) mencerminkan praktik terbaik saat ini — seiring aplikasi berkembang, routing deklaratif menangani kompleksitas lebih baik daripada push/pop imperatif.

Karena hampir semua aplikasi memiliki banyak layar dan menavigasi antar layar (dengan pelewatan data) adalah bagian fundamental dari fungsionalitas aplikasi, dan karena memahami model stack Navigator, pelewatan data, dan routing modern (go_router) diperlukan untuk membangun aplikasi multi-layar, memahami navigasi di Flutter adalah pengetahuan fundamental yang sangat penting — kemampuan inti yang dibutuhkan di hampir setiap aplikasi Flutter dan perlu untuk membangun pengalaman multi-layar yang dibutuhkan aplikasi nyata.