Tạo Dark Mode & Light Mode trong Flutter

Dark Mode đã trở thành tính năng quan trọng trong ứng dụng hiện đại. Bài viết này sẽ hướng dẫn bạn implement Dark Mode và Light Mode trong Flutter.

Setup cơ bản

1. Dependencies

[object Object]

2. Install

[object Object]

Theme Provider

1. Tạo ThemeProvider

[object Object]

Define Themes

1. Light Theme

[object Object]

2. Dark Theme

[object Object]

Setup App

1. Wrap với Provider

[object Object]

Theme Toggle Button

[object Object]

2. Sử dụng trong AppBar

[object Object]

Advanced: Custom Theme Colors

1. Define Custom Colors

[object Object]

2. Sử dụng trong Theme

[object Object]

Theme Extension

1. Custom Theme Extension

[object Object]

2. Add to Theme

[object Object]

3. Sử dụng Extension

[object Object]

Best Practices

1. Consistent Colors

✅ Nên: Sử dụng theme colors
❌ Không nên: Hardcode colors

2. Test Both Themes

✅ Nên: Test trên cả light và dark mode
❌ Không nên: Chỉ test một theme

3. Save Preference

✅ Nên: Lưu theme preference
❌ Không nên: Reset mỗi lần mở app

Kết luận

Implement Dark Mode và Light Mode:

✅ ThemeProvider: Quản lý theme state
✅ Themes: Define light và dark themes
✅ Persistence: Lưu preference
✅ Toggle: Cho phép chuyển đổi

Tóm tắt:

Create ThemeProvider: Quản lý theme mode
Define Themes: Light và dark themes
Setup App: Wrap với Provider
Toggle Button: Cho phép chuyển đổi
Save Preference: Lưu lựa chọn của user

Implement Dark Mode sẽ cải thiện trải nghiệm người dùng! 🚀

Ba chế độ, không phải hai

Lỗi phổ biến nhất khi làm tính năng này là chỉ có hai lựa chọn sáng và tối. Người dùng thực tế cần ba: theo hệ thống, luôn sáng, luôn tối — và lựa chọn "theo hệ thống" nên là mặc định.

[object Object]

Khi đó cấu hình ứng dụng chỉ cần ba tham số:

[object Object]

Điểm cần chú ý: nếu bạn tự viết logic đọc cài đặt hệ thống thay vì dùng ThemeMode.system, ứng dụng sẽ không đổi theo khi người dùng bật chế độ tối trong lúc ứng dụng đang mở.

Lưu lựa chọn và áp dụng ngay

Lựa chọn giao diện phải được lưu lại, nếu không người dùng sẽ phải chọn lại mỗi lần mở ứng dụng — và đó là lỗi khiến tính năng này bị coi là chưa hoàn chỉnh.

[object Object]

Hai chi tiết nhỏ nhưng quan trọng: áp dụng ngay sau khi chọn (không yêu cầu khởi động lại), và gọi load() một lần khi ứng dụng khởi động, trước khi hiển thị màn hình chính, để tránh hiện tượng nháy từ sáng sang tối.

Những chỗ dễ bị bỏ sót khi chuyển sang chế độ tối

Đây là danh sách kiểm tra giúp bạn tránh việc chỉ màn hình chính đẹp mà những chỗ khác bị sai:

Hộp thoại và menu — thường dùng màu nền riêng, rất dễ quên cập nhật.
SnackBar và banner — nền sáng chữ sáng là lỗi nhìn thấy ngay.
Trạng thái rỗng và màn hình lỗi — những màn hình ít được mở khi phát triển.
Ảnh và biểu tượng có nền trắng — sẽ nổi bật một cách khó coi trên nền tối; nên dùng ảnh có nền trong suốt hoặc phiên bản riêng cho từng chế độ.
Biểu đồ và bản đồ — cần bảng màu riêng vì mặc định thường không đủ tương phản trên nền tối.
Thanh trạng thái của hệ điều hành — cần chọn kiểu biểu tượng sáng hoặc tối tương ứng để không bị chìm vào nền.

Cách kiểm tra nhanh và hiệu quả: bật chế độ tối, sau đó đi lần lượt qua mọi màn hình, mở mọi hộp thoại và menu, rồi làm lại với cỡ chữ lớn nhất trong cài đặt hệ thống.

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 · Hướng dẫn tạo theme system tái sử dụng cho toàn bộ ứng dụng Flutter