Hướng dẫn làm việc với Colors, Theme và Dark Mode trong Flutter

Colors, Theme và Dark Mode là những phần quan trọng để tạo ứng dụng đẹp và nhất quán. Bài viết này sẽ hướng dẫn bạn sử dụng chúng.

Colors trong Flutter

1. Material Colors

[object Object]

2. Color với opacity

[object Object]

3. Custom Color

[object Object]

4. ColorScheme

[object Object]

Theme trong Flutter

1. Define Theme

[object Object]

2. Apply Theme

[object Object]

3. Sử dụng Theme

[object Object]

Dark Mode

1. Define Dark Theme

[object Object]

2. Theme Provider

[object Object]

3. Setup App

[object Object]

Custom Colors

1. Define App Colors

[object Object]

2. Sử dụng

[object Object]

Theme Extensions

1. Create Extension

[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. Consistent Colors

[object Object]

3. Dark Mode Support

[object Object]

Ba mức độ làm theme cho dự án thật

Không phải dự án nào cũng cần một hệ thống theme đầy đủ. Chia ba mức giúp bạn không làm quá mức cần thiết:

Mức 1 — dùng ColorScheme.fromSeed. Đây là cách nhanh nhất để có màu hài hoà và hỗ trợ chế độ tối gần như miễn phí:

[object Object]

Từ một màu gốc, Material tự sinh bảng màu phù hợp cho cả chế độ sáng và tối. Với phần lớn ứng dụng, chỉ cần bước này là đủ.

Mức 2 — thêm phần ghi đè có chủ đích. Khi thiết kế yêu cầu màu riêng cho vài thành phần:

[object Object]

Mức 3 — dùng ThemeExtension cho các giá trị riêng của thương hiệu. Khi bạn có những thứ Material không biết (màu thẻ khoá học, màu trạng thái khoá học đã hoàn thành), ThemeExtension là cách đúng để giữ chúng theo theme thay vì hard-code:

[object Object]

Dùng trong widget: Theme.of(context).extension<AppColors>()!.success. Nhờ vậy khi chuyển sang chế độ tối, màu này cũng được chuyển theo mà bạn không phải kiểm tra từng màn hình.

Đổi chế độ sáng/tối và lưu lựa chọn

Người dùng thường có ba lựa chọn, không phải hai: theo hệ thống, sáng, tối. Bỏ lựa chọn "theo hệ thống" là lỗi trải nghiệm phổ biến, vì phần lớn người dùng muốn ứng dụng đổi theo cài đặt của điện thoại.

[object Object]

Và lưu lựa chọn này vào bộ nhớ cục bộ để lần mở sau giữ nguyên. Một chi tiết nhỏ nhưng đáng làm: khi người dùng chọn lựa chọn mới, hãy áp dụng ngay thay vì yêu cầu khởi động lại ứng dụng.

Lỗi thường gặp với màu và theme

1. Hard-code màu trong widget. Hệ quả là chế độ tối hiển thị sai ở đúng những chỗ khó thấy nhất. Hãy luôn lấy màu từ Theme.of(context).colorScheme.
2. Dùng màu chữ cố định trên nền theo theme. Trong chế độ tối, chữ đen trên nền đen là lỗi kinh điển. Dùng onSurface, onPrimary để Material tự chọn màu tương phản.
3. Chỉ kiểm tra chế độ tối ở màn hình chính. Hãy bật chế độ tối và đi hết các màn hình, đặc biệt là hộp thoại, bottom sheet và màn hình lỗi.
4. Không kiểm tra độ tương phản. Nhiều bảng màu đẹp nhưng chữ không đủ tương phản, gây khó đọc với người có thị lực kém.

Kết luận

Làm việc với Colors, Theme và Dark Mode:

• ✅ Colors: Material colors, custom colors
• ✅ Theme: Define và apply themes
• ✅ Dark Mode: Support dark mode
• ✅ Extensions: Custom theme properties

Tóm tắt:

1. Colors: Sử dụng Material colors hoặc custom
2. Theme: Define themes cho app
3. Dark Mode: Implement dark theme
4. Best Practices: Consistent, theme-based

Sử dụng Colors và Theme đúng cách sẽ tạo ứng dụng đẹ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: Tạo Dark Mode & Light Mode trong Flutter · Hướng dẫn tạo theme system tái sử dụng cho toàn bộ ứng dụng Flutter