ใน Flutter Navigator เป็นเครื่องมืออันทรงพลังสำหรับจัดการสถานะส่วนกลางและการนำทางเพจในแอปของคุณ ช่วยให้คุณสร้างแอปด้วยสถาปัตยกรรมที่ชัดเจนและการนำทางระหว่างหน้าจอที่ง่ายดาย
การกำหนด Routes
ในการเริ่มใช้งาน Navigator คุณต้องกำหนด routes ในแอปของคุณ Routes เป็นหน้าจอแต่ละหน้าจอที่ผู้ใช้สามารถนำทางไปได้ คุณสามารถกำหนด routes โดยใช้ MaterialApp และจัดเตรียมคอลเลกชันของ routes ซึ่งแต่ละรายการ route จะถูกแมปกับไฟล์ Widget.
ตัวอย่าง:
MaterialApp(
initialRoute: '/',
routes: {
'/':(context) => HomePage(),
'/second':(context) => SecondPage(),
},
)
ในตัวอย่างข้างต้น เราได้กำหนดสอง routes: '/'(home page)
และ '/second'(second page
) คุณสามารถเพิ่มได้มากเท่า routes ที่ต้องการ
การนำทางระหว่างหน้า
ในการนำทางระหว่างหน้า คุณสามารถใช้ Navigator เมธอดของ วิธีหนึ่งที่ใช้กันทั่วไปคือ pushNamed ซึ่งช่วยให้คุณนำทางไปยังหน้าอื่นโดยระบุชื่อของหน้า route นั้น
ตัวอย่าง:
// Navigate to the second page
Navigator.pushNamed(context, '/second');
นอกจากนี้ คุณสามารถใช้เมธอดพุชเพื่อนำทางไปยังหน้าอื่น route และสลับไปมาระหว่างหน้าต่างๆ
การส่งผ่านข้อมูลระหว่างหน้า
คุณสามารถส่งข้อมูลระหว่างหน้าโดยใช้เมธอด pushNamed กับพารามิเตอร์อาร์กิวเมนต์
ตัวอย่าง:
Navigator.pushNamed(
context,
'/second',
arguments: 'Data from the home page',
);
จากนั้น คุณจะสามารถเข้าถึงข้อมูลจากหน้าที่สองโดยใช้ ModalRoute.of และออบเจกต์การตั้งค่า:
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
String data = ModalRoute.of(context).settings.arguments;
// Use the data here
}
}
ย้อนกลับไปหน้าที่แล้ว
หากต้องการกลับไปที่หน้าก่อนหน้า คุณสามารถใช้วิธีป๊อป Navigator ของ การดำเนินการนี้จะปิดหน้าปัจจุบันและกลับไปยังหน้าก่อนหน้าในสแต็ก
ตัวอย่าง:
// Go back to the previous page
Navigator.pop(context);
บทสรุป
Navigator ใน Flutter ช่วยให้คุณจัดการสถานะรวมศูนย์และนำทางระหว่างหน้าต่างๆ ได้อย่างง่ายดาย เมื่อใช้ Navigator คุณสามารถสร้างแอปด้วยสถาปัตยกรรมที่ชัดเจนและมอบประสบการณ์การใช้งานที่ดีขึ้นเมื่อนำทางระหว่างหน้าจอต่างๆ