Dev to webs {Coding…}

ร บทเรียนฟรีด้านการพัฒนาซอฟต์แวร์ ที่ครอบคลุมเนื้อหาหลากหลาย ตั้งแต่การเขียนโค้ดพื้นฐานไปจนถึงเทคนิคขั้นสูง

บทที่ 4: การจัดการ Route และ Navigation ขั้นสูง (Navigator 2.0 & GoRouter)

🔖 หมวดบทเรียน: การจัดการเส้นทาง (Routing) ระดับแอดวานซ์ใน Flutter

📌 เหมาะสำหรับ: แอปที่มีหลายหน้า ซับซ้อน และต้องการจัดการเส้นทางแบบ declarative

🎯 เป้าหมาย: เข้าใจการใช้ Navigator 2.0 และ GoRouter เพื่อจัดการ navigation อย่างยืดหยุ่นและทันสมัย

🧭 เกริ่นนำ

การนำทางใน Flutter แบบเดิม (Navigator 1.0) ใช้ push/pop ซึ่งเหมาะกับแอปเล็ก ๆ แต่เมื่อแอปซับซ้อนขึ้น เช่น รองรับ deep link หรือต้องการควบคุม stack แบบละเอียด Navigator 2.0 จึงถูกออกแบบมาให้ตอบโจทย์นั้น และมี library ชื่อ go_router ที่ช่วยให้เขียนง่ายขึ้น

📦 การติดตั้ง go_router

เพิ่มใน pubspec.yaml:

dependencies:
  go_router: ^12.0.0

🧪 ตัวอย่างใช้งาน go_router

สร้างเส้นทางหลัก

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

void main() {
  runApp(MyApp());
}

final GoRouter _router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => HomePage(),
    ),
    GoRoute(
      path: '/about',
      builder: (context, state) => AboutPage(),
    ),
  ],
);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _router,
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => context.go('/about'),
          child: Text('ไปหน้า About'),
        ),
      ),
    );
  }
}

class AboutPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('About')),
      body: Center(child: Text('นี่คือหน้าข้อมูล')),
    );
  }
}

📌 ความสามารถของ GoRouter

  • รองรับ deep linking โดยอัตโนมัติ
  • ใช้งานง่ายกว่า Navigator 2.0 ตรง ๆ
  • มีระบบ redirect, error page, nested navigation

✅ สรุป

  • Navigator 2.0 ช่วยจัดการ stack routing แบบ declarative
  • GoRouter ช่วย simplify การใช้งานและเหมาะกับแอปจริง
  • ใช้ context.go('/path') หรือ context.push('/path') เพื่อเปลี่ยนหน้า

ในบทถัดไปเราจะไปต่อกับการใช้งาน Firebase Authentication เพื่อสร้างระบบล็อกอินและสมัครใช้งานแบบปลอดภัย