รวมวิธีเปลี่ยน Page ไปยัง Page ต่างๆของ Flutter

มาต่อกับชาเลนจ์ จากเด็กจบใหม่ที่ต้องติดบ้านเพราะโควิดสู่นักพัฒนา Flutter #6

บทความต่อจาก

Life cycle ของ Flutter

Contents

• pushNamed
• pop
• pushReplacementNamed
• popAndPushNamed
• pushNamedAndRemoveUntil
• popUntil
• push

เวลาเปิดหน้าต่างๆให้นึกถึง Stack นะครับหลักการคือ Last In First Out (LIFO) หมายความว่าสิ่งที่ถูกแทรกเข้ามาล่าสุดจะถูกลบออกก่อน

pushNamed

pushNamed เป็นการเปิดไปยังหน้าที่ต้องการ

สมมุติว่าผู้อ่านอยู่ page1 และต้องการเปิดหน้าใหม่ก็จะเจอ page2
พอผู้อ่านอยู่ page2 และต้องการเปิดหน้าใหม่ก็จะเจอ page3 จะเป็นยังงี้ไปเรื่อยๆ

App: page1(push) -> page2(push) -> page3

pop

Navigator pop เป็นการย้อนกลับไปยัง page ที่เคยอยู่

สมมุติว่าผู้อ่านอยู่ page3 เมื่อกด pop ครั้งนึงก็จะย้อนกลับมายัง page2
พอผู้อ่านอยู่ page2 เมื่อกด pop ครั้งนึงก็จะย้อนกลับมายัง page1

App: page1 -> page2 -> page3(pop)
To
App: page1 -> page2 

pushReplacementNamed

Navigator pushReplacementNamed เป็นการแทนที่หน้าที่เราอยู่ ณ ปัจจุบัน

สมมุติว่าผู้อ่านอยู่ page1 เมื่อกด pushReplacementNamed

App: page1(pushReplacementNamed) <- page2
To
App: page2

ต่อไปนี้ *page1 ผมขอใช้ pushReplacementNamed เสมอนะครับ

popAndPushNamed

Navigator popAndPushNamed ผลลัพธ์เหมือน pushReplacementNamed เลย
แต่ข้อแตกต่างคือเรื่องการแสดงผล animation flutter
pushReplacementNamed : Enter animation
popAndPushNamed : Exit animation

pushNamedAndRemoveUntil

Navigator pushNamedAndRemoveUntil มีลูกเล่นอยู่ 2 แบบคือ

1. เคลียร์ทุกค่าที่อยู่ใน stack แล้วทำการเปิด page ที่ต้องการ เช่น page1

Navigator.pushNamedAndRemoveUntil(
    context, '/page1', (Route<dynamic> route) => false);
APP: page1(login) -> page2 -> page3 -> page4(logout)
To
App: page1

2. เคลียร์ค่าใน stack ตามที่ต้องการ เช่น ต้องการเปิด page4 แล้วเคลียร์ page3,4

Navigator.pushNamedAndRemoveUntil(
    context, '/page4', ModalRoute.withName('/page2'));
APP: page1 -> page2 -> page3(pushNamedAndRemoveUntil) -> page4
To
App: page4

popUntil

Navigator popUntil จะเป็นการ pop จนกว่าจะถึง page ที่ต้องการ เช่น page2

Navigator.popUntil(context, ModalRoute.withName('/page2'));
APP: page1 -> page2 -> page3 -> page4(popUntil)
To
APP: page2

push

Navigator push เป็นการเปิด page เหมือนๆ pushNamed เลยครับแต่ push สามารถรับส่ง data ได้ด้วยครับ

โค้ดที่ใช้ทดสอบ Navigator ทั้งหมดครับ

วันนี้ขอจบบทความเท่านี้นะครับ ถ้ามีอะไรติชมเขียนมาได้เลยนะครับ ผมจะได้เอาไปปรับปรุงในบทความต่อไป ขอบคุณที่อ่านจนจบครับ

• จากเด็กจบใหม่ที่ต้องติดบ้านเพราะโควิดสู่นักพัฒนา Flutter #7