Hướng dẫn cách sử dụng LayoutBuilder và MediaQuery để làm UI responsive

Trong thời đại đa thiết bị, việc tạo giao diện responsive là điều bắt buộc. Flutter cung cấp LayoutBuilder và MediaQuery để giúp bạn tạo UI tự động thích ứng với mọi kích thước màn hình.

Tại sao cần Responsive UI?

• 📱 Đa thiết bị: Smartphone, tablet, desktop
• 📐 Kích thước khác nhau: Từ 320px đến 4K
• 🔄 Orientation: Portrait và Landscape
• 💻 Platform: Android, iOS, Web, Desktop

MediaQuery - Lấy thông tin màn hình

MediaQuery cho phép bạn truy cập thông tin về kích thước và cấu hình màn hình.

Cách sử dụng cơ bản:

[object Object]

Các thuộc tính quan trọng của MediaQuery:

[object Object]

LayoutBuilder - Responsive theo constraints

LayoutBuilder cung cấp constraints của parent widget, cho phép bạn build UI dựa trên không gian có sẵn.

Cách sử dụng:

[object Object]

So sánh MediaQuery vs LayoutBuilder

Tiêu chí	MediaQuery	LayoutBuilder
Dữ liệu	Kích thước màn hình	Constraints của parent
Khi nào dùng	Cần biết kích thước màn hình	Cần biết không gian có sẵn
Responsive	Theo màn hình	Theo container
Use case	Breakpoints toàn màn hình	Responsive trong widget

Breakpoints phổ biến

Định nghĩa breakpoints để dễ quản lý:

[object Object]

Ví dụ thực tế

1. Responsive Grid Layout

[object Object]

2. Responsive Navigation

[object Object]

3. Responsive Text Size

[object Object]

4. Responsive Padding và Spacing

[object Object]

5. Responsive Image Aspect Ratio

[object Object]

Tạo Responsive Helper Class

Tạo một helper class để dễ sử dụng:

[object Object]

Xử lý Orientation Changes

[object Object]

Safe Area - Xử lý notch và status bar

[object Object]

Best Practices

1. Sử dụng LayoutBuilder cho container-based responsive

[object Object]

2. Sử dụng MediaQuery cho screen-based responsive

[object Object]

3. Tạo breakpoints constants

[object Object]

4. Tránh hardcode values

[object Object]

5. Test trên nhiều kích thước

[object Object]

Ví dụ hoàn chỉnh: Responsive Dashboard

[object Object]

Kết luận

Tóm tắt:

• MediaQuery: Lấy thông tin màn hình, dùng cho screen-based responsive
• LayoutBuilder: Lấy constraints của parent, dùng cho container-based responsive
• Breakpoints: Định nghĩa các điểm chuyển đổi layout
• Safe Area: Xử lý notch và status bar

Best Practices:

1. ✅ Sử dụng LayoutBuilder cho responsive trong widget
2. ✅ Sử dụng MediaQuery cho responsive theo màn hình
3. ✅ Định nghĩa breakpoints constants
4. ✅ Test trên nhiều kích thước màn hình
5. ✅ Xử lý cả portrait và landscape

Tạo UI responsive giúp ứng dụng của bạn trải nghiệm tốt trên mọi thiết bị! 📱💻

---

Tác giả: Admin
Ngày đăng: 24/01/2025
Chuyên mục: Flutter