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_divider = 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_divider = 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 {/// 颜色keystatic 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 divider_key = 'divider';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],divider_key: [LightColor.color_divider, DarkColor.color_divider],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 divider => ColorUtil.getColor(ColorUtil.divider_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暗黑模式就完成了，希望对大家有所帮助。