511 字
3 分钟
Flutter 暗黑模式
2025-02-28

暗黑模式#

在使用 GetX 时,判断当前是暗黑模式(Dark Mode)还是白天模式(Light Mode)可以通过 MediaQueryGettheme 属性来实现。GetX 提供了一些非常方便的方法来获取当前的主题模式

使用 Get.isDarkMode 判断#

GetX 有一个非常方便的 isDarkMode 属性,它直接返回一个 bool 值,表示当前应用是否处于暗黑模式

import 'package:get/get.dart';

// 获取当前是否为暗黑模式
bool isDarkMode = Get.isDarkMode;

if (isDarkMode) {
  // 暗黑模式
  print("当前是暗黑模式");
} else {
  // 白天模式
  print("当前是白天模式");
}

使用 Get.theme 获取当前主题#

通过 Get.theme 获取当前的 ThemeData,然后根据 brightness 属性判断当前的模式。

import 'package:get/get.dart';
import 'package:flutter/material.dart';

// 获取当前主题
Brightness brightness = Get.theme.brightness;

if (brightness == Brightness.dark) {
  // 暗黑模式
  print("当前是暗黑模式");
} else {
  // 白天模式
  print("当前是白天模式");
}

使用 MediaQuery 判断#

MediaQuery 也是 Flutter 提供的一种方法来判断主题。MediaQuery.of(context).platformBrightness 返回当前平台的亮度模式,可以通过它来判断是否为暗黑模式或白天模式。

import 'package:flutter/material.dart';

Brightness brightness = MediaQuery.of(context).platformBrightness;

if (brightness == Brightness.dark) {
  // 暗黑模式
  print("当前是暗黑模式");
} else {
  // 白天模式
  print("当前是白天模式");
}

结合 GetX 使用 MediaQuery 判断主题#

如果想使用 GetX 并结合 MediaQuery,可以在 GetX 中结合 MediaQuery 来获取主题信息,比如在一个 GetX 控制器中监听主题变化:

import 'package:get/get.dart';
import 'package:flutter/material.dart';

class ThemeController extends GetxController {
  Rx<Brightness> brightness = (Get.theme.brightness).obs;

  @override
  void onInit() {
    super.onInit();

    // 可以在这里监听主题变化
    ever(brightness, (_) {
      print('主题已更新:${brightness.value == Brightness.dark ? "暗黑模式" : "白天模式"}');
    });
  }
}
  • Get.isDarkMode 是最直接且最简洁的方式来判断当前是否为暗黑模式。
  • 如果需要获取更详细的主题信息,可以使用 Get.theme.brightness
  • 使用 MediaQuery 是 Flutter 原生的方式,也可以作为替代方法。

建议使用 Get.isDarkMode 作为首选方法,因为它既简洁又方便。

Flutter 暗黑模式
https://www.tanghailong.com/posts/flutter/darkorlinght/
作者
唐海龙
发布于
2025-02-28
许可协议
CC BY-NC-SA 4.0