Responsive Design

การปรับ UI ให้เหมาะกับขนาดหน้าจอและ platform ต่างๆ ใน Flutter

Responsive vs Adaptive

	Responsive	Adaptive
ปรับตาม	ขนาดจอ (width, height)	Platform (iOS, Android)
ตัวอย่าง	มือถือ = Column, tablet = Row	iOS ใช้ Cupertino, Android ใช้ Material
เครื่องมือ	MediaQuery, LayoutBuilder	Platform.isIOS, Platform.isAndroid

MediaQuery — รู้ขนาดจอ

final width = MediaQuery.of(context).size.width;
final height = MediaQuery.of(context).size.height;
 
// เปลี่ยน layout ตามขนาดจอ
if (width < 600) {
  return Column(children: [chart, expensesList]);     // มือถือแนวตั้ง
} else {
  return Row(children: [
    Expanded(child: chart),
    Expanded(child: expensesList),
  ]);  // แนวนอน/tablet
}

ข้อควรระวัง: MediaQuery.of(context) วัดจากขนาดจอทั้งหมด ไม่ใช่พื้นที่ที่ widget ใช้ได้จริง

LayoutBuilder — รู้ constraints ของ parent

LayoutBuilder(builder: (ctx, constraints) {
  if (constraints.maxWidth >= 600) {
    return wideLayout;    // tablet/landscape
  }
  return narrowLayout;    // phone/portrait
});

ใช้ LayoutBuilder แทน MediaQuery เมื่อ: widget อยู่ใน container ที่มีขนาดจำกัด (เช่นอยู่ใน Column ที่แบ่งครึ่ง) — LayoutBuilder บอกพื้นที่จริงที่ได้

Adaptive — ปรับตาม Platform

import 'dart:io';
 
if (Platform.isIOS) {
  return CupertinoAlertDialog(...);   // iOS style
}
return AlertDialog(...);              // Material (Android) style

SafeArea — หลีก notch/status bar

SafeArea(
  child: myWidget,  // ไม่ถูก notch/status bar/home bar บัง
)

Breakpoints ที่แนะนำ

ขนาด	Device
< 600px	Phone (portrait)
600-900px	Phone (landscape) / Small tablet
> 900px	Tablet / Desktop

Key Points

• MediaQuery = ขนาดจอทั้งหมด / LayoutBuilder = พื้นที่ที่ widget ได้จริง
• Responsive (ขนาดจอ) กับ Adaptive (platform) เป็นคนละเรื่อง
• SafeArea ควรใช้เสมอเพื่อหลีก notch และ system UI
• ใช้ Expanded ใน Row/Column เพื่อแบ่งพื้นที่แบบยืดหยุ่น

Related

• Flutter — framework ที่รองรับ responsive/adaptive
• Widgets — LayoutBuilder, MediaQuery, SafeArea, Expanded