Ứng dụng Flutter chạy trên nhiều kích thước màn hình (điện thoại, tablet, web, desktop), nên xây dựng UI responsive (thích ứng với kích thước) và adaptive (thích ứng với nền tảng) là quan trọng. Flutter cung cấp các công cụ như MediaQuery, LayoutBuilder, và các widget linh hoạt cho việc này.
Responsive: thích ứng với kích thước màn hình
dart
// MediaQuery — lấy kích thước màn hình và thích ứng
final width = MediaQuery.of(context).size.width;
if (width > 600) {
// layout tablet/desktop (ví dụ cạnh nhau)
} else {
// layout điện thoại (ví dụ xếp chồng)
}
// LayoutBuilder — thích ứng dựa trên không gian khả dụng (ràng buộc của parent)
LayoutBuilder(builder: (context, constraints) {
if (constraints.maxWidth > 600) return WideLayout();
return NarrowLayout();
})