"最近在开发Flutter应用时需要适配暗黑模式，遇到几个问题想请教大家：

如何动态切换明暗主题而不需要重启应用？
自定义组件颜色应该如何适配暗黑模式？
系统自带Material组件能自动适应暗黑模式吗？
测试时发现某些第三方插件颜色不跟随系统切换，这种情况该怎么处理？
有没有推荐的最佳实践来统一管理主题颜色？

希望有经验的朋友能分享一下解决方案，谢谢！"

yibo5220 1楼

Flutter适配暗黑模式主要通过ThemeData和MediaQuery来实现。首先，在MaterialApp中设置主题数据，包括亮色主题和暗色主题：

MaterialApp(
  theme: ThemeData.light(),  // 亮色主题
  darkTheme: ThemeData.dark(),  // 暗色主题
  themeMode: ThemeMode.system,  // 根据系统设置自动切换
)

ThemeMode有三种模式：system（跟随系统）、light（强制亮色）和dark（强制暗色）。

接着，在控件中使用Theme.of(context)获取当前主题颜色或字体等样式，这样可以统一管理UI。比如按钮文字颜色可以写为：

Text(
  'Button',
  style: TextStyle(color: Theme.of(context).primaryColor),
)

此外，可以监听系统亮度变化动态更新界面。使用MediaQuery.platformBrightnessOf(context)获取当前系统亮度，并结合addPostFrameCallback实时调整。这样就完成了暗黑模式的适配。

更多关于Flutter暗黑模式适配的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

nodeper 2楼

作为屌丝程序员，实现Flutter的暗黑模式适配其实不难。首先，在MaterialApp中设置theme和darkTheme，分别定义亮色和暗色主题。接着使用ValueListenableBuilder监听ThemeMode的变化，动态切换主题。

比如：

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<ThemeMode>(
      valueListenable: ThemeProvider.of(context).themeModeNotifier,
      builder: (context, themeMode, _) {
        return MaterialApp(
          theme: ThemeData.light(),
          darkTheme: ThemeData.dark(),
          themeMode: themeMode,
          home: MyHomePage(),
        );
      },
    );
  }
}

还要注意状态管理，推荐使用provider或riverpod来管理主题模式。可以在用户设置中提供切换按钮，保存用户选择到本地（如shared_preferences），下次启动时读取并应用。这样既简单又实用。

sinazl 3楼

Flutter暗黑模式适配指南

在Flutter中实现暗黑模式适配主要有以下几种方法：

1. 使用ThemeData适配

MaterialApp(
  theme: ThemeData(
    brightness: Brightness.light,
    // 浅色主题配置
  ),
  darkTheme: ThemeData(
    brightness: Brightness.dark,
    // 深色主题配置
  ),
  themeMode: ThemeMode.system, // 跟随系统
);

2. 监听系统主题变化

// 在StatefulWidget中
@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addObserver(
    LifecycleEventHandler(
      didChangePlatformBrightness: () {
        // 系统主题变化时回调
        setState(() {});
      },
    ),
  );
}

3. 使用provider管理主题

// 定义主题状态
class ThemeProvider with ChangeNotifier {
  ThemeMode _themeMode = ThemeMode.system;
  
  ThemeMode get themeMode => _themeMode;
  
  void setThemeMode(ThemeMode mode) {
    _themeMode = mode;
    notifyListeners();
  }
}

// 使用
Consumer<ThemeProvider>(
  builder: (context, themeProvider, child) {
    return MaterialApp(
      themeMode: themeProvider.themeMode,
      // ...
    );
  },
);

4. 适配自定义颜色

Color getAdaptiveColor(BuildContext context) {
  return Theme.of(context).brightness == Brightness.dark 
      ? Colors.white 
      : Colors.black;
}

5. 适配图片资源

Image.asset(
  Theme.of(context).brightness == Brightness.dark
      ? 'assets/dark_logo.png'
      : 'assets/light_logo.png',
);

注意事项

测试时可以使用debugBrightnessOverride临时强制主题
注意检查第三方插件是否支持暗黑模式
过渡动画要平滑，避免突兀变化