Dev to webs {Coding…}

บทเรียนฟรีด้านการพัฒนาซอฟต์แวร์ ที่ครอบคลุมเนื้อหาหลากหลาย ตั้งแต่การเขียนโค้ดพื้นฐานไปจนถึงเทคนิคขั้นสูง

การนำทางระหว่างหน้าจอ (Navigator)

บทที่ 9: การนำทางระหว่างหน้าจอ (Navigator)

🔖 หมวดบทเรียน: การจัดการการนำทางระหว่างหน้าจอในแอป

📌 เหมาะสำหรับ: ผู้เริ่มต้นที่ต้องการสร้างแอปที่มีหลายหน้า เช่น หน้าแรก หน้าโปรไฟล์ หน้ารายละเอียด

🎯 เป้าหมาย: เรียนรู้การใช้ Navigator.push และ Navigator.pop เพื่อเปลี่ยนหน้าในแอป Flutter

🧭 เกริ่นนำ

แอปส่วนใหญ่มีมากกว่าหน้าจอเดียว เช่น หน้าหลัก, หน้าเกี่ยวกับ, หน้ารายละเอียดสินค้า ฯลฯ Flutter มีระบบ Navigator สำหรับการจัดการเส้นทาง (route) และการย้ายไปยังหน้าใหม่แบบง่าย ๆ พร้อมความสามารถในการย้อนกลับ (back) ได้สะดวก

📌 การใช้ Navigator.push

1
2
3
4
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondPage()),
);

ใช้สำหรับไปยังหน้าจอใหม่ โดยสร้าง Route ใหม่ขึ้นมาและนำทางไปยังหน้านั้น

🔙 การใช้ Navigator.pop

1
Navigator.pop(context);

ใช้ย้อนกลับไปหน้าก่อนหน้า (เหมือนกด back)

🧪 ตัวอย่างเต็ม 2 หน้า

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
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 หรือชื่อไปยังหน้าใหม่ แล้วรับค่ากลับเมื่อปิดหน้านั้น