Navigation & App Structure

จากหน้าจอเดียวสู่ทั้งแอป

widget tree วาดหน้าจอเดียว แต่แอปจริงมีหลายหน้าจอ, มีปุ่ม back, มี deep link, มี theme และสุดท้ายต้องคุยกับ platform ข้างล่าง โมดูลนี้ว่าด้วยโครงสร้างที่ยึดทุกอย่างเข้าด้วยกัน

แกนหลักคือการเปลี่ยนวิธีคิดเพียงจุดเดียว: navigation เริ่มจากแบบ imperative (push หน้านี้, pop หน้านั้น) แล้วขยับไปเป็น declarative (route stack เป็นฟังก์ชันของ app state) เข้าใจว่าทำไมถึงเปลี่ยน แล้วจะเข้าใจ routing สมัยใหม่ของ Flutter เกือบทั้งหมด

โมดูลนี้ครอบคลุมอะไรบ้าง

บทเรียน	สิ่งที่คุณจะได้เรียนรู้
Navigator & routes	route stack, `push`/`pop`, named route, การส่งและรับข้อมูล
Declarative routing	`go_router`, URL sync, deep linking, nested route, auth redirect
App scaffolding	`MaterialApp`, `Scaffold`, theming และ responsive/adaptive layout
Platform channels	`MethodChannel`, `EventChannel` และสะพานไปยัง native code

รูปร่างของแอป Flutter

flowchart TB
  app["MaterialApp
(theme, routing config)"] --> router["Router / Navigator
(the route stack)"]
  router --> scaffold["Scaffold
(appBar, body, nav)"]
  scaffold --> screen["your screen widgets"]
  screen -. platform channel .-> native["native code
(iOS / Android)"]

เลเยอร์ที่ประกอบเป็นโครงของแอป

บนสุดคือ MaterialApp ที่ต่อ theme และ routing configuration ถัดลงมา router จัดการ stack ของ route แต่ละ route render Scaffold — กรอบมาตรฐานที่มี app bar, body และช่อง navigation และเมื่อ Dart อย่างเดียวไม่พอ platform channel ก็ยื่นลงไปหา native code