navigation ใน Flutter ทำงานอย่างไร?

Question

Accepted Answer

**Navigation** ใน Flutter คือการย้ายระหว่างหน้าจอ (page/route) — โดยใช้ **Navigator** (stack ของ route) สำหรับ navigation พื้นฐาน หรือ package routing แบบ declarative สำหรับแอปที่ซับซ้อนกว่า การเข้าใจ navigation เป็นสิ่งจำเป็นต่อการสร้างแอปแบบหลายหน้าจอ

## navigation พื้นฐานด้วย Navigator (เป็น 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
```

## การส่งข้อมูลระหว่างหน้าจอ

```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 route และ routing สมัยใหม่

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

## ทำไมจึงสำคัญ

การเข้าใจ navigation เป็นสิ่งจำเป็นเพราะ **แอปส่วนใหญ่มีหลายหน้าจอ** และการย้ายระหว่างหน้าจอเหล่านั้นเป็นพื้นฐานของฟังก์ชันการทำงานของแอป จึงเป็นความรู้ Flutter ที่ต้องรู้

แนวคิดหลัก — **Navigator ของ Flutter ที่จัดการ stack ของ route** (หน้าจอ) ซึ่งคุณ **push** เพื่อ navigate ไปข้างหน้า (เพิ่มหน้าจอด้านบน) และ **pop** เพื่อย้อนกลับ (เอาหน้าจอด้านบนสุดออก) — เป็นโมเดลความคิดพื้นฐานสำหรับ navigation และอุปมา stack (ที่ตรงกับวิธีที่ผู้ใช้ navigate ไปข้างหน้าและย้อนกลับในแอป) ทำให้มันเข้าใจได้ง่าย

การเข้าใจ **navigation พื้นฐาน** (push/pop) เป็นสิ่งจำเป็นสำหรับแอปหลายหน้าจอใด ๆ

การเข้าใจ **การส่งข้อมูลระหว่างหน้าจอ** (การส่งข้อมูลไปข้างหน้าผ่าน constructor และการคืนผลลัพธ์เมื่อ pop เนื่องจาก push คืนค่าเป็น Future) เป็นสิ่งจำเป็นเพราะหน้าจอมักต้องการแบ่งปันข้อมูล (การส่ง item ไปยังหน้าจอรายละเอียด การคืนค่าการเลือก)

การเข้าใจ **named route** (การกำหนด route ด้วยชื่อเพื่อการจัดระเบียบที่สะอาดขึ้นเมื่อมีหลายหน้าจอ) และโดยเฉพาะ **routing แบบ declarative สมัยใหม่** (package เช่น **go_router** ซึ่งแนะนำสำหรับแอปที่ไม่เล็กน้อย โดยให้ URL-based routing, deep linking, การรองรับเว็บ และ nested navigation) สะท้อนถึงแนวปฏิบัติที่ดีในปัจจุบัน — เมื่อแอปเติบโตขึ้น declarative routing จัดการความซับซ้อนได้ดีกว่า push/pop แบบ imperative

เนื่องจากแทบทุกแอปมีหลายหน้าจอและการ navigate ระหว่างหน้าจอ (พร้อมการส่งข้อมูล) เป็นพื้นฐานของฟังก์ชันการทำงานของแอป และเนื่องจากการเข้าใจโมเดล stack ของ Navigator การส่งข้อมูล และ routing สมัยใหม่ (go_router) เป็นสิ่งจำเป็นต่อการสร้างแอปหลายหน้าจอ การเข้าใจ navigation ใน Flutter จึงเป็นความรู้พื้นฐานที่จำเป็น — ความสามารถหลักที่จำเป็นในแทบทุกแอป Flutter และจำเป็นต่อการสร้างประสบการณ์หลายหน้าจอที่แอปพลิเคชันจริงต้องการ