Flutter GetX 之 暗黑模式

���们紧接上篇文章，今天继续讲解一下强大的 GetX 的另一个功能，就是 暗黑模式 ，在iOS 13开始苹果的应用慢慢的都开始适配 暗黑模式，andr。oid 也慢慢的 开始跟进，截止到目前，商店的大部分应用都已经完成了 暗黑模式 的适配。

（）

原生开发为我们提供对应的 API，那么Flutter呢？其实Flutter也为我们提供了，那就是Theme了，示例代码如下：

MaterialApp(      title: 'Flutter Demo',      themeMode: ThemeMode.system,      darkTheme: ThemeData(        primarySwatch: Colors.red,      ),      theme: ThemeData(        primarySwatch: Colors.blue,      ),      highContrastTheme: ThemeData(),      highContrastDarkTheme: ThemeData(),      home: MyHomePage(title: 'Flutter Demo Home Page'),    )

从上面代码可以看出，我们需要创建对应的主题颜色数据，具体都定义哪些我们可以查看ThemeData源码，这里就不做过多介绍了。下面我着重讲解一下GetX 如何完成暗黑模式的适配。

（）

还是老样子我们要使用GetX作为程序入口。

代码如下：

GetMaterialApp(      getPages: pages,      initialRoute: _getRouter,      theme: ThemeData(brightness: Brightness.light),      darkTheme: ThemeData(brightness: Brightness.dark),    );

其中theme： darkTheme：就是我们要使用的两个主题，一个是正常模式、另一个就是暗黑模式。

到这里暗黑模式就完成了入口配置，剩下的就是进行颜色适配了。

创建两个颜色管理类 light_color.dart 、dark_color.dart

一个是正常模式下颜色、另一个便是暗黑模式颜色。

light_dart.dart 代码如下：

import 'package:flutter/material.dart';class LightColor {  ///页面背景色  static const Color back_ground_color = Color(0xFFF5F5F5);  ///导航栏背景颜色  static const Color color_nav_bar_bg = Color(0xFFFFFFFF);  ///主要 分割线  static const Color color_pider = Color(0xFFEDEDED);  /// 进度颜色  static const Color color_progress = Color(0xFFE6E7E9);  /// 标题颜色  static const Color color_title = Color(0xFF323232);  /// 副标题颜色  static const Color color_sub_title = Color(0xFF555555);  /// 副标题颜色  static const Color color_scontent = Color(0xFF555555);  /// 文本颜色  static const Color color_text_77 = Color(0xFF777777);  /// 文本颜色  static const Color color_text_99 = Color(0xFF999999);  /// loading背景色  static const Color color_dialog_bg = Color(0xFFE6E7E9);  /// 文本颜色  static const Color color_light_grey_text = Color(0xFFE6E7E9);  /// 文本输入框提示颜色  static const Color color_text_hint = Color(0xFFE6E7E9);  ///按钮背景色  static const Color button_color = Color(0xFFFFFFFF);  ///导航标题颜色  static const Color nav_title_color = Color(0xFFFFFFFF);  ///主题色  static const Color theme_color = Color(0xFFFD6F25);  /// 红色  static const Color red_color = Color(0xFFFF3622);  ///蓝色  static const Color blue_color = Color(0xFF2268F2);  ///白色  static const Color white_color = Color(0xFFFFFFFF);  /// 黑色  static const Color black_color = Color(0xFF000000);  ///绿色  static const Color green_color = Color(0xFF06C88C);  ///黄色  static const Color yellow_color = Color(0xFFF5A623);  ///灰色  static const Color grey_color = Colors.grey;}

dark_color.dart 代码如下：

import 'package:flutter/material.dart';class DarkColor {  ///页面背景色  static const Color back_ground_color = Color(0xFF000000);  ///导航栏背景颜色  static const Color color_nav_bar_bg = Color(0xFF000000);  ///主要 分割线  static const Color color_pider = Color(0xFFF5F5F5);  /// 进度颜色  static const Color color_progress = Color(0xFF323232);  /// 标题颜色  static const Color color_title = Color(0xFFFFFFFF);  /// 副标题颜色  static const Color color_sub_title = Color(0xFFDDDDDD);  /// 副标题颜色  static const Color color_scontent = Color(0xFFDDDDDD);  /// 文本颜色  static const Color color_text_77 = Color(0xFFBBBBBB);  /// 文本颜色  static const Color color_text_99 = Color(0xFFAAAAAA);  /// 文本颜色  static const Color color_light_grey_text = Color(0xFFDDDDDD);  /// loading背景色  static const Color color_dialog_bg = Color(0xFFE6E7E9);  /// 文本输入框提示颜色  static const Color color_text_hint = Color(0xFF555555);  ///蓝色  static const Color button_color = Color(0xFF555555);  ///导航标题颜色  static const Color nav_title_color = Color(0xFF323232);  ///主题色  static const Color theme_color = Color(0xFFFD6F25);  /// 红色  static const Color red_color = Color(0xFFFF3622);  ///蓝色  static const Color blue_color = Color(0xFF2268F2);  ///白色  static const Color white_color = Color(0xFFFFFFFF);  /// 黑色  static const Color black_color = Color(0xFF000000);  ///绿色  static const Color green_color = Color(0xFF06C88C);  ///黄色  static const Color yellow_color = Color(0xFFF5A623);  ///灰色  static const Color grey_color = Colors.grey;}

下面便是创建根据不同模式下自动获取对应的颜色类 color_util.dart。

color_util.dart 代码如下：

import 'package:flutter/material.dart';import 'package:get/get.dart';import 'dark_color.dart';import 'light_color.dart';/// 颜色配置class ColorUtil {  /// 颜色key  static const String main_bg_key = 'main_bg';  static const String title_key = 'title';  static const String sub_title_key = 'sub_title';  static const String content_key = 'content';  static const String content_77_key = 'content_77';  static const String content_99_key = 'content_99';  static const String button_bg_key = 'button_bg';  static const String button_title_key = 'button_title';  static const String pider_key = 'pider';  static const String red_key = 'red';  static const String blue_key = 'blue';  static const String white_key = 'white';  static const String black_key = 'black';  static const String green_key = 'green';  static const String yellow_key = 'yellow';  static const String color_dialog_key = 'color_dialog';  static const String color_theme_key = 'color_theme';  static const String grey_key = 'color_grey';  static const String nav_title_color_key = 'nav_title_color';  /// 颜色值  static const _colors = {    main_bg_key: [LightColor.back_ground_color, DarkColor.back_ground_color],    title_key: [LightColor.color_title, DarkColor.color_title],    sub_title_key: [LightColor.color_sub_title, DarkColor.color_sub_title],    content_key: [LightColor.color_scontent, DarkColor.color_scontent],    content_77_key: [LightColor.color_text_77, DarkColor.color_text_77],    content_99_key: [LightColor.color_text_99, DarkColor.color_text_99],    button_bg_key: [LightColor.button_color, DarkColor.button_color],    button_title_key: [LightColor.white_color, DarkColor.white_color],    color_dialog_key: [LightColor.color_dialog_bg, DarkColor.color_dialog_bg],    pider_key: [LightColor.color_pider, DarkColor.color_pider],    color_theme_key: [LightColor.theme_color, DarkColor.theme_color],    red_key: [LightColor.red_color, DarkColor.red_color],    blue_key: [LightColor.blue_color, DarkColor.blue_color],    white_key: [LightColor.white_color, DarkColor.white_color],    black_key: [LightColor.black_color, DarkColor.black_color],    green_key: [LightColor.green_color, DarkColor.green_color],    yellow_key: [LightColor.yellow_color, DarkColor.yellow_color],    grey_key: [LightColor.grey_color, DarkColor.grey_color],    nav_title_color_key: [LightColor.nav_title_color, DarkColor.nav_title_color],  };  /// 取颜色值  static Color getColor(String key) {    final colors = _colors[key];    if (colors == null) {      return LightColor.color_title;    }    if (Get.isDarkMode == true) {      if (colors.length == 2) {        return colors[1];      } else {        return colors[0];      }    } else {      return colors[0];    }  }}

下面这个类是为了方便我们使用创建的一个类 get_color.dart 。

可选择是否使用，不是必须，我这也把对应的代码放到下面：

//对外调用import 'package:flutter/material.dart';import 'color_util.dart';class GetColor {  /// 主色  static get mainBg => ColorUtil.getColor(ColorUtil.main_bg_key);  /// title 标题  static get title => ColorUtil.getColor(ColorUtil.title_key);  /// subTitle 副标题  static get subTitle => ColorUtil.getColor(ColorUtil.sub_title_key);  /// content 内容  static get content => ColorUtil.getColor(ColorUtil.content_key);  /// buttonTitle 按钮标题  static get content_77 => ColorUtil.getColor(ColorUtil.content_77_key);  /// 导航标题颜色  static get nav_title_color => ColorUtil.getColor(ColorUtil.nav_title_color_key);  /// buttonTitle 按钮标题  static get content_99 => ColorUtil.getColor(ColorUtil.content_99_key);  /// buttonBg 按钮背景  static get buttonBg => ColorUtil.getColor(ColorUtil.button_bg_key);  /// buttonTitle 按钮标题  static get buttonTitle => ColorUtil.getColor(ColorUtil.button_title_key);  /// 下滑线颜色  static get pider => ColorUtil.getColor(ColorUtil.pider_key);  /// loading 背景色  static get loadingBg => ColorUtil.getColor(ColorUtil.color_dialog_key);  /// loading 背景色  static get theme => ColorUtil.getColor(ColorUtil.color_theme_key);  ///常用颜色值  /// 透明  static const Color transparent = Colors.transparent;  static get red => ColorUtil.getColor(ColorUtil.red_key);  static get blue => ColorUtil.getColor(ColorUtil.blue_key);  static get white => ColorUtil.getColor(ColorUtil.white_key);  static get black => ColorUtil.getColor(ColorUtil.black_key);  static get green => ColorUtil.getColor(ColorUtil.green_key);  static get yellow => ColorUtil.getColor(ColorUtil.yellow_key);  static get grey => ColorUtil.getColor(ColorUtil.grey_key);}

到此颜色管理类相关内容就完成了。

接来下就是颜色管理类的使用了。

代码如下：

Container(                  margin: EdgeInsets.only(left: m_all_12),                  alignment: Alignment.centerLeft,                  child: GlobalText("毫米波雷达", color: GetColor.white),                )

下面我们进行主动设置暗黑模式的启动 get_theme.dart 类。

代码如下：

import 'package:flutter/material.dart';import 'package:get/get.dart';///主题色配置 统一配置class GetTheme {  /// 正常模式主题设置  static ThemeData lightTheme = ThemeData(brightness: Brightness.light);  /// 黑暗模式主题设置  static ThemeData darkTheme = ThemeData(brightness: Brightness.dark);  ///设置黑暗模式  static void changeThemeMode({ThemeMode themeMode = ThemeMode.system}) {    /// 主题类型    Get.changeThemeMode(themeMode);    Future.delayed(const Duration(milliseconds: 200), () => Get.forceAppUpdate());    /// 注意样式设置//    switch (themeMode) {//      case ThemeMode.system://        if (Get.isDarkMode == true) {//          Get.changeTheme(darkTheme);//        } else {//          Get.changeTheme(lightTheme);//        }//        break;//      case ThemeMode.dark://        Get.changeTheme(darkTheme);//        break;//      case ThemeMode.light://        Get.changeTheme(lightTheme);//        break;//    }  }}

使用代码如下：

/// 设置暗黑模式GetTheme.changeThemeMode(ThemeMode.dark)

到此 GetX暗黑模式就完成了，希望对大家有所帮助。