# flutter_dark_mode_getx_demo

**Repository Path**: lucifer_c/flutter_dark_mode_getx_demo

## Basic Information

- **Project Name**: flutter_dark_mode_getx_demo
- **Description**: flutter适配多主题模式，该demo项目依赖getx
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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


## 步骤

该Demo依赖getx框架，通过getx提供的方式做适配
大致工作如下：

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

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

3. GetMaterialApp配置

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

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(brightness: Brightness.light),
      darkTheme: ThemeData(brightness: Brightness.dark),
      themeMode: AppThemeModel.getLocalThemeMode(),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

```

4. 修改主题，参考AppThemeModel

```
/*切换模式*/
static changeMode(AppThemeMode mode) {
  ThemeMode curMode = getLocalThemeMode();
  ThemeMode targetMode = mode.themeMode;
  if (targetMode == curMode) {
    return;
  }

  //Get更新主题
  ThemeData themeData;
  if (targetMode == ThemeMode.system) {
    themeData = Get.isDarkMode ? kAppDarkThemeData : kAppLightThemeData;
  } else {
    themeData = targetMode == ThemeMode.dark ? kAppDarkThemeData : kAppLightThemeData;
  }
  Get.changeThemeMode(targetMode);
  Get.changeTheme(themeData);
  Future.delayed(const Duration(milliseconds: 200),(){
    Get.forceAppUpdate();
  });
  //更新本地存储
  SpUtil.putInt(_kLocalThemeModeKey, mode.value);
}
```

## 效果

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