FlutterMediaQuery cung cấp thông tin về môi trường hiển thị hiện tại: kích thước màn hình (size), hướng xoay (orientation), tỉ lệ pixel (devicePixelRatio), padding an toàn (notch, thanh trạng thái qua padding/viewPadding), độ phóng chữ (textScaler).
Đây là nguồn dữ liệu để bố cục tự thích ứng theo thiết bị.
final width = MediaQuery.sizeOf(context).width;
return width >= 600
? const TwoColumnLayout() // tablet
: const SingleColumnLayout(); // phonePhân biệt hai khái niệm hay bị nhập nhằng:
- Responsive: cùng một bố cục co giãn/sắp lại theo không gian sẵn có (đổi số cột, đổi kích thước).
- Adaptive: chọn thành phần/hành vi khác nhau theo nền tảng hay loại thiết bị (menu kiểu iOS vs Android, chuột vs cảm ứng).
Vài lưu ý thực hành:
- Dùng MediaQuery.sizeOf(context) (thay vì MediaQuery.of(context).size) để chỉ phụ thuộc đúng thuộc tính cần, tránh rebuild thừa.
- Khi chỉ cần biết không gian cha cấp cho (không phải cả màn hình), cân nhắc LayoutBuilder với constraints — thường đúng hơn cho widget lồng nhau.
- Tôn trọng padding/safe area để nội dung không bị notch che.