Cách dùng Column, Row, Stack và Flex trong Flutter (kèm ví dụ)
Tóm tắt nhanh
Hướng dẫn chi tiết cách sử dụng các layout widgets cơ bản trong Flutter: Column, Row, Stack và Flex với ví dụ thực tế.
Mục lục bài viết (34)
- Column Widget
- 1. Column cơ bản
- 2. Column với alignment
- 3. Column với spacing
- 4. Column với Expanded
- Row Widget
- 1. Row cơ bản
- 2. Row với alignment
- 3. Row với spacing
- 4. Row với Expanded
- Stack Widget
- 1. Stack cơ bản
- 2. Stack với Positioned
- 3. Stack với Alignment
- Flex Widget
- 1. Flex cơ bản
- 2. Flex với flex values
- Ví dụ thực tế
- 1. Profile Card
- 2. Product Card
- Best Practices
- 1. Sử dụng SizedBox cho spacing
- 2. Tránh overflow
- 3. Sử dụng MainAxisSize
- Bốn widget này giải quyết bốn bài toán khác nhau
- Ba lỗi bố cục gần như ai cũng gặp
- Khi nào nên tách thành widget riêng
- Câu hỏi thường gặp
- Expanded và Flexible khác nhau thế nào?
- Làm sao đặt khoảng cách giữa các con mà không thêm SizedBox ở mọi chỗ?
- Khi nào dùng Wrap thay Row?
- Kết luận
- Tóm tắt:
- Học Flutter bài bản theo lộ trình
Column, Row, Stack và Flex là các layout widgets cơ bản nhất trong Flutter. Bài viết này sẽ hướng dẫn bạn sử dụng chúng.
Column Widget
1. Column cơ bản
[object Object]2. Column với alignment
[object Object]3. Column với spacing
[object Object]4. Column với Expanded
[object Object]Row Widget
1. Row cơ bản
[object Object]2. Row với alignment
[object Object]3. Row với spacing
[object Object]4. Row với Expanded
[object Object]Stack Widget
1. Stack cơ bản
[object Object]2. Stack với Positioned
[object Object]3. Stack với Alignment
[object Object]Flex Widget
1. Flex cơ bản
[object Object]2. Flex với flex values
[object Object]Ví dụ thực tế
1. Profile Card
[object Object]2. Product Card
[object Object]Best Practices
1. Sử dụng SizedBox cho spacing
[object Object]2. Tránh overflow
[object Object]3. Sử dụng MainAxisSize
[object Object]Bốn widget này giải quyết bốn bài toán khác nhau
Nhìn bảng tham số thì Column, Row, Stack và Flex trông giống nhau, nhưng chúng trả lời bốn câu hỏi khác nhau:
Column— xếp con theo chiều dọc, dùng khi bố cục từ trên xuống: tiêu đề, nội dung, nút bấm.Row— xếp con theo chiều ngang, dùng khi các phần tử ngang hàng: ảnh cạnh thông tin, nút cạnh nút.Stack— xếp chồng theo lớp, dùng khi cần chồng: huy hiệu trên icon, ảnh nền kèm chữ, lớp phủ mờ.Flex— chính làRow/Columnở dạng tổng quát, cho phép chọn hướng bằng tham số. Dùng khi bạn cần một thành phần tự đổi hướng theo màn hình.
Với hầu hết trường hợp, hãy dùng Row/Column vì tên gọi nói rõ ý định, giúp người đọc code hiểu ngay. Flex chỉ nên dùng khi hướng thật sự thay đổi theo dữ liệu hoặc kích thước màn hình.
Ba lỗi bố cục gần như ai cũng gặp
1. Tràn khung khi chữ quá dài. Nguyên nhân thường là Text không có maxLines bên trong Row. Cách sửa đúng là bọc chữ trong Expanded hoặc Flexible để nó co lại thay vì đẩy các phần tử khác ra ngoài:
[object Object]2. Column cuộn được bên trong Column. Lỗi "unbounded height" xuất hiện khi bạn đặt danh sách cuộn trong cột không giới hạn chiều cao. Hãy bọc danh sách trong Expanded, hoặc chuyển cả trang sang CustomScrollView.
3. Dùng Stack mà không quản lý kích thước. Stack co theo con lớn nhất của nó, nên nếu con chính là ảnh có kích thước không xác định, toàn bộ Stack có thể có chiều cao bằng 0. Hãy đặt kích thước cho phần tử chính bằng SizedBox, AspectRatio hoặc Positioned.fill.
Khi nào nên tách thành widget riêng
Một dấu hiệu dễ nhận ra: khi cây Column/Row của bạn lồng quá ba cấp và mỗi cấp có nhiều con. Lúc đó hãy tách thành widget riêng, ví dụ:
[object Object]Việc tách không chỉ giúp dễ đọc mà còn giúp giảm phạm vi vẽ lại: khi chỉ phần giá thay đổi, bạn có thể cho riêng widget đó lắng nghe dữ liệu thay vì cả thẻ.
Câu hỏi thường gặp
Expanded và Flexible khác nhau thế nào?
Expanded luôn chiếm hết phần trống còn lại (tương đương Flexible với fit: FlexFit.tight). Flexible cho phép con nhỏ hơn phần được chia nếu nội dung của nó nhỏ hơn. Dùng Flexible khi bạn muốn phần tử "được phép" co giãn nhưng không bắt buộc chiếm hết chỗ.
Làm sao đặt khoảng cách giữa các con mà không thêm SizedBox ở mọi chỗ?
Dùng spacing nếu phiên bản Flutter của bạn đã hỗ trợ, hoặc dùng Wrap khi các phần tử có thể xuống dòng. Với danh sách cần khoảng cách đều, ListView.separated là lựa chọn gọn hơn.
Khi nào dùng Wrap thay Row?
Khi số phần tử không xác định và có thể vượt chiều rộng màn hình — ví dụ danh sách nhãn, bộ lọc. Row sẽ tràn khung, còn Wrap tự động xuống dòng.
Kết luận
Sử dụng layout widgets:
- ✅ Column: Layout dọc
- ✅ Row: Layout ngang
- ✅ Stack: Overlay widgets
- ✅ Flex: Flexible layout
Tóm tắt:
- Column: Vertical layout với alignment
- Row: Horizontal layout với alignment
- Stack: Overlay với Positioned
- Flex: Flexible layout với flex values
Nắm vững các layout widgets sẽ giúp bạn xây dựng UI dễ dàng! 🚀
Học Flutter bài bản theo lộ trình
Nếu bạn muốn học có người sửa bài thay vì tự ghép tài liệu, Flutter Hướng Nghiệp đào tạo theo 3 cấp:
- Flutter Cơ Bản — Dart, widget, giao diện, 28 buổi.
- Flutter Nâng Cao — state management, REST API, Firebase, 28 buổi.
- Flutter Chuyên Sâu — back-end, AI/ML, publish lên store, 53 buổi.
Lớp online trực tiếp qua Zoom/Google Meet, có bản ghi lại — không bắt buộc đến cơ sở.
Xem lịch khai giảng hoặc so sánh 5 cách học lập trình mobile nếu còn phân vân.
Đọc thêm: Cách sử dụng Text, Image, Icon trong Flutter (hướng dẫn cho newbie)