Flutter 应用服务：主题、暗黑、国际化、本地化-app_service库

在Flutter中，我们通常通过构建服务来实现贯穿整个应用生命周期的状态管理。例如，在实现用户认证功能时，可以创建一个Auth服务。类似地，还有许多其他场景，比如应用主题管理。对于主题、暗黑模式、国际化与本地化等场景，通常会实现一个AppService来集中管理这些方面。App Service库提供了一套全面的应用管理服务，同时提供了相关的UI组件和持久化解决方案。

App Service 是一个基于 GetX 的应用服务，提供应用级别的管理服务，如主题管理、深色模式管理和本地化管理。

你可以使用flutter pub add命令在你的项目中安装App Service的最新版本：

flutter pub add app_seivice

这将在项目的pubspec.yaml文件的 dependencies字段中添加app_seivice作为依赖，并隐式地运行一次flutter pub get。

在实际项目中，除了 AppService 外，可能还有许多其他需要管理的依赖项，因此我喜欢创建一个 injections.dart 文件来描述这些依赖项。
以下示例使用 GetIt 库来管理依赖项。您还可以根据自己的习惯使用其他依赖管理方案。

import 'package:app_service/app_service.dart';
import 'package:get_it/get_it.dart';/// 基于 Get it 库的依赖注入
class GetitInjection {static void init() {final GetIt i = GetIt.instance;AppService appService = AppService(supportedLanguages: const [LanguageEnum.zh,LanguageEnum.en,],defaultLang: LanguageEnum.zh,);i.registerLazySingleton<AppService>(() => appService); }
}

应用服务中的主题管理用于切换不同的颜色主题，每个主题包含两种模式，即深色模式和浅色模式。
库中内置了由 flex_color_scheme 生成的许多主题数据。

以下是内置主题表：

要切换主题，你可以使用AppService实例对象的setColorTheme对主题进行切换，该方法的类型签名为：

void setColorTheme(ColorThemesEnum themeEnum)

例如：

// 获取 AppService 实例
final AppService appService = GetIt.instance.get<AppService>();// 切换主题为 bigStoneTulip
appService.setColorTheme(ColorThemesEnum.bigStoneTulip);

你可以使用ThemeModal模态框组件来为用户提供更加直观的主题选择，例如：

const ThemeModal(),

它以一个主题图标的形式显示在页面上：

如果触摸或点击该图标，将会以对话框的形式为用户提供主题选择：

每一个主题将以其primaryColor色的圆形显示在该模态框中，被选中的主题对应的圆形有一个“√”号。

在 App Service 库中，Dark/Light 模式是同一主题下的两个子状态，本质上是定义了两组对应的主题数据。你可以直接在AppSeivice的单例中，通过 toggleDarkMode 方法切换暗黑模式：

// 获取 AppService 单例
final AppService appService = GetIt.instance.get<AppService>();
// 切换暗黑模式
appService.toggleDarkMode()

另外，实例对象appService上，用于设置暗黑/光亮的方法还有setDarkMode和setLightMode。

DarkModeSwitch 是一个可以直接使用的暗黑模式切换开关，你可以直接在代码中使用它。外观上，它看起来就像这样：

Messages是一个翻译容器，它接受一个列表，可以用来包含多个翻译。其类型签名为：

Messages Messages(List<Map<String, Map<String, String>>> translations
)

你应该在顶级组件 GetMaterialApp 中通过translations参数传入它，并且必须在列表中包含一个AppServiceMessages().keys，这是一份用于App Service的翻译文件。例如：

GetMaterialApp(translations: Messages([AppServiceMessages().keys,// 其它翻译HomeMessages().keys,]),
);

其中，HomeMessages是一个假定的自定义翻译文件，它看起来像这样：

import 'package:get/get.dart';class HomeMessages extends Translations {@overrideMap<String, Map<String, String>> get keys => {'zh_CN': {'home.appService_demo': 'AppService 演示',},'en': {'home.appService_demo': 'AppService Demo',},'ko_KR': {'home.appService_demo': 'AppService 데모',},'ja_JP': {'home.appService_demo': 'AppService デモ',},// More language translate...};
}

当然，依据项目的需要你可以定义更多这样的翻译文件，并在Messages的translations列表中加载。

实现国际化时，定义支持的多种语言是通过构造AppService的supportedLanguages参数指定的，它接受由多个LanguageEnum 枚举值所构成的列表。AppService还需要指定一个默认的语言。例如：

AppService appService = AppService(supportedLanguages: const [LanguageEnum.zh,LanguageEnum.en,LanguageEnum.fr,],defaultLang: LanguageEnum.zh,
);

其中，defaultLang的默认值为 LanguageEnum.en。这里的定义需要与顶层组件中的locale参数对应。

应用标题是不能使用GetX提供的.tr来实现翻译的，因为在顶层组件初始化完成之前该方法不可用。这在 Web 端的本地化切换效果尤为明显：

为了实现这种动态切换，你可以像我一样使用一个switch语句，下面是一个示例：

import 'package:app_service/app_service.dart';// ...
GetMaterialApp(// ...title: switch (Get.locale?.languageCode) {'zh' => 'AppService 演示','en' => 'AppService Demo','fr' => 'AppService démonstration','ja' => 'AppServiceデモ','ko' => 'App 서비스 데모','ar' => 'تطبيق AppService',_ => 'AppService Demo',},translations: Messages([AppServiceMessages().keys,HomeMessages().keys,]),locale: const Locale('zh', 'CN'),fallbackLocale: const Locale('en', 'US'),home: const HomeView(),
);

要切换语言，可以使用AppService实例对象上的updateLocale方法，该方法的类型签名为：

void updateLocale(LanguageEnum newLanguage)

例如：

appService.updateLocale(LanguageEnum.zh);

有两个组件可以用于显示一个语言选择菜单以切换本地语言，分别是LangSelectMenu和Wen。

其中，LangSelectMenu是一个普通的方形下拉按钮，例如：

const LangSelectMenu(),

看起来像这样：

Wen也是一个弹出菜单的按钮，只不过它以一个图标显示，这通常同于Header中：

const Wen()

看起来就像这样：

你可以自定义显示的图标，以及图标的大小，并且它可以是任何组件。

初始化用于从持久化的数据中读取用户上一次存储的数据。在AppService 实例上提供了一个init方法用于完成其自身的相关初始化工作。

在你的应用中，可以使用多种方式完成初始化，例如，下面的代码展示了通过顶层组件GetMaterialApp的onInit方法实现初始化：

// ...
void main() async {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});Future<void> onInit(BuildContext context) async {// Init AppServicefinal appService = GetIt.instance.get<AppService>();await appService.init();// ...Other initializations}@overrideWidget build(BuildContext context) {final appService = GetIt.instance.get<AppService>();return GetMaterialApp(// ...onInit: () async {await onInit(context);},);}
}

在 Web App 中，当前的 sharedPreferencesWeb 库通过 localStorage 实现键值对存储。如果改变 AppService 所管理的相关状态，这些变化将直接反映在浏览器的 localStorage 中：

你可以在https://github.com/jacklee1995/flutter_app_service/tree/master/example中找到 App Service 的示例应用。