async, Future, และ Stream ทำงานอย่างไรใน Flutter?

Question

Accepted Answer

แอป Flutter จัดการ **operation แบบ asynchronous** อยู่ตลอดเวลา (network request การเข้าถึงไฟล์ การ query ฐานข้อมูล) **Future** ของ Dart (ผลลัพธ์ async เดี่ยว) และ **Stream** (ลำดับเหตุการณ์ async) ร่วมกับ **async/await** และ widget อย่าง **FutureBuilder**/**StreamBuilder** เป็นสิ่งจำเป็นสำหรับ UI แบบ async ## Future และ async/await ```dart // a Future represents a single async result that completes later Future fetchUser() async { final response = await http.get(url); // await pauses until the Future completes return response.body; // returns the result } // using it final data = await fetchUser(); // await the result // or: fetchUser().then((data) => ...); // callback style ``` `Future` = ค่าเดี่ยวที่พร้อมใช้งานในภายหลัง (network response การอ่านไฟล์) `async`/`await` ทำให้โค้ด async อ่านได้แบบลำดับ ## FutureBuilder — สร้าง UI จาก Future ```dart // FutureBuilder rebuilds the UI based on the Future's state (loading/data/error) FutureBuilder( future: fetchUser(), builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.waiting) { return CircularProgressIndicator(); // loading } else if (snapshot.hasError) { return Text('Error: ${snapshot.error}'); // error } else { return Text(snapshot.data!); // got the data } }, ) ``` ## Stream และ StreamBuilder ```dart // a Stream = a SEQUENCE of async events over time (e.g. live data, websocket, sensor) Stream counter() async* { for (int i = 0; i < 10; i++) { await Future.delayed(Duration(seconds: 1)); yield i; // emit each value } } // StreamBuilder rebuilds the UI as new events arrive StreamBuilder(stream: counter(), builder: (context, snapshot) => Text('${snapshot.data}')) ``` ## ทำไมจึงสำคัญ การเข้าใจ async, Future และ Stream เป็นสิ่งจำเป็นเพราะ **แอป Flutter จัดการ operation แบบ asynchronous อยู่ตลอดเวลา** ดังนั้นการจัดการพวกมันอย่างถูกต้องจึงเป็นพื้นฐานในการสร้างแอปจริง แทบทุกแอปทำงาน async — network request การเข้าถึงไฟล์ การ query ฐานข้อมูล ข้อมูลเรียลไทม์ — และ async primitive ของ Dart คือวิธีที่คุณจัดการมัน การเข้าใจ **Future** (ที่แทนผลลัพธ์ async เดี่ยวที่พร้อมใช้งานในภายหลัง เช่น network response) ร่วมกับ **async/await** (ที่ทำให้โค้ด async อ่านได้แบบลำดับและสะอาด) เป็นสิ่งจำเป็นต่อการทำ operation แบบ async การเข้าใจ **FutureBuilder** สำคัญเป็นพิเศษสำหรับ UI: มันสร้าง UI ตาม state ของ Future โดยจัดการ **state แบบ loading, error และ data** อย่างเหมาะสม — ซึ่งเป็นสิ่งที่แอปจริงต้องการพอดี (แสดง spinner ระหว่างโหลด ข้อความ error เมื่อล้มเหลว และข้อมูลเมื่อสำเร็จ) เป็นรูปแบบที่พบบ่อยและจำเป็นสำหรับ UI แบบ async การเข้าใจ **Stream** (ลำดับเหตุการณ์ async ตามเวลา เช่น ข้อมูลสด websocket หรือการอ่านค่าเซ็นเซอร์) และ **StreamBuilder** (ที่ rebuild UI เมื่อเหตุการณ์ใหม่มาถึง) เป็นสิ่งจำเป็นสำหรับ UI แบบ reactive และเรียลไทม์ และสำหรับแนวทาง state management ที่สร้างบน stream การจัดการ async อย่างถูกต้อง — รวมถึง state แบบ loading/error/data ที่ FutureBuilder และ StreamBuilder จัดการ — เป็นพื้นฐานในการสร้างแอปที่ดึงและแสดงข้อมูลอย่างเหมาะสม (หัวใจของแอปส่วนใหญ่) เนื่องจากแอป Flutter ทำ operation แบบ asynchronous อยู่ตลอดเวลา (network ไฟล์ ข้อมูลเรียลไทม์) และการแสดงผลลัพธ์ของพวกมันต้องอาศัยการจัดการ state แบบ async อย่างถูกต้อง และเนื่องจาก Future, Stream, async/await และ Builder widget เป็นเครื่องมือสำคัญสำหรับสิ่งนี้ การเข้าใจ async, Future และ Stream ใน Flutter จึงเป็นความรู้ที่จำเป็นและถูกนำมาใช้บ่อย — พื้นฐานสำหรับการสร้างแอปที่จัดการข้อมูลและ operation แบบ async อย่างถูกต้อง ทักษะหลักที่จำเป็นในแทบทุกแอป Flutter จริงที่ดึงหรือประมวลผลข้อมูล