Chủ đề động trong rung

Có rất nhiều cách áp dụng dynamic theme trong Flutter. Vì Provider đang được khá nhiều người sử dụng nên chúng ta hãy cùng thử tạo ứng dụng và thiết lập dynamic theme sử dụng Provider nhé.

Cài đặt

Tạo ứng dụng counter mặc định của Flutter: flutter create counter

Mình có tách MyHomePage và _MyHomePageState ra một file riêng là lib/home.dart để rõ ràng hơn và tránh việc khó theo dõi.

Sau đó chúng ta thêm thư viện provider vào pubspec.yaml

Khởi tạo

Tạo file tên themes.dart, file này sẽ chứa các theme và các class liên quan đến theme.
Đầu tiên ta sẽ tạo ra 1 enum chứa tên của các theme trong class thay vì sử dụng string để tránh các lỗi lặt vặt do sai chính tả hoặc không báo lỗi nếu như chúng ta đổi tên theme nhưng lại quên không đổi ở đâu đó trong app.
Ở đây mình muốn app có 2 theme là light và dark

Sau khi xong, chúng ta sẽ tạo một Map chứa các thuộc tính của các theme có trong app. Mình muốn các AppBar, Button trong light theme sẽ có màu xanh nước biển, còn dark theme sẽ là màu xanh lá cây. Thuộc tính brightness sẽ giúp mình tự động chuyển một số màu từ light sang dark để phù hợp với theme (ví dụ như ở light theme thì màu chữ là màu đen xám, màu background là màu trắng, khi qua dark theme thì màu chữ sẽ là màu trắng, màu background là màu đen xám). Bạn có thể đọc thêm về brightness tại đây

Tiếp theo đó chúng ta sẽ tạo class AppTheme kế thừa ChangeNotifier, class này sẽ chính là class điều khiển trạng thái theme của app chúng ta. Bạn có thể đọc thêm về ChangeNotifier để nắm rõ hơn cách nó hoạt động

Vậy là xong phần chính rồi. Tiếp sau đây sẽ là sử dụng vào app counter mặc định của Flutter

Áp dụng

Mở file main.dart, tại hàm main() chúng ta sẽ cần bọc cả App trong ChangeNotifierProvider và truyền một instance của AppTheme mình vừa tạo vào thuộc tính create

Giờ đây các widget con sẽ có thể lấy được instance kia bằng cách sử dụng Provider.of<AppTheme>(context) hoặc AppTheme.of(context)
Vậy nên chúng ta sẽ sử dụng luôn tại class MyApp vì trong đó có sử dụng MaterialApp, nơi chúng ta có thể đổi theme.
Chúng ta sẽ đổi thuộc tính theme từ giá trị hiện tại qua AppTheme.of(context, listen: true).currentTheme

Chúng ta thêm thuộc tính listen: true vì chúng ta muốn update lại view mỗi khi state của AppTheme thay đổi.
Vậy là khi state của AppTheme thay đổi, theme của chúng ta cũng thay đổi theo.
Chúng ta cần đổi theme khi bấm vào một button nào đó trong view, vậy trước tiên chúng ta cần lấy instance của AppTheme tương tự như trên.

Tại _MyHomePageState tạo một biến để chứa AppTheme và khởi tạo nó trong didChangeDependencies

Sau đó mình kéo xuống đoạn khai báo AppBar và thêm một button bên phải của AppBar để đổi theme. Tại hàm onPressed của button mình gọi đến hàm switchTheme() của AppTheme để đổi qua lại giữa 2 theme. Mình sử dụng ?. để đề phòng trường hợp _theme null

Vậy là xong. Và đây là thành quả: