Dev to webs {Coding…}

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

บทที่ 10: การรับค่าและส่งค่าระหว่างหน้า

🔖 หมวดบทเรียน: การส่งข้อมูลระหว่างหน้าจอในแอป 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 เพื่อรับข้อมูลจากผู้ใช้