go_router

Library สำหรับจัดการ navigation (การเปลี่ยนหน้าจอ) ใน Flutter — Flutter team แนะนำให้ใช้เป็นมาตรฐาน

---

มันคืออะไร?

ถ้า app เหมือนอาคาร — go_router คือ แผนผังอาคาร + พนักงานรักษาความปลอดภัย

• แผนผัง = กำหนดว่ามีห้องอะไรบ้าง (/splash, /auth, /home)
• รปภ. = เช็คก่อนว่า “มีสิทธิ์เข้าห้องนี้ไหม?” — ถ้าไม่มี session ก็ไม่ให้เข้า /home

ต่างจากการ push/pop แบบเดิมที่ต้องเขียนเช็คเองทุกหน้า — go_router เช็คให้ที่เดียวแล้วใช้ได้ทั้ง app

---

แนวคิดสำคัญ

Routes — แผนที่ของ app

กำหนดล่วงหน้าว่า path ไหน → เปิดหน้าอะไร

final router = GoRouter(
  routes: [
    GoRoute(path: '/splash', builder: (ctx, state) => SplashScreen()),
    GoRoute(path: '/auth',   builder: (ctx, state) => AuthScreen()),
    GoRoute(path: '/home',   builder: (ctx, state) => HomeScreen()),
  ],
);

เปลี่ยนหน้า

context.go('/home');    // เปลี่ยนหน้า (ไม่มีปุ่ม back)
context.push('/auth');  // เปิดหน้าใหม่ทับ (กด back กลับได้)

Redirect Guard — จุดแข็งหลัก

ตรวจสอบ condition ก่อนเปิดหน้า — กำหนดครั้งเดียวใช้ได้ทุกหน้า

GoRouter(
  redirect: (context, state) {
    final session = supabase.auth.currentSession;
    final isAuth = state.matchedLocation == '/auth';
 
    if (session == null && !isAuth) return '/auth';  // ไม่มี session → บังคับไป Auth
    if (session != null && isAuth)  return '/home';  // มี session แล้ว → ไป Home เลย
    return null;                                      // ผ่าน ไม่ redirect
  },
  routes: [...],
);

---

เทียบกับ Navigator.push พื้นฐาน

	Navigator.push	go_router
Style	Imperative (สั่งทีละขั้น)	Declarative (ประกาศไว้ล่วงหน้า)
Auth guard	เขียนเองทุกหน้า	กำหนดที่เดียวใน redirect
Deep linking	ยาก	รองรับในตัว
เหมาะกับ	app เล็ก 2-3 หน้า	app ที่มี auth + หลายหน้า

---

ติดตั้ง

# pubspec.yaml
dependencies:
  go_router: ^14.0.0

---

ใช้ร่วมกับ

• Navigation — concept พื้นฐาน navigation ใน Flutter
• Supabase — ใช้ currentSession ใน redirect guard เพื่อเช็ค auth