---
title: "Row & Column Cheat Sheet trong Flutter"
description: "Tìm hiểu về Row & Column Cheat Sheet trong Flutter."
canonical: "https://200lab.io/blog/flutter-row-column-cheat-sheet"
published: "2021-11-29T05:27:44Z"
updated: "2026-08-21T07:17:55Z"
authors: ["Chau Le"]
tags: ["Flutter"]
reading_minutes: 7
access: "public"
---

## 1. Row:

Row là một widget được sử dụng để hiển thị các child widget theo chiều ngang. Mặc định Row widget không thể scroll được. Nếu bạn có một dòng widget và muốn chúng có thể scroll nếu không đủ chỗ, hãy xem xét sử dụng ListView Class.

Nếu chúng ta muốn hiển thị ba widget trong một hàng, chúng ta có thể tạo một Row widget như dưới đây:

![](https://assets.200lab.io/images/2024/12/05/cc680361-5cbe-4fbe-9d65-d86c0bed0ae5-0e7a4ccd404b81e4d0ca.webp)

## 2. Column

Cột là một widget được sử dụng để hiển thị các child widget theo chiều dọc. Mặc định Column widget không scroll được. Nếu bạn có một cột widget và muốn chúng có thể scroll nếu chiều cao thiết bị không đủ, hãy xem xét sử dụng ListView.

Nếu chúng ta muốn hiển thị ba widget trong một cột, chúng ta có thể tạo một Column widget như bên dưới:

```
Row(
  children: [
    Container(
      color: Colors.orange,
      child: FlutterLogo(
        size: 60.0,
      ),
    ),
    Container(
      color: Colors.blue,
      child: FlutterLogo(
        size: 60.0,
      ),
    ),
    Container(
      color: Colors.purple,
      child: FlutterLogo(
        size: 60.0,
      ),
    ),
  ],
)
```

![](https://assets.200lab.io/images/2024/12/05/f5ac5d78-3363-46f6-a673-5ed86c1b9055-75b631d64002f402204b.webp)

**Column** và **Row** có cùng thuộc tính. Vì vậy, trong các ví dụ dưới đây, chúng ta đang làm việc cùng lúc với cả hai widget.

CrossAxis trong **Column** và **Row** là gì?

```
Column(
  children: [
    Container(
      color: Colors.orange,
      child: FlutterLogo(
        size: 60.0,
      ),
    ),
    Container(
      color: Colors.blue,
      child: FlutterLogo(
        size: 60.0,
      ),
    ),
    Container(
      color: Colors.purple,
      child: FlutterLogo(
        size: 60.0,
      ),
    ),
  ],
)
```

![](https://assets.200lab.io/images/2024/12/05/0defede2-22a0-474a-95b5-578dd7b641a7-e1f91419ce000de32589.webp)

## 3. CrossAxisAlignment Propery

Chúng ta có thể sử dụng crossAxisAlignment property để căn chỉnh child widget theo hướng mong muốn, ví dụ: crossAxisAlignment.start sẽ đặt các children với cạnh bắt đầu của chúng được căn chỉnh với cạnh bắt đầu của trục chéo.

```
Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Container(
      color: Colors.blue,
      height: 50.0,
      width: 50.0,
    ),
    Icon(Icons.adjust, size: 50.0, color: Colors.pink),
    Icon(Icons.adjust, size: 50.0, color: Colors.purple,),
    Icon(Icons.adjust, size: 50.0, color: Colors.greenAccent,),
    Container(
      color: Colors.orange,
      height: 50.0,
      width: 50.0,
    ),
    Icon(Icons.adjust, size: 50.0, color: Colors.cyan,),
  ],
);
```

![](https://assets.200lab.io/images/2024/12/05/ed217f97-8769-455a-b2ed-2f644a911823-0196eba8a1d6fe34b9f4.webp)

```
Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Container(
      color: Colors.blue,
      height: 50.0,
      width: 50.0,
    ),
    Icon(Icons.adjust, size: 50.0, color: Colors.pink),
    Icon(Icons.adjust, size: 50.0, color: Colors.purple,),
    Icon(Icons.adjust, size: 50.0, color: Colors.greenAccent,),
    Container(
      color: Colors.orange,
      height: 50.0,
      width: 50.0,
    ),
    Icon(Icons.adjust, size: 50.0, color: Colors.cyan,),
  ],
);
```

![](https://assets.200lab.io/images/2024/12/05/34653eab-abeb-421e-9823-c3637285d01a-4ef81ccdc5a57cf499af.webp)

**CrossAxisAlignment.center**

Đặt các children sao cho tâm của chúng thẳng hàng với giữa trục chéo (cross axis).

![](https://assets.200lab.io/images/2024/12/05/1a796892-7274-457d-b17b-e8e19007dd77-07366f8daf6d72c88e9d.webp)

**CrossAxisAlignment.end**

Đặt các children càng gần cuối trục chéo (cross axis) càng tốt.

![](https://assets.200lab.io/images/2024/12/05/ea1306df-9f73-4a08-b673-abe0dcf685f8-38f22813a3114f362ce4.webp)

**CrossAxisAlignment.stretch**

Yêu cầu children để fill ra full chiều dọc hoặc chiều ngang.

![](https://assets.200lab.io/images/2024/12/05/d847dc02-fb1a-4163-847f-5f45909447ce-269d825ba5cf7fdee8c2.webp)

**CrossAxisAlignment.baseline**

Đặt các children dọc theo trục chéo sao cho các baseline của chúng khớp với nhau.

Bạn nên sử dụng TextBaseline Class với CrossAxisAlignment.baseline.

```
Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text(
      'Flutter',
      style: TextStyle(
        color: Colors.yellow,
        fontSize: 30.0
      ),
    ),
    Text(
      'Flutter',
      style: TextStyle(
          color: Colors.blue,
          fontSize: 20.0
      ),
    ),
  ],
);
```

![Without baselines](https://assets.200lab.io/images/2024/12/05/27cc767c-90fc-4723-b489-60f21c6fc531-b5bb9ed77e18a1decb86.webp)

```
Row(
  crossAxisAlignment: CrossAxisAlignment.baseline,
  textBaseline: TextBaseline.alphabetic,
  children: [
    Text(
      'Flutter',
      style: TextStyle(
        color: Colors.yellow,
        fontSize: 30.0
      ),
    ),
    Text(
      'Flutter',
      style: TextStyle(
          color: Colors.blue,
          fontSize: 20.0
      ),
    ),
  ],
);
```

![With baselines](https://assets.200lab.io/images/2024/12/05/b652b226-5630-4dbf-9689-e5dfaeeeeeef-f91cd94922e089abbe08.webp)

## 4. TextDirection Propery

Xác định thứ tự sắp xếp children theo chiều ngang và cách diễn giải`start`và`end`theo chiều ngang.

```
Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  textDirection: TextDirection.rtl,
  children: [
    Text(
      'Flutter',
      style: TextStyle(
        color: Colors.yellow,
        fontSize: 30.0
      ),
    ),
    Text(
      'Flutter',
      style: TextStyle(
          color: Colors.blue,
          fontSize: 20.0
      ),
    ),
  ],
);
```

![](https://assets.200lab.io/images/2024/12/05/a8f8a34e-90bd-4278-b56f-3d8865889b3c-2680c3369bc7cbcf4672.webp)

```
Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  textDirection: TextDirection.ltr,
  children: [
    Text(
      'Flutter',
      style: TextStyle(
        color: Colors.yellow,
        fontSize: 30.0
      ),
    ),
    Text(
      'Flutter',
      style: TextStyle(
          color: Colors.blue,
          fontSize: 20.0
      ),
    ),
  ],
);
```

![](https://assets.200lab.io/images/2024/12/05/9ef1acf4-898f-4aeb-865c-020361a3aa04-db9ae6c2b9f23d1a1838.webp)

```
Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  textDirection: TextDirection.ltr,
  children: [
    Text(
      'Flutter',
      style: TextStyle(
        color: Colors.yellow,
        fontSize: 30.0
      ),
    ),
    Text(
      'Flutter',
      style: TextStyle(
          color: Colors.blue,
          fontSize: 20.0
      ),
    ),
  ],
);
```

![](https://assets.200lab.io/images/2024/12/05/f075883a-9095-4b74-8c99-20324174e8db-1e0a413543ce90c1c876.webp)

```
Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  textDirection: TextDirection.rtl,
  children: [
    Text(
      'Flutter',
      style: TextStyle(
        color: Colors.yellow,
        fontSize: 30.0
      ),
    ),
    Text(
      'Flutter',
      style: TextStyle(
          color: Colors.blue,
          fontSize: 20.0
      ),
    ),
  ],
);
```

![](https://assets.200lab.io/images/2024/12/05/614affbd-8520-42d9-a53b-e2d2d75a07cc-c806aaf7640ff712a6f9.webp)

# 5. VerticalDirection Propery

Xác định thứ tự sắp xếp children theo chiều dọc và cách diễn giải `start`và`end`theo chiều dọc.

Mặc định là Vertical Direction.down.

```
Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  verticalDirection: VerticalDirection.down,
  children: [
    Text(
      'Flutter',
      style: TextStyle(
        color: Colors.yellow,
        fontSize: 30.0
      ),
    ),
    Text(
      'Flutter',
      style: TextStyle(
          color: Colors.blue,
          fontSize: 20.0
      ),
    ),
  ],
);
```

![](https://assets.200lab.io/images/2024/12/05/27cc767c-90fc-4723-b489-60f21c6fc531-b5bb9ed77e18a1decb86.webp)

```
Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  verticalDirection: VerticalDirection.up,
  children: [
    Text(
      'Flutter',
      style: TextStyle(
        color: Colors.yellow,
        fontSize: 30.0
      ),
    ),
    Text(
      'Flutter',
      style: TextStyle(
          color: Colors.blue,
          fontSize: 20.0
      ),
    ),
  ],
);
```

![](https://assets.200lab.io/images/2024/12/05/8b7cd3d9-52e1-4100-9485-830182e3c811-6ac7703c6b26beda6ef7.webp)

MainAxis trong Row và Column là gì?

![](https://assets.200lab.io/images/2024/12/05/7acf916d-9fc9-4f5f-a4c4-6cc20e813c3e-08e827abc769f5e2c1c8.webp)

# 6. MainAxisAlignment Propery

Vị trí của các child widget trên trục chính.

**MainAxisAlignment.start**

Đặt các children càng gần đầu trục chính càng tốt.

![](https://assets.200lab.io/images/2024/12/05/bba44222-08eb-4423-a822-480627318a76-b52cce79c7c07cb93415.webp)

**MainAxisAlignment.center**

Đặt các children càng gần giữa trục chính càng tốt.

![](https://assets.200lab.io/images/2024/12/05/6c356879-7476-4632-ad8d-e5e3df635b62-2b9838949a1146962c88.webp)

**MainAxisAlignment.end**

Đặt các children càng gần cuối trục chính càng tốt.

![](https://assets.200lab.io/images/2024/12/05/ad1113b4-0769-4dc3-ade4-cab11f6e5676-b4c623fe7c779f2dc2d0.webp)

**MainAxisAlignment.spaceAround**

Đặt đều không gian trống giữa các children cũng như một nửa không gian đó trước và sau children đầu tiên và children cuối cùng.

![](https://assets.200lab.io/images/2024/12/05/9e147b85-da67-4ba9-8a26-5993f53768aa-62982eb2741211d449ce.webp)

**MainAxisAlignment.spaceBetween**

Đặt không gian trống giữa các children cách đều nhau.

![](https://assets.200lab.io/images/2024/12/05/fea7988d-2e67-4265-9845-d7d54c0a01dd-19f2900c46dbfa9ee84e.webp)

**MainAxisAlignment.spaceEvenly**

Đặt không gian trống đồng đều giữa các children cũng như trước và sau children đầu tiên và children cuối cùng.

![](https://assets.200lab.io/images/2024/12/05/f66c04d2-97c1-4098-8aa7-a10768917314-77fa56176cecc6df7694.webp)

# 7. MainAxisSize Propery

Kích thước sẽ được phân bổ cho widget trên trục chính.

**MainAxisSize.max**

Tối đa hóa lượng không gian trống dọc theo trục chính, tùy thuộc vào các hạn chế về incoming layout.

```
Center(
  child: Container(
    color: Colors.yellow,
    child: Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          color: Colors.blue,
          height: 50.0,
          width: 50.0,
        ),
        Icon(Icons.adjust, size: 50.0, color: Colors.pink),
        Icon(Icons.adjust, size: 50.0, color: Colors.purple,),
        Icon(Icons.adjust, size: 50.0, color: Colors.greenAccent,),
        Container(
          color: Colors.orange,
          height: 50.0,
          width: 50.0,
        ),
        Icon(Icons.adjust, size: 50.0, color: Colors.cyan,),
      ],
    ),
  ),
);
```

![](https://assets.200lab.io/images/2024/12/05/d5508b3d-7594-4da3-ae1f-95d3feb8fbb1-4b5b04e06888dad1e4b4.webp)

```
Center(
  child: Container(
    color: Colors.yellow,
    child: Column(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          color: Colors.blue,
          height: 50.0,
          width: 50.0,
        ),
        Icon(Icons.adjust, size: 50.0, color: Colors.pink),
        Icon(Icons.adjust, size: 50.0, color: Colors.purple,),
        Icon(Icons.adjust, size: 50.0, color: Colors.greenAccent,),
        Container(
          color: Colors.orange,
          height: 50.0,
          width: 50.0,
        ),
        Icon(Icons.adjust, size: 50.0, color: Colors.cyan,),
      ],
    ),
  ),
);
```

![](https://assets.200lab.io/images/2024/12/05/7c17d22a-ef49-46ec-ae36-b01d5fab594c-f5b751850b841d7ed4af.webp)

**MainAxisSize.min**

Giảm thiểu dung lượng trống dọc theo trục chính, tùy thuộc vào các ràng buộc về incoming layout.

```
Center(
  child: Container(
    color: Colors.yellow,
    child: Row(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          color: Colors.blue,
          height: 50.0,
          width: 50.0,
        ),
        Icon(Icons.adjust, size: 50.0, color: Colors.pink),
        Icon(Icons.adjust, size: 50.0, color: Colors.purple,),
        Icon(Icons.adjust, size: 50.0, color: Colors.greenAccent,),
        Container(
          color: Colors.orange,
          height: 50.0,
          width: 50.0,
        ),
        Icon(Icons.adjust, size: 50.0, color: Colors.cyan,),
      ],
    ),
  ),
);
```

![](https://assets.200lab.io/images/2024/12/05/a6f33e1b-9964-4a09-9c3e-0f55ee8bd1ca-eb23a13f08a2168cedc7.webp)

```
Center(
  child: Container(
    color: Colors.yellow,
    child: Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          color: Colors.blue,
          height: 50.0,
          width: 50.0,
        ),
        Icon(Icons.adjust, size: 50.0, color: Colors.pink),
        Icon(Icons.adjust, size: 50.0, color: Colors.purple,),
        Icon(Icons.adjust, size: 50.0, color: Colors.greenAccent,),
        Container(
          color: Colors.orange,
          height: 50.0,
          width: 50.0,
        ),
        Icon(Icons.adjust, size: 50.0, color: Colors.cyan,),
      ],
    ),
  ),
);
```

![](https://assets.200lab.io/images/2024/12/05/26826cdb-b446-4c66-aeb7-56f03fb03829-9fd65045d5bc00dfd327.webp)

Hi vọng bạn thích bài viết này.

Bài viết được lược dịch từ [Julien Louage](<https://medium.com/jlouage/flutter-row-column-cheat-sheet-78c38d242041>).