Cách dùng Column, Row, Stack và Flex trong Flutter (kèm ví dụ)

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]

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:

1. Column: Vertical layout với alignment
2. Row: Horizontal layout với alignment
3. Stack: Overlay với Positioned
4. 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! 🚀

Tác giả: Admin
Ngày đăng: 21/02/2025
Chuyên mục: Flutter