# flutter_dark_mode_demo

**Repository Path**: lucifer_c/flutter_dark_mode_demo

## Basic Information

- **Project Name**: flutter_dark_mode_demo
- **Description**: flutter UI适配 明/暗模式 的展示Demo
- **Primary Language**: Dart
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-09-01
- **Last Updated**: 2023-09-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Flutter适配多主题模式（暗黑模式） flutter_dark_mode_demo


## 步骤

该Demo依赖通过Provider做主题的状态管理
大致工作如下：

1. 定义颜色常量（ConstThemeColors类中），以及供UI调用的适配多模式的颜色枚举（AppThemeColor类）

2. 定义主题相关的配置数据（ThemeData实例），参考theme_datas.dart文件

3. MaterialApp配置

```
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider.value(value: ThemeSettingProvider())
      ],
      child: Consumer<ThemeSettingProvider>(
        builder: (context, themeSettingProvider, _) {
          return MaterialApp(
            title: 'Flutter Demo',
            debugShowCheckedModeBanner: false,
            theme: themeSettingProvider.mode == AppThemeMode.light ? kAppLightThemeData : kAppDarkThemeData,
            home: const MyHomePage(title: 'Flutter Demo Home Page'),
          );
        },
      ),
    );
  }
}

```

4. 修改主题

```
class ThemeSettingProvider extends ChangeNotifier {
  static const String _kLocalThemeModeKey = "sp_key_app_theme";

  ThemeSettingProvider() {
    int? v = SpUtil.getInt(_kLocalThemeModeKey);
    _mode = AppThemeModeExtension.appThemeMode(v);
  }

  //当前模式
  AppThemeMode _mode = AppThemeMode.light;
  AppThemeMode get mode => _mode;
  set mode(AppThemeMode value) {
    if (_mode == value) return;

    //修改状态
    _mode = value;
    notifyListeners();
    //更改本地存储
    SpUtil.putInt(_kLocalThemeModeKey, value.value);
  }
}
```

## 效果

![运行效果](./demo.mp4)