Cách sử dụng Text, Image, Icon trong Flutter (hướng dẫn cho newbie)

Text, Image và Icon là 3 widget 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 một cách chi tiết.

Text Widget

1. Text cơ bản

[object Object]

2. Text với styling

[object Object]

3. Text với nhiều styles

[object Object]

4. Text properties

[object Object]

Image Widget

1. Image từ assets

[object Object]

2. Image từ network

[object Object]

3. Image với sizing

[object Object]

4. Image với placeholder

[object Object]

5. Image fit options

[object Object]

Icon Widget

1. Icon cơ bản

[object Object]

2. Icon với styling

[object Object]

3. IconButton

[object Object]

4. Popular Icons

[object Object]

Ví dụ kết hợp

1. Card với Image và Text

[object Object]

2. List Item với Icon và Text

[object Object]

3. AppBar với Icon và Text

[object Object]

Best Practices

1. Sử dụng const

[object Object]

2. Image optimization

[object Object]

3. Text overflow

[object Object]

Kết luận

Sử dụng Text, Image, Icon:

• ✅ Text: Hiển thị text với nhiều styles
• ✅ Image: Hiển thị ảnh từ assets hoặc network
• ✅ Icon: Hiển thị icons Material/Cupertino
• ✅ Kết hợp: Tạo UI đẹp với 3 widgets này

Tóm tắt:

1. Text: Styling, alignment, overflow
2. Image: Assets, network, fit, placeholder
3. Icon: Material icons, styling, IconButton
4. Best Practices: Const, optimization, overflow handling

Nắm vững 3 widget này là nền tảng để xây dựng UI Flutter! 🚀

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