Hướng dẫn tạo theme system tái sử dụng cho toàn bộ ứng dụng Flutter

Theme system giúp bạn quản lý màu sắc, typography, và styling một cách nhất quán trong toàn bộ ứng dụng. Bài viết này sẽ hướng dẫn bạn xây dựng theme system chuyên nghiệp trong Flutter.

Tại sao cần Theme System?

Vấn đề không có theme:

• ❌ Inconsistent: Màu sắc không nhất quán
• ❌ Hard to maintain: Phải sửa ở nhiều nơi
• ❌ No dark mode: Khó implement dark mode
• ❌ No customization: Không thể thay đổi theme dễ dàng

Lợi ích của theme system:

• ✅ Consistency: Màu sắc nhất quán
• ✅ Easy maintenance: Sửa một chỗ, áp dụng toàn bộ
• ✅ Dark mode: Dễ dàng hỗ trợ dark mode
• ✅ Customization: Người dùng có thể tùy chỉnh

Cấu trúc Theme System

1. Define App Colors

[object Object]

2. Define App Text Styles

[object Object]

3. Create Theme Data

[object Object]

Sử dụng Theme trong App

1. Setup Theme Provider

[object Object]

2. Wrap App với Theme

[object Object]

Custom Theme Extensions

1. Define Custom Colors

[object Object]

2. Add to Theme

[object Object]

3. Sử dụng Extension

[object Object]

Best Practices

1. Sử dụng Theme Colors

[object Object]

2. Sử dụng Text Theme

[object Object]

3. Responsive Theme

[object Object]

Cách đặt tên cho các giá trị của theme

Một hệ thống theme tốt được nhận ra qua tên gọi. Các tên dưới đây giúp người đọc hiểu ý định mà không cần mở định nghĩa:

• Tên theo vai trò, không theo màu. surface, onSurface, primaryContainer tốt hơn lightGrey, darkBlue. Tên theo màu sẽ sai ngay khi chế độ tối đổi màu ngược lại.
• Tên theo cấp bậc cho chữ và khoảng cách. titleMedium, bodySmall, spacingLarge giúp việc thay đổi quy mô về sau chỉ cần sửa một bảng.
• Tên theo trạng thái cho ngữ nghĩa nghiệp vụ. success, warning, overdue nói rõ hơn green1, orange2.
• Không dùng tên chỉ tồn tại trong một màn hình. Nếu bạn đặt courseCardBorder, nó sẽ trở nên vô nghĩa khi màn hình đó thay đổi. Hãy dùng cardBorder.

Kiểm tra theme trước khi coi là xong

Danh sách kiểm tra ngắn, nên chạy sau mỗi lần thay đổi theme:

1. Bật chế độ tối và đi qua tất cả màn hình, gồm cả hộp thoại, thông báo và màn hình lỗi.
2. Tăng cỡ chữ trong cài đặt hệ thống lên mức lớn nhất và kiểm tra lại bố cục.
3. Kiểm tra độ tương phản cho chữ trên nền màu nhạt — đây là lỗi hay gặp nhất khi tự chọn bảng màu.
4. Kiểm tra sắc thái của ảnh và biểu tượng trên nền tối; ảnh nền trắng sẽ nổi bật khó coi và cần xử lý riêng.
5. Kiểm tra trạng thái nhấn giữ và vô hiệu hoá của nút bấm, vì đây là những trạng thái ít được thiết kế.

Ba sai lầm làm theme system mất giá trị

1. Trừu tượng hoá quá sớm. Nếu bạn tạo ba lớp gián tiếp giữa widget và màu sắc, việc sửa một chi tiết nhỏ sẽ phải sửa ở nhiều nơi. Hãy bắt đầu từ những gì dùng chung thật sự, rồi mở rộng khi cần.

2. Đặt mọi thứ vào theme. Theme chỉ nên chứa những giá trị dùng lại nhiều nơi và cần thay đổi theo chế độ hoặc thương hiệu. Các giá trị chỉ tồn tại trong một thành phần nên ở ngay trong thành phần đó.

3. Không cập nhật tài liệu. Một theme system không có bảng tra cứu sẽ khiến người mới tự chọn giá trị riêng, và chỉ sau vài tháng bạn sẽ có nhiều bảng màu khác nhau chạy song song trong cùng ứng dụng. Một tệp đọc nhanh mô tả các giá trị có sẵn là đủ.

Khi nào cần mở rộng hệ thống theme

Bạn nên mở rộng khi có ít nhất ba nơi cần cùng một giá trị đặc thù, hoặc khi thiết kế bắt đầu có khái niệm mới màu sắc của Material không diễn tả được (ví dụ mức độ ưu tiên của công việc). Trước khi mở rộng, hãy tự hỏi giá trị đó có thay đổi theo chế độ sáng/tối hoặc theo thương hiệu hay không — nếu không, nó chỉ là một hằng số dùng chung, không cần trừu tượng hoá.

Kết luận

Theme system giúp bạn:

• ✅ Quản lý styling nhất quán
• ✅ Dễ dàng implement dark mode
• ✅ Dễ maintain và update
• ✅ Tùy chỉnh linh hoạt

Tóm tắt:

1. Define Colors: Tạo color palette
2. Define Text Styles: Tạo typography system
3. Create Theme Data: Tạo light và dark themes
4. Theme Provider: Quản lý theme state
5. Extensions: Mở rộng theme với custom properties

Xây dựng theme system tốt sẽ giúp ứng dụng Flutter của bạn chuyên nghiệp và nhất quán!

---

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: Hướng dẫn làm việc với Colors, Theme và Dark Mode trong Flutter