Route — คืออะไร, ประเภทและการสร้างเส้นทางใน Flutter

Route ใน Flutter คืออะไร

Route เป็นพื้นฐานของระบบนำทางของ Flutter ทุกหน้าจอที่ผู้ใช้เห็นในแอปพลิเคชันจะถูกแสดงโดยออบเจกต์ Route ที่อยู่ในสแต็กของ Navigator Route ทำให้หน้าจอเป็นนามธรรมจากโค้ดควบคุม: Navigator เพิ่มและลบ Route ในขณะที่ภายใน Route คืออินเทอร์เฟซที่ผู้ใช้เห็น สถาปัตยกรรมนี้แยกความรับผิดชอบระหว่างการนำทางและการแสดงผล

ต่างจากการแทนที่วิดเจ็ตธรรมดา Route ให้บริการที่ไม่สามารถใช้งานได้กับวิดเจ็ตทั่วไป: ModalBarrier (การทำให้พื้นหลังมืดลงเมื่อเปิดไดอะล็อก), การควบคุมแอนิเมชันเข้าและออก, การจัดการปุ่มย้อนกลับของฮาร์ดแวร์บน Android และการรวมเข้ากับแอนิเมชัน Hero เพื่อการเปลี่ยนภาพที่ราบรื่นระหว่างหน้าจอ

ตาม Flutter Cookbook (2026) Route เป็นองค์ประกอบสำคัญสำหรับแอนิเมชัน Hero: วิดเจ็ต Hero บน Route หนึ่งจะสร้างแอนิเมชันการเปลี่ยนภาพไปยังวิดเจ็ต Hero บน Route ถัดไปโดยอัตโนมัติ สร้างเอฟเฟกต์องค์ประกอบ “บิน” เป็นไปได้เพราะ Route เก็บทั้งสองหน้าจอไว้ใน Overlay ระหว่างแอนิเมชัน

Route เป็นส่วนประกอบสำคัญของการนำทาง

Route เป็นพื้นฐานสำหรับทั้งแอปพลิเคชันมือถืออย่างง่าย (ผ่าน Navigator 1.0) และสถานการณ์ที่ซับซ้อนด้วยลิงก์ลึก (Navigator 2.0) ใน Navigator 2.0 Route แทน Page ที่ RouterDelegate แปลงจากการกำหนดค่าเส้นทาง ดังนั้น การเข้าใจ Route จึงจำเป็นสำหรับการทำงานกับระบบนำทาง Flutter ใดๆ — โดยไม่คำนึงถึงแนวทางหรือแพ็คเกจที่เลือก

ประเภทของ Route: MaterialPageRoute และ CupertinoPageRoute

Flutter มีการใช้งาน Route ในตัวหลายแบบ แต่ละแบบปรับพฤติกรรมให้เข้ากับแพลตฟอร์มเฉพาะ การเลือกประเภท Route ที่ถูกต้องส่งผลต่อประสบการณ์ผู้ใช้: แอนิเมชัน Material บน Android และแอนิเมชัน Cupertino บน iOS สร้างความรู้สึกของแอปพลิเคชัน “ดั้งเดิม”

MaterialPageRoute: มาตรฐานสำหรับ Android

MaterialPageRoute เป็นการใช้งาน Route ที่ใช้บ่อยที่สุด มันสร้างแอนิเมชันให้หน้าจอใหม่เข้าจากล่างขึ้นบนพร้อมการปรากฏทีละน้อย เมื่อออก หน้าจอจะสร้างแอนิเมชันจากบนลงล่าง กลับสู่ตำแหน่งเดิม แถบเครื่องมือ (AppBar) และเนื้อหาหน้าจอสร้างแอนิเมชันแยกกัน สร้างเอฟเฟกต์ลำดับชั้น

CupertinoPageRoute: รูปแบบการนำทาง iOS

CupertinoPageRoute เลียนแบบ UINavigationController จาก iOS หน้าจอใหม่เข้ามาจากทางขวา ปกปิดหน้าจอก่อนหน้า คุณสมบัติหลักคือการสนับสนุนท่าทางการปัดกลับแบบโต้ตอบ ซึ่งใช้งานผ่าน CupertinoBackGestureDetector ท่าทางนี้จะถูกจัดการแม้ในระหว่างแอนิเมชัน ให้พฤติกรรมที่เป็นธรรมชาติซึ่งผู้ใช้ iPhone คุ้นเคย

วงจรชีวิตของ Route: จากการสร้างจนถึงการทำลาย

Route มีวงจรชีวิตของตัวเอง ซึ่งแตกต่างจากวงจรชีวิตของ StatefulWidget ทั่วไป การทำความเข้าใจวงจรนี้จำเป็นสำหรับการเริ่มต้นข้อมูลที่ถูกต้อง การสมัครสมาชิกสตรีม และการปล่อยทรัพยากรเมื่อปิดหน้าจอ

ขั้นตอนของวงจรชีวิต Route

วงจรชีวิตของ Route ประกอบด้วยสี่ขั้นตอนหลัก การเปลี่ยนภาพ — Route ถูกสร้างขึ้นและสร้างแอนิเมชันเมื่อเข้า (เรียก didPush) ทำงาน — Route แสดงผลอย่างสมบูรณ์และโต้ตอบกับผู้ใช้ ไม่ทำงาน — Route อื่นปกปิดหน้าจอปัจจุบัน (ไดอะล็อก, ชีทด้านล่าง) แต่ Route ยังคงอยู่ในสแต็ก ถูกทำลาย — Route ถูกลบออกจากสแต็กและถูกทำลาย เรียก didPop และ dispose

เมธอดวงจรชีวิตของ Route สามารถถูกแทนที่ในการใช้งานที่กำหนดเอง ตัวอย่างเช่น didPop ถูกเรียกเมื่อ Route ถูกลบออกจากสแต็ก — ที่นี่คุณสามารถบันทึกข้อมูลร่าง didChangeNext ถูกเรียกเมื่อ Route ถัดไปในสแต็กเปลี่ยนแปลง — มีประโยชน์สำหรับการอัปเดต UI เมื่อประวัติการนำทางเปลี่ยนแปลง

ตาม Flutter API Route.didPop (2026) สิ่งสำคัญคือไม่สับสนระหว่างวงจรชีวิตของ Route กับวงจรชีวิตของ State ภายใน Route StatefulWidget ภายใน Route มี initState และ dispose ของตัวเอง ซึ่งถูกเรียกในช่วงขั้นตอนการเปลี่ยนภาพและถูกทำลายตามลำดับ Route มีอายุยานานกว่า State ภายใน — Route ยังคงอยู่ใน Overlay แม้ว่าวิดเจ็ตของมันจะถูกซ่อนชั่วคราวโดย Route อื่น

การส่งข้อมูลผ่าน Route ระหว่างหน้าจอ

Route มีกลไกสำหรับการส่งข้อมูลทั้งในขณะป้อนข้อมูล (เมื่อสร้าง) และในขณะส่งออก (เมื่อเสร็จสิ้น) การส่งข้อมูลที่เหมาะสมผ่าน Route ช่วยลดความจำเป็นในการใช้ตัวแปรทั่วโลกและ InheritedWidget ทำให้การนำทางปลอดภัยตามชนิดและคาดเดาได้

ในการส่งข้อมูลไปยังหน้าจอใหม่ ให้ใช้คอนสตรัคเตอร์ของวิดเจ็ตผู้รับหรือพารามิเตอร์ arguments ใน Navigator.pushNamed ภายใน Route ข้อมูลสามารถเข้าถึงได้ผ่าน RouteSettings.arguments ซึ่งเก็บไว้ในออบเจกต์ Route วิธีการนี้ใช้ได้กับทุกประเภท Route — MaterialPageRoute, CupertinoPageRoute และการใช้งานที่กำหนดเอง

ในการส่งคืนข้อมูล ให้ใช้อาร์กิวเมนต์ที่สองของ Navigator.pop(context, result) Navigator.push ส่งคืน Future ซึ่งเสร็จสมบูรณ์ด้วยค่าที่ส่งไปยัง pop หาก pop ถูกเรียกโดยไม่มีอาร์กิวเมนต์ Future จะเสร็จสมบูรณ์ด้วย null กลไกนี้คล้ายกับ startActivityForResult ใน Android และ completion handler ใน iOS แต่ใช้งานผ่าน Dart Futures

การส่งข้อมูลผ่านคอนสตรัคเตอร์ของ Route

เมื่อเรียก Navigator.push โดยตรงกับ MaterialPageRoute ข้อมูลจะถูกส่งผ่านคอนสตรัคเตอร์ของหน้าจอเป้าหมาย MethodChannel ไม่ถูกใช้งาน — นี่คือการโต้ตอบ Dart บริสุทธิ์ วิธีการนี้เป็นที่นิยมสำหรับการส่งออบเจกต์ที่ซับซ้อนอย่างปลอดภัยตามชนิด

ตัวอย่างการสร้าง Route ที่กำหนดเอง

มาดูตัวอย่างการสร้าง Route ที่กำหนดเอง พร้อมแอนิเมชันและการส่งข้อมูลของตัวเอง PageRouteBuilder อนุญาตให้กำหนดแอนิเมชันเข้าและออกด้วยการควบคุมเส้นโค้งแอนิเมชันและระยะเวลาอย่างสมบูรณ์

// Route ที่กำหนดเองด้วยแอนิเมชันเลื่อน
Navigator.push(context, PageRouteBuilder(
  pageBuilder: (context, animation, secondaryAnimation) {
    return DetailPage(productId: '42');
  },
  transitionsBuilder: (context, animation, secondaryAnimation, child) {
    const begin = Offset(0.0, 0.3);
    const end = Offset.zero;
    final tween = Tween(begin: begin, end: end);
    final offsetAnimation = animation.drive(tween);
    return SlideTransition(position: offsetAnimation, child: child);
  },
  transitionDuration: const Duration(milliseconds: 400),
));

// ส่งคืนข้อมูลจากหน้าจอ
ElevatedButton(
  onPressed: () => Navigator.of(context).pop({'selected': true, 'id': '42'}),
  child: const Text('เลือก'),
);

// รับผลลัพธ์บนหน้าจอที่เรียก
final result = await Navigator.push(context, MaterialPageRoute(
  builder: (context) => const SelectionPage(),
));
if (result != null) {
  print('ที่เลือก: ${result['selected']}');
}

ในตัวอย่าง PageRouteBuilder กำหนดแอนิเมชันเลื่อนจากด้านล่างแบบกำหนดเองพร้อมความโปร่งใส transitionDuration กำหนดความเร็วของแอนิเมชัน โค้ดยังสาธิตการส่งผลลัพธ์: หน้าจอรายละเอียดส่งคืน Map พร้อมการเลือกของผู้ใช้ และหน้าจอที่เรียกได้รับข้อมูลนี้ผ่าน Future จาก push Route รับประกันการแยกอย่างสมบูรณ์: ร่างบนหน้าจอรายละเอียดไม่ส่งผลต่อสถานะของรายการ