แอป Flutter จัดการ operation แบบ asynchronous อยู่ตลอดเวลา (network request การเข้าถึงไฟล์ การ query ฐานข้อมูล) Future ของ Dart (ผลลัพธ์ async เดี่ยว) และ Stream (ลำดับเหตุการณ์ async) ร่วมกับ async/await และ widget อย่าง FutureBuilder/StreamBuilder เป็นสิ่งจำเป็นสำหรับ UI แบบ async
// a Future represents a single async result that completes later
Future<String> 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 rebuilds the UI based on the Future's state (loading/data/error)
FutureBuilder<String>(
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
}
},
)
// a Stream = a SEQUENCE of async events over time (e.g. live data, websocket, sensor)
Stream<int> 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<int>(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 จริงที่ดึงหรือประมวลผลข้อมูล
คลังคำถามสัมภาษณ์งาน IT พร้อมคำตอบโดยละเอียด — ตั้งแต่ระดับ Junior ถึง Senior
บริจาค