🔖 หมวดบทเรียน: การส่งข้อมูลระหว่างหน้าจอในแอป Flutter
📌 เหมาะสำหรับ: ผู้ที่ต้องการส่งค่าจากหน้า A ไปหน้า B หรือรับค่ากลับมาเมื่อปิดหน้า
🎯 เป้าหมาย: เรียนรู้วิธีส่งข้อมูลผ่าน constructor และใช้
Navigator.pop()
คืนค่ากลับไปยังหน้าเดิม
🧭 เกริ่นนำ
แอปจำนวนมากต้องการส่งข้อมูลระหว่างหน้า เช่น กดที่รายการสินค้าในหน้าแรก แล้วส่ง ID ไปยังหน้ารายละเอียด หรือเมื่อผู้ใช้กรอกแบบฟอร์มและกดยืนยัน หน้าใหม่สามารถส่งค่ากลับมายังหน้าหลักได้ Flutter มีวิธีที่ง่ายและชัดเจนในการส่ง/รับค่าระหว่างหน้า
📥 ส่งค่าผ่าน constructor
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailPage(productId: 123),
),
);
หน้าใหม่รับค่าผ่าน constructor:
class DetailPage extends StatelessWidget {
final int productId;
DetailPage({required this.productId});
@override
Widget build(BuildContext context) {
return Text("ID ที่รับมา: \$productId");
}
}
📤 รับค่ากลับจากหน้าใหม่
final result = await Navigator.push(
context,
MaterialPageRoute(builder: (context) => InputPage()),
);
print("ค่าที่ได้กลับมา: \$result");
ในหน้าใหม่ ใช้ Navigator.pop
ส่งค่ากลับ:
Navigator.pop(context, "ข้อมูลจากหน้าใหม่");
🧪 ตัวอย่างรวม
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: HomePage());
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("หน้าหลัก")),
body: Center(
child: ElevatedButton(
child: Text("กรอกข้อมูล"),
onPressed: () async {
final result = await Navigator.push(
context,
MaterialPageRoute(builder: (context) => InputPage()),
);
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text("ผลลัพธ์: \$result")));
},
),
),
);
}
}
class InputPage extends StatelessWidget {
final controller = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("หน้ากรอกข้อมูล")),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
TextField(controller: controller),
SizedBox(height: 10),
ElevatedButton(
child: Text("ส่งกลับ"),
onPressed: () {
Navigator.pop(context, controller.text);
},
),
],
),
),
);
}
}
✅ สรุป
- ใช้ constructor เพื่อส่งค่าจากหน้า A → B
- ใช้
Navigator.pop(context, value)
เพื่อส่งค่ากลับจากหน้า B → A - ใช้
await Navigator.push(...)
เพื่อรอผลลัพธ์จากหน้าใหม่
ในบทถัดไป เราจะเรียนรู้การจัดการฟอร์มและการใช้งาน TextField
เพื่อรับข้อมูลจากผู้ใช้