| Bố Cục Nâng Cao Trong Flutter Sử Dụng Stack, Positioned Và Card UI

Được viết bởi thanhdt vào ngày 01/06/2026 lúc 20:14 | 8 lượt xem

Trong thiết kế UI/UX hiện đại, chúng ta thường cần đè các lớp giao diện lên nhau (ví dụ: ảnh đại diện có nút tích xanh đè lên, hoặc nhãn giảm giá đè trên ảnh sản phẩm).

1. Stack Widget: Xếp chồng các lớp giao diện

Stack cho phép bạn xếp chồng nhiều Widget lên nhau theo thứ tự từ dưới lên trên (Widget khai báo sau sẽ đè lên Widget khai báo trước).

2. Positioned: Định vị tọa độ chính xác tuyệt đối

Nằm bên trong Stack, Widget Positioned giúp bạn căn chỉnh vị trí của Widget con cực kỳ chuẩn xác bằng các tham số: top, bottom, left, right.

3. Card và ListTile: Cặp bài trùng thiết kế danh sách

  • Card: Tạo khung chứa có bo góc nhẹ và bóng đổ (elevation) mang phong cách Material Design sang trọng.
  • ListTile: Widget chuẩn hóa để hiển thị thông tin hàng bao gồm: ảnh đại diện (leading), tiêu đề (title), mô tả (subtitle), và biểu tượng hành động ở cuối (trailing).