Flutter学习-GetX-06 主题与本地化

本文主要介绍下主题与本地化的操作

我们的app在使用的过程通常会选择默认语言或者切换下暗黑模式，算是比较常用的操作，这里介绍下原生操作和Getx。

1. 主题

主题样式通常会在统一设置一些样式，MaterialApp中设置theme，类型为ThemeData

theme: ThemeData.light(),

theme: ThemeData.dark(),

当然你也可以选择自己设置ThemeData，包括导航栏主题，按钮主题等

自己设置一些全局变量方便统一修改

有时候我们会在特殊时候设置一些置灰的主题使用ColorFiltered包裹设置colorFilter

return ColorFiltered(

    colorFilter: const ColorFilter.mode(Colors.grey, BlendMode.color),
    child: refreshScaffold(child:  GetMaterialApp(
      title: 'Flutter Template Project',
      initialRoute: AppRoutes.scaffold, /// app 入口
      enableLog: const bool.fromEnvironment('dart.vm.product'),
      unknownRoute: unknownRoute,
      getPages: appRoutes,
      builder: EasyLoading.init(),
      theme: ThemeConfig.themeData,
    ))

请不要使用比GetMaterialApp更高级别的widget来更新主题，这可能会造成键重复。很多人习惯于创建一个ThemeProvider的widget来改变应用主题，这在GetX™中是绝对没有必要的。

你可以创建你的自定义主题，并简单地将其添加到Get.changeTheme中，而无需任何模板。

Get.changeTheme(ThemeData.light());

如果你想在onTap中创建类似于改变主题的按钮，你可以结合两个GetX™ API来实现。

• 检查是否使用了深色的 "Theme "的API，以及 "Theme "更改API。
• 而Theme Change API，你可以把下面的代码放在onPressed里。

Get.changeTheme(Get.isDarkMode? ThemeData.light(): ThemeData.dark());

当.darkmode被激活时，它将切换到light主题，当light主题被激活时，它将切换到dark主题。

2. 本地化

翻译被保存为一个简单的键值字典映射。 要添加自定义翻译，请创建一个类并扩展翻译。

import 'package:get/get.dart';

class Messages extends Translations {
  @override
  Map<String, Map<String, String>> get keys => {
        'zh_CN': {
          'hello': '你好 世界',
        },
        'de_DE': {
          'hello': 'Hallo Welt',
        }
      };
}

使用 只要将.tr追加到指定的键上，就会使用Get.locale和Get.fallbackLocale的当前值进行翻译。 js

Text('title'.tr);

• 语言

传递参数给GetMaterialApp来定义语言和翻译。

return GetMaterialApp(
    translations: Messages(), // 你的翻译
    locale: Locale('zh', 'CN'), // 将会按照此处指定的语言翻译
    fallbackLocale: Locale('en', 'US'), // 添加一个回调语言选项，以备上面指定的语言翻译不存在
);

• 改变语言

调用Get.updateLocale(locale)来更新语言环境。然后翻译会自动使用新的locale。

var locale = Locale('en', 'US');
Get.updateLocale(locale);

• 系统语言 要读取系统语言，可以使用window.locale。

import 'dart:ui' as ui;

return GetMaterialApp(
    locale: ui.window.locale,
);

不使用Get的话，使用系统本地化

locale: const Locale('zh', 'CH'),
localizationsDelegates: const [
  GlobalCupertinoLocalizations.delegate,
  GlobalMaterialLocalizations.delegate,
  GlobalWidgetsLocalizations.delegate,
],
supportedLocales: const [
  Locale('zh', 'CH'),
],

pubspec.yaml 添加依赖

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:

3. 小结

可以发现GetX在主题和本地化更加方便，同时方便我们实现更改，避免使用系统的通知。