Flutter 适配深色模式（DarkMode）指南

当用户启用设备的深色模式时，Flutter 应用会自动调整其 UI 以匹配更暗的配色方案。这有助于减少屏幕亮度，在黑暗环境中提供更舒适的体验。

启用深色模式

要在 Flutter 应用中启用深色模式，您需要在 ThemeData 中设置 brightness 属性：

ThemeData.dark()

ThemeData.from(
  colorScheme: ColorScheme.dark(),
  textTheme: TextTheme(
    bodyText2: TextStyle(color: Colors.white),
  ),
);

适配主题色

Flutter 应用通常使用一个 ThemeData 对象来管理其配色方案和字体样式。为了适配深色模式，您需要为 ThemeData 中的每个主题颜色创建一个暗模式变体。

例如：

ThemeData.from(
  colorScheme: ColorScheme.fromSwatch(
    primarySwatch: MaterialColor(
      4294967295, // 0xFFFFFFFF
      {
        50: Color(0xFFFBFBFB), // 背景
        100: Color(0xFFF5F5F5),
        200: Color(0xFFEEEEEE),
        300: Color(0xFFE0E0E0),
        400: Color(0xFFBDBDBD),
        500: Color(0xFF9E9E9E), // 文本
        600: Color(0xFF757575),
        700: Color(0xFF616161),
        800: Color(0xFF424242),
        900: Color(0xFF212121), // 边框
      },
    ),
  ),
  textTheme: TextTheme(
    bodyText2: TextStyle(color: Colors.white), // 文本
  ),
);

适配文本样式

您还可以为深色模式调整文本样式。例如，您可能需要将文本颜色更改为白色。

ThemeData.from(
  ...
  textTheme: TextTheme(
    bodyText2: TextStyle(color: Colors.white), // 文本
  ),
);

适配图标和图像

您还需要确保图标和图像在深色模式下仍能正常显示。您可以使用 Flutter 的 ColorFiltered 小部件来为图像和图标着色：

ColorFiltered(
  colorFilter: ColorFilter.mode(Colors.white, BlendMode.srcATop),
  child: Image.asset('assets/icon.png'),
);