---
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>).

## Đọc thêm

- [Tự học Dart: Các Dart Operators (toán tử) bạn cần biết](https://200lab.io/blog/tu-hoc-ngon-ngu-dart-toan-tu-operator.md): Cập nhật nhanh các toán tử - operator quan trọng trong Dart để có thể sử dụng ngôn ngữ này một cách hiệu quả nhất nhé.
- [Flutter cơ bản: Điều cần biết khi lập trình ứng dụng đầu tiên](https://200lab.io/blog/flutter-co-ban-xay-dung-ung-dung-dau-tien.md): Flutter là framework hữu ích khi phát triển ứng dụng đa nền tảng. Hãy bỏ túi các kiến thức Flutter cơ bản để bắt đầu hành trình học hỏi của bạn.
- [Dart là gì? Giới thiệu cơ bản về ngôn ngữ lập trình Dart](https://200lab.io/blog/tu-hoc-ngon-dart-nhung-dieu-can-biet-truoc-khi-bat-dau.md): Dart là gì? Vì sao bạn cần học ngôn ngữ lập trình Dart để phát triển ứng dụng đa nền tảng? Cùng tìm hiểu những kiến thức cơ bản về Dart trong bài viết này nhé!
- [Flutter là gì? Vì sao nên học công cụ lập trình Flutter?](https://200lab.io/blog/flutter-la-gi.md): Flutter là gì? Vì sao bạn cần học lập trình Flutter để phát triển ứng dụng đa nền tảng? Cùng tìm câu trả lời qua bài viết này nhé!
- [Flutter cơ bản: Widget Tree, Element Tree & Render Tree](https://200lab.io/blog/flutter-co-ban-widget-tree-element-tree-render-tree.md): Flutter cơ bản đến nâng cao không khó. Để 200Lab Blog cập nhật cho bạn những thông tin mới nhất về Widget Tree, Element Tree và Render Tree nhé.
- [Mọi bài viết chủ đề Flutter](https://200lab.io/blog/tags/flutter.md)

Toàn bộ nội dung: https://200lab.io/llms.txt