Android 10 ra mắt kèm theo tính năng Dark Mode rất tuyệt vời. Và kéo theo đó, các ứng dụng lần lược đều hỗ trợ Dark Mode. Và ứng dụng của mình cũng không ngoại lệ.

Trong bài viết hôm nay, mình sẽ giới thiệu về giải pháp của mình để chuyển đổi theme từ Light Mode qua Dark Mode trong Flutter App.

Vì một số lý do về bản quyền và tính riêng tư nên mình chỉ đưa một phần code trong dự án của mình nhưng vẫn đảm bảo tính rõ ràng nên các bạn thông cảm nhé.

Nội dung:

1. Chọn màu chính
2. Dark Theme và Light Theme
3. Dynamic theme any where
4. Mở rộng

Chọn màu chính, màu primary

Một ứng dụng phải có màu chính và từ đó để suy ra các màu còn lại để phối. Về màu sắc mình không chuyên nên không đi sâu vào phân tích được.

Mình xin giới thiệu cho các bác một công cụ hữu hiệu để chọn các màu cho mình.

Material Tool

• 

Mình hay dùng nhất là chức năng Color Tool. Các bạn tìm hiểu thêm để sử dụng cho đúng mục đích của mình nhé!

Màu primary của mình sẽ là 12AF91

Dựa theo tool đề xuất

Mình chọn màu dark xong. Tuy nhiên các bạn củng hoàn toàn chọn các màu khác mà các bạn muốn.

Dark theme và Light theme

Như các bạn đã biết thuộc tính theme trong Material App là nơi để khai báo theme mình muốn. Thuộc tính này nhận vào kiểu dữ liệu ThemeData.

Tạo ra một class là AppTheme và định nghĩa các theme của bạn.

Tiếp theo chúng ta sẽ wrap Material App với BaseWidget sử dụng Provider và tạo ra một page model kiểu Singletone để quản lý cho MyApp.

ConfigDarkMode.dart

Convert MyApp từ StatelessWidget thành StatefullWidget. Sau đó Wrap với BaseWidget.

Dynamic theme anywhere

Giả sử mình có một page là optimization với giao diện như sau:

OptimizationPage có OptimizationPageMode quản lý state (theo Provider). Button DarkMode là một widget custom của mình và có một callback để invoke trạng thái enable hoặc disable. Trong callback đó, chúng ta sẽ thực hiện gọi việc thay đổi theme.

Nếu phần này các bạn chưa hiểu thì có thể xem lại series Flutter Provider Architecture.

Và sau khi click thì sẽ chuyển thành dark mode toàn app của các bạn.

Mời các bác xem demo

Mở rộng

Thông thường, khi bật dark mode hoặc light mode xong thì các bạn phải lưu lại config đó để lần sau vào thì không phải bật hay tắt lại. Có rất nhiều cách để lưu lại, mình gợi ý cho các bạn hai cách đó là:

1. Sử dụng package share_preferences
2. Tạo ra một file local và lưu tại máy, tham khảo tại đây!