🔖 หมวดบทเรียน: การจัดการเส้นทาง (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 เพื่อสร้างระบบล็อกอินและสมัครใช้งานแบบปลอดภัย