Layout hoạt động như thế nào trong Flutter?

Question

Accepted Answer

Flutter xây dựng layout bằng cách **kết hợp các widget layout** — như **Row**, **Column**, **Container**, **Stack**, và những widget khác — để sắp xếp các child của chúng. Hiểu các widget layout này và cách chúng kết hợp là nền tảng để tạo cấu trúc UI.

## Các widget layout cốt lõi

```text
ROW → sắp xếp các child theo CHIỀU NGANG (trái sang phải)
COLUMN → sắp xếp các child theo CHIỀU DỌC (trên xuống dưới)
CONTAINER → một hộp: padding, margin, kích thước, màu, decoration, căn chỉnh (rất phổ biến)
STACK → xếp chồng các child lên nhau (trục z, định vị)
PADDING → thêm khoảng cách quanh một child
CENTER → căn giữa một child
EXPANDED / FLEXIBLE → làm các child lấp đầy không gian khả dụng (trong Row/Column)
SizedBox → hộp kích thước cố định / khoảng cách
ListView → danh sách cuộn được của các child
```

## Kết hợp một layout

```dart
Column(                          // sắp xếp theo chiều dọc
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('Title'),
    SizedBox(height: 8),         // khoảng cách
    Row(                         // sắp xếp theo chiều ngang
      children: [
        Icon(Icons.star),
        Expanded(                // chiếm không gian ngang còn lại
          child: Text('Description'),
        ),
      ],
    ),
    Container(                   // một hộp có style
      padding: EdgeInsets.all(16),
      color: Colors.blue,
      child: Text('Boxed'),
    ),
  ],
)
```

## Layout linh hoạt (trục chính và trục phụ của Row/Column)

```text
→ Trục CHÍNH (Row=ngang, Column=dọc): mainAxisAlignment định vị các child
  dọc theo nó (start, center, end, spaceBetween, v.v.)
→ Trục PHỤ (vuông góc): crossAxisAlignment
→ EXPANDED/FLEXIBLE → các child chia sẻ không gian khả dụng theo tỉ lệ (layout responsive)
→ Kết hợp những thứ này để có UI linh hoạt, responsive.
```

## Tại sao điều này quan trọng

Hiểu cách layout hoạt động trong Flutter là nền tảng vì **sắp xếp các phần tử UI là thiết yếu để xây dựng bất kỳ giao diện nào**, nên đây là kiến thức thực hành bắt buộc phải biết cho phát triển Flutter.

Flutter xây dựng layout bằng cách **kết hợp các widget layout** — và hiểu các **widget layout cốt lõi** (Row cho sắp xếp ngang, Column cho dọc, Container cho hộp có style với padding/margin/decoration, Stack cho xếp chồng, Padding và Center cho định vị, Expanded/Flexible cho lấp đầy không gian, ListView cho danh sách cuộn) là cần thiết để xây dựng bất kỳ cấu trúc UI nào.

Các widget này được dùng liên tục trong mọi ứng dụng Flutter.

Hiểu cách **kết hợp chúng** (lồng row, column, container, và những widget khác để xây dựng layout phức tạp từ các mảnh đơn giản) là thực hành cơ bản của việc xây dựng UI Flutter — cùng nguyên lý composition làm nền cho toàn bộ Flutter, áp dụng vào layout.

Hiểu **mô hình layout linh hoạt** — **trục chính và trục phụ** của Row và Column (mainAxisAlignment và crossAxisAlignment để định vị các child) và **Expanded/Flexible** để chia sẻ không gian khả dụng theo tỉ lệ (cho phép layout responsive thích ứng với các kích thước màn hình khác nhau) — là quan trọng để tạo layout đẹp trên nhiều thiết bị, một mối quan tâm then chốt với ứng dụng mobile.

Vì xây dựng bất kỳ giao diện Flutter nào đều cần sắp xếp các phần tử bằng widget layout, và vì hiểu các widget layout cốt lõi, cách kết hợp chúng, và mô hình layout linh hoạt/responsive là thiết yếu để xây dựng UI, hiểu cách layout hoạt động trong Flutter là kiến thức thực hành nền tảng thiết yếu — một kỹ năng cốt lõi dùng trong mọi màn hình Flutter, cần thiết để chuyển thiết kế thành giao diện responsive hoạt động được, và là nền tảng cho công việc Flutter hàng ngày.