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

1. Tạo Toggle Widget

[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:

1. Create ThemeProvider: Quản lý theme mode
2. Define Themes: Light và dark themes
3. Setup App: Wrap với Provider
4. Toggle Button: Cho phép chuyển đổi
5. 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! 🚀

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