如何让Flutter应用跟随移动设备的模式自动切换？

当然有可行的实现方式，以下是几种常用方案：

基础自动同步 #

这是最简单的实现方式，只需要在MaterialApp中配置亮色、暗色主题，并将themeMode设为ThemeMode.system，应用就会自动跟随系统的明暗模式切换：

MaterialApp(
  // 配置亮色主题
  theme: ThemeData(
    primarySwatch: Colors.blue,
    brightness: Brightness.light,
  ),
  // 配置暗色主题
  darkTheme: ThemeData(
    primarySwatch: Colors.blue,
    brightness: Brightness.dark,
  ),
  // 跟随系统模式
  themeMode: ThemeMode.system,
  home: const HomeScreen(),
);

当系统切换明暗模式时，应用会自动加载对应的主题样式，无需额外逻辑。

监听模式变化（自定义场景） #

如果需要在模式切换时执行自定义逻辑（比如记录用户模式偏好、更新特定组件状态），可以通过WidgetsBindingObserver监听系统亮度变化：

1. 在页面的State类中混入WidgetsBindingObserver
2. 重写didChangePlatformBrightness方法，获取最新的亮度模式
3. 在initState中注册监听，dispose中取消注册

示例代码：

class _HomeScreenState extends State<HomeScreen> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    // 注册监听
    WidgetsBinding.instance.addObserver(this);
    // 初始化时获取当前系统亮度
    final currentBrightness = WidgetsBinding.instance.window.platformBrightness;
    _handleBrightnessChange(currentBrightness);
  }

  @override
  void didChangePlatformBrightness() {
    super.didChangePlatformBrightness();
    final newBrightness = WidgetsBinding.instance.window.platformBrightness;
    // 执行自定义逻辑
    _handleBrightnessChange(newBrightness);
  }

  void _handleBrightnessChange(Brightness brightness) {
    setState(() {
      // 更新状态或处理业务逻辑
      print(brightness == Brightness.light ? '切换到亮色模式' : '切换到暗色模式');
    });
  }

  @override
  void dispose() {
    // 取消监听
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final isDarkMode = MediaQuery.of(context).platformBrightness == Brightness.dark;
    return Scaffold(
      appBar: AppBar(title: const Text('系统模式同步')),
      body: Center(
        child: Text(isDarkMode ? '当前为暗色模式' : '当前为亮色模式'),
      ),
    );
  }
}

兼容性说明 #

• Android：Android 10（API 29）及以上支持系统级明暗模式，低于该版本的设备需要通过手动设置（比如SharedPreferences）模拟模式切换
• iOS：iOS 13及以上支持系统明暗模式，Info.plist中默认UIUserInterfaceStyle为Automatic，无需额外配置

内容的提问来源于stack exchange，提问作者Khaled