🔖 หมวดบทเรียน: การจัดการการนำทางระหว่างหน้าจอในแอป
📌 เหมาะสำหรับ: ผู้เริ่มต้นที่ต้องการสร้างแอปที่มีหลายหน้า เช่น หน้าแรก หน้าโปรไฟล์ หน้ารายละเอียด
🎯 เป้าหมาย: เรียนรู้การใช้
Navigator.pushและNavigator.popเพื่อเปลี่ยนหน้าในแอป Flutter
🧭 เกริ่นนำ
แอปส่วนใหญ่มีมากกว่าหน้าจอเดียว เช่น หน้าหลัก, หน้าเกี่ยวกับ, หน้ารายละเอียดสินค้า ฯลฯ Flutter มีระบบ Navigator สำหรับการจัดการเส้นทาง (route) และการย้ายไปยังหน้าใหม่แบบง่าย ๆ พร้อมความสามารถในการย้อนกลับ (back) ได้สะดวก
📌 การใช้ Navigator.push
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondPage()),
);
ใช้สำหรับไปยังหน้าจอใหม่ โดยสร้าง Route ใหม่ขึ้นมาและนำทางไปยังหน้านั้น
🔙 การใช้ Navigator.pop
Navigator.pop(context);
ใช้ย้อนกลับไปหน้าก่อนหน้า (เหมือนกด back)
🧪 ตัวอย่างเต็ม 2 หน้า
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(),
    );
  }
}
class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("หน้าหลัก")),
      body: Center(
        child: ElevatedButton(
          child: Text("ไปหน้าถัดไป"),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
        ),
      ),
    );
  }
}
class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("หน้าที่สอง")),
      body: Center(
        child: ElevatedButton(
          child: Text("ย้อนกลับ"),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}
📝 สรุป
- ใช้ Navigator.pushเพื่อนำทางไปยังหน้าใหม่
- ใช้ Navigator.popเพื่อนำทางย้อนกลับ
- ใช้ MaterialPageRouteเพื่อสร้างหน้าใหม่แบบพื้นฐาน
ในบทถัดไป เราจะเรียนรู้การรับส่งค่าระหว่างหน้าจอ เช่น ส่ง ID หรือชื่อไปยังหน้าใหม่ แล้วรับค่ากลับเมื่อปิดหน้านั้น
