🔖 หมวดบทเรียน: การจัดการการนำทางระหว่างหน้าจอในแอป
📌 เหมาะสำหรับ: ผู้เริ่มต้นที่ต้องการสร้างแอปที่มีหลายหน้า เช่น หน้าแรก หน้าโปรไฟล์ หน้ารายละเอียด
🎯 เป้าหมาย: เรียนรู้การใช้
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 หรือชื่อไปยังหน้าใหม่ แล้วรับค่ากลับเมื่อปิดหน้านั้น