แอป Flutter ทำงานบนหน้าจอหลายขนาด (โทรศัพท์ แท็บเล็ต เว็บ เดสก์ท็อป) ดังนั้นการสร้าง UI ที่เป็น responsive (ปรับตามขนาด) และ adaptive (ปรับตามแพลตฟอร์ม) จึงเป็นเรื่องสำคัญ Flutter มีเครื่องมืออย่าง MediaQuery, LayoutBuilder และ widget แบบยืดหยุ่นไว้สำหรับงานนี้
Responsive: ปรับตามขนาดหน้าจอ
// MediaQuery — get screen dimensions and adapt
final width = MediaQuery.of(context).size.width;
if (width > 600) {
// tablet/desktop layout (e.g. side-by-side)
} else {
// phone layout (e.g. stacked)
}
// LayoutBuilder — adapt based on the available space (parent constraints)
LayoutBuilder(builder: (context, constraints) {
if (constraints.maxWidth > 600) return WideLayout();
return NarrowLayout();
})
