Bagaimanakah navigasi berfungsi dalam Flutter?

Question

IT Interview Practice · Accepted Answer

**Navigasi** dalam Flutter berpindah antara skrin (halaman/laluan) — menggunakan **Navigator** (timbunan laluan) untuk navigasi asas, atau pakej penghalaan deklaratif untuk aplikasi yang lebih kompleks. Memahami navigasi adalah penting untuk membina aplikasi berbilang skrin.

## Navigasi asas dengan Navigator (satu timbunan)

```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
```

## Menghantar data antara skrin

```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)
```

## Laluan bernama dan penghalaan moden

```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 ia penting

Memahami navigasi adalah penting kerana **kebanyakan aplikasi mempunyai berbilang skrin**, dan berpindah antaranya adalah asas kepada fungsi aplikasi, jadi ia merupakan pengetahuan Flutter yang mesti diketahui.

Konsep teras — **Navigator Flutter menguruskan timbunan laluan** (skrin), di mana anda **push** untuk menavigasi ke hadapan (menambah skrin di atas) dan **pop** untuk kembali (membuang skrin teratas) — ialah model mental asas untuk navigasi, dan metafora timbunan (sepadan dengan cara pengguna menavigasi ke hadapan dan kembali melalui aplikasi) menjadikannya intuitif.

Memahami **navigasi asas** (push/pop) adalah perlu untuk sebarang aplikasi berbilang skrin.

Memahami **menghantar data antara skrin** (menghantar data ke hadapan melalui pembina dan memulangkan hasil semasa pop, kerana push memulangkan Future) adalah penting kerana skrin biasanya perlu berkongsi data (menghantar item ke skrin terperinci, memulangkan pilihan).

Memahami **laluan bernama** (mentakrifkan laluan mengikut nama untuk organisasi yang lebih kemas dengan banyak skrin) dan terutamanya **penghalaan deklaratif moden** (pakej seperti **go_router**, yang disyorkan untuk aplikasi bukan remeh, menyediakan penghalaan berasaskan URL, pautan dalam, sokongan web, dan navigasi bersarang) mencerminkan amalan terbaik semasa — apabila aplikasi berkembang, penghalaan deklaratif mengendalikan kerumitan dengan lebih baik daripada push/pop imperatif.

Memandangkan hampir semua aplikasi mempunyai berbilang skrin dan menavigasi antaranya (dengan penghantaran data) adalah asas kepada fungsi aplikasi, dan memandangkan memahami model timbunan Navigator, penghantaran data, dan penghalaan moden (go_router) adalah perlu untuk membina aplikasi berbilang skrin, memahami navigasi dalam Flutter adalah pengetahuan asas yang penting — keupayaan teras yang diperlukan dalam hampir setiap aplikasi Flutter dan perlu untuk membina pengalaman berbilang skrin yang diperlukan oleh aplikasi sebenar.

Navigasi asas dengan Navigator (satu timbunan)

Menghantar data antara skrin

Laluan bernama dan penghalaan moden

Mengapa ia penting

Soalan berkaitan