flutter如何监听系统深色/浅色模式

在Flutter中，如何动态监听系统深色/浅色模式的变化？当用户在系统设置中切换主题时，我希望能够实时获取当前的主题模式并更新应用界面，而不是只在应用启动时检测一次。有没有现成的API或插件可以实现这个功能？最好能提供简单的代码示例说明实现方法。

2 回复

在Flutter中，使用MediaQuery.of(context).platformBrightness监听系统深色/浅色模式。结合Theme.of(context).brightness或AnimatedBuilder实现动态响应。

更多关于flutter如何监听系统深色/浅色模式的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中监听系统深色/浅色模式变化，可以通过以下方法实现：

1. 使用 MediaQuery 监听系统主题模式

通过 MediaQuery.of(context).platformBrightness 获取当前亮度模式，并配合 AnimatedBuilder 监听变化。

代码示例：

import 'package:flutter/material.dart';

class ThemeMonitor extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: MediaQuery.of(context), // 监听 MediaQuery 变化
      builder: (context, child) {
        Brightness currentBrightness = MediaQuery.of(context).platformBrightness;
        bool isDarkMode = currentBrightness == Brightness.dark;
        
        return Scaffold(
          backgroundColor: isDarkMode ? Colors.black : Colors.white,
          body: Center(
            child: Text(
              isDarkMode ? '深色模式' : '浅色模式',
              style: TextStyle(
                color: isDarkMode ? Colors.white : Colors.black,
              ),
            ),
          ),
        );
      },
    );
  }
}

2. 使用 Provider 状态管理（推荐）

结合 Provider 包实现全局主题状态管理，便于在多个界面同步监听。

步骤：

  1. 添加依赖：在 pubspec.yaml 中添加 provider: ^6.0.0（版本号可更新）。
  2. 创建主题状态管理类：
import 'package:flutter/material.dart';

class ThemeProvider with ChangeNotifier {
  ThemeMode _themeMode = ThemeMode.system;

  ThemeMode get themeMode => _themeMode;
  bool get isDarkMode => _themeMode == ThemeMode.dark;

  void setTheme(ThemeMode mode) {
    _themeMode = mode;
    notifyListeners();
  }
}
  1. 在 MaterialApp 中配置：
return ChangeNotifierProvider(
  create: (_) => ThemeProvider(),
  child: Consumer<ThemeProvider>(
    builder: (context, themeProvider, child) {
      return MaterialApp(
        theme: ThemeData.light(),
        darkTheme: ThemeData.dark(),
        themeMode: themeProvider.themeMode,
        home: YourHomePage(),
      );
    },
  ),
);
  1. 在界面中监听变化：
Consumer<ThemeProvider>(
  builder: (context, themeProvider, child) {
    bool isDark = themeProvider.isDarkMode;
    return Text(isDark ? '深色模式' : '浅色模式');
  },
);

3. 直接使用 Brightness 监听

通过 WidgetsBindingObserver 监听系统主题变化（适用于非界面组件）。

代码示例：

class ThemeListener with WidgetsBindingObserver {
  @override
  void didChangePlatformBrightness() {
    Brightness brightness = WidgetsBinding.instance.window.platformBrightness;
    print('主题变为: ${brightness == Brightness.dark ? '深色' : '浅色'}');
  }
}

// 在 State 中注册监听
@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addObserver(ThemeListener());
}

@override
void dispose() {
  WidgetsBinding.instance.removeObserver(ThemeListener());
  super.dispose();
}

注意事项：

  • 权限：无需额外权限。
  • 兼容性：支持 Android/iOS 系统深色模式切换。
  • 推荐方案：使用 Provider 或 AnimatedBuilder 可自动响应系统主题变化并刷新界面。

以上方法可灵活选择，根据项目复杂度决定使用简单监听或状态管理方案。

回到顶部