Edu DaLatHub
  • Trang chủ
  • Flutter
  • WordPress Plugin
  • GoLang
  • ReactJS
  • NodeJS
  • Networking
    • Basic Networking
      • ARP
      • ICMP
      • TCP/UDP
    • Routing & Switching
      • RIP
      • OSPF
      • EIGRP
      • Redistribution
      • TSHOOT
      • WAN
Liên hệ

  • By  tinhphan
  • 2 comments
  • Tháng Hai 29, 2020

Xử lí Dark Mode real-time trong Flutter

Dark Mode
Light Mode

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

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:

This image has an empty alt attribute; its file name is lightmode-1.jpg

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.

This image has an empty alt attribute; its file name is darkmode-1.jpg

Mời các bác xem demo

Chất lượng quay của app khá kém nên màu không chính xác các bác nhé

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!

Tags:
Flutter

2 Comments

#10. Flutter: Login one time! - CodePSoft

Tháng Hai 29, 2020

[…] logout. Ở bài số #5 Xử lý LOGIN và LOGOUT như thế nào cho LIKE A BOSS ? và bài số #6: Xử lí Dark Mode real-time, mình có đề cập tới vấn đề này. Và hôm nay mình sẽ chia sẽ cách mình đã […]

Reply

DMT

Tháng Hai 29, 2020

Thank u <3<3<3

Reply

Leave a Comment Cancel Reply

Your email address will not be published.*

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.

Don’t compare yourself with anyone in this world…if you do so, you are insulting yourself.

Bill Gates

When something is important enough, you do it even if the odds are not in your favor.

Elon Musk

Bài viết mới

  • Lorem Ipsum Sample Content123
  • Lorem Ipsum Sample Content
  • Hello world
  • Hello world
  • Hello world
  • Wide area networks (Phần 2)
  • Wide area networks (Phần 1)
  • Redistribution (Phần Cuối)
  • Redistribution (Phần 1)
  • OSPF – Open Shortest Path First (Phần Cuối)

Nơi chia sẻ về tin công nghệ, các kinh nghiệm lập trình. Xây dựng các khoá đào tạo lập trình, mạng, tin học văn phòng...

Thông tin liên hệ

  • 2/9 Phạm Ngũ Lão, Phường 3, Đà Lạt
  • 0865802659
  • info@dalathub.com

Copyright @ 2022 Edu DaLatHub