Cách dùng Text, Image, Icon trong Flutter 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.

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]

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]

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]

Hiển thị ảnh đúng cách trong ứng dụng thật

Widget Image có nhiều hàm dựng sẵn, và chọn sai hàm là nguyên nhân phổ biến của lỗi "ảnh không hiện" trên bản phát hành:

Image.asset — ảnh đóng gói trong ứng dụng, khai báo trong pubspec.yaml. Phù hợp logo, icon minh hoạ.
Image.network — ảnh tải từ mạng. Phải có loadingBuilder và errorBuilder.
Image.file — ảnh trong bộ nhớ máy, thường dùng khi người dùng chọn ảnh.
Image.memory — ảnh từ dữ liệu nhị phân, dùng khi ảnh mới được tải hoặc chụp.

Với ảnh từ mạng, một widget đầy đủ cần ba phần: đang tải, lỗi, và tỉ lệ khung cố định để bố cục không nhảy khi ảnh tải xong.

[object Object]

Ba lưu ý về ảnh trong dự án thật:

Chuẩn bị ảnh đúng kích thước. Hiển thị ảnh ở ô 80×80 thì không nên dùng ảnh gốc vài nghìn pixel; hãy xuất sẵn các kích thước cần dùng.
Dùng cacheWidth/cacheHeight khi ảnh đã có nhưng quá lớn — cách này giảm bộ nhớ đáng kể trên danh sách dài.
Khai báo ảnh trong pubspec.yaml theo thư mục thay vì liệt kê từng tệp, để thêm ảnh mới không phải sửa cấu hình.

Sắp chữ cho dễ đọc

Text có vài tham số ảnh hưởng trực tiếp tới việc đọc, nhưng ít khi được dùng đúng:

[object Object]

Luôn đặt maxLines và overflow cho văn bản lấy từ API. Không có hai tham số này, một tiêu đề dài bất thường sẽ làm tràn bố cục.
Dùng TextTheme thay vì tự chọn cỡ chữ. Nhờ vậy khi đổi thiết kế, bạn sửa một chỗ.
Không đặt chiều cao dòng cố định cho văn bản nhiều dòng, vì cỡ chữ lớn trong cài đặt hệ thống sẽ làm chữ bị cắt.

Gộp Text, Image, Icon thành thành phần dùng lại

Sau khi đã hiểu ba widget cơ bản, bước tiếp theo là gộp chúng thành các thành phần nhỏ dùng lại trong dự án — ví dụ một ô hiển thị thông tin có ảnh, tiêu đề và phụ đề:

[object Object]

Cách làm này quan trọng hơn việc thuộc lòng tham số của từng widget: trong dự án thật, giao diện được tạo thành từ vài chục thành phần dùng lại, không phải từ hàng trăm dòng Text và Image rải rác.

Câu hỏi thường gặp

Icon nên dùng bộ nào?

Bộ Icons có sẵn trong Flutter là đủ cho hầu hết nhu cầu và không làm tăng kích thước ứng dụng đáng kể. Chỉ thêm bộ icon riêng khi thiết kế yêu cầu, và nên thêm ở dạng font icon thay vì ảnh.

Vì sao ảnh trong bản phát hành không hiện dù chạy thử vẫn tốt?

Ba nguyên nhân thường gặp: quên khai báo ảnh trong pubspec.yaml, đường dẫn viết hoa chữ cái khác với tên tệp, và quên chạy lại ứng dụng sau khi sửa khai báo. Hãy kiểm tra theo đúng thứ tự này.

Chữ tiếng Việt bị hiển thị lệch dấu thì xử lý thế nào?

Đảm bảo tệp mã nguồn lưu ở dạng UTF-8, và nếu dùng font tuỳ chỉnh thì font đó phải có bộ ký tự tiếng Việt đầy đủ. Đây là lỗi rất hay gặp khi dùng font tải từ bên ngoài.

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:

Text: Styling, alignment, overflow
Image: Assets, network, fit, placeholder
Icon: Material icons, styling, IconButton
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! 🚀

Đọc thêm: Tạo giao diện đẹp với Flutter Widgets

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ách sử dụng Text, Image, Icon trong Flutter (hướng dẫn cho newbie)

Tóm tắt nhanh

Text Widget