携手创作，一起生长！这是我参与「日新计划 8 月更文应战」的第9天，点击查看活动详情

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

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

1. 主题

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

theme: ThemeData.light(),

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

theme: ThemeData.dark(),

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

当然你也能够挑选自己设置ThemeData，包含导航栏主题，按钮主题等

Flutter学习-GetX-06 主题与本地化
自己设置一些全局变量便利一致修正

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

有时分咱们会在特别时分设置一些置灰的主题运用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,
    ))

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

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

你能够创建你的自定义主题，并简略地将其增加到Get.changeTheme中，而无需任何模板。

Get.changeTheme(ThemeData.light());

假如你想在onTap中创建类似于改动主题的按钮，你能够结合两个GetX™API来实现。

  • 查看是否运用了深色的 “Theme “的API，以及 “Theme “更改API。
  • 而ThemeChange 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在主题和本地化愈加便利，一起便利咱们实现更改，防止运用体系的通知。