Flutter本地化管理插件localization_helper的使用

发布于 1周前 作者 yuanlaile 来自 Flutter

Flutter本地化管理插件localization_helper的使用

这是用于实现Flutter应用本地化的命令行Dart应用程序。

[注意]:如果您正在对预构建的Flutter应用进行本地化,可能会发现json_creatorjson_translatorpub.dev上非常有用。

  • https://pub.dev/packages/json_creator
  • https://pub.dev/packages/json_translator

该包旨在帮助已经开发了一个Flutter应用并希望对其进行本地化的Flutter开发者。该包包括两种模式来实现Flutter应用的本地化:基本模式和完整模式。

基本模式包含:

  1. pubspec.yaml文件中导入必要的本地化库。
  2. 创建本地化配置文件。
  3. 运行生成本地化文件的命令。
  4. 将本地化委托添加到MaterialAppmain.dart文件中。

完整模式包含所有基本模式的功能,此外还包括:

  • 在每个包含*.arb文件生成键值的Dart文件中导入本地化文件,并将文本值替换为翻译后的键值。

使用方法

此程序已发布到pub.dev,因此您可以使用此包:

  1. 作为可执行文件通过运行以下命令:
dart pub global activate localization_helper

如果显示路径警告,您需要将高亮显示的目录添加到系统的“Path”环境变量中,以便允许可执行文件运行。添加目录后,运行以下命令。此命令将以基本模式运行程序:

localization_helper

要以完整模式运行程序,请执行以下命令:

localization_helper -i full

确认屏幕截图

程序运行时涉及的步骤

  1. 在需要实施本地化的项目目录中运行程序。
  2. 输入’y’以允许程序运行。
  3. 程序检测是否存在pubspec.yaml文件,并导入必要的本地化库。
  4. 输入位于指定路径的模板*.arb文件名称。
  5. 程序会在工作目录中创建一个名为l10n.yaml的本地化配置文件,并且还会在main.dart文件中添加本地化委托。
  6. 当以完整模式执行时,用户需要提供目录路径,以便用本地化调用替换每个Dart文件中的文本值(使用JSON_CREATOR生成)。

输出

输出显示在控制台上,其中包含每个执行的详细信息。

输出屏幕截图

额外信息

当在完整模式下使用时,此程序会将所有匹配的const Text小部件替换为具有非常量值的普通Text小部件。您可以使用以下正则表达式在搜索字段中删除包裹匹配的Text小部件的const关键字:

(const )(\w*[([]((\r?\n?).*){0,5}S.of\(context\))

在VS Code中替换为以下表达式:$2

建议逐个执行替换操作,以最小化意外错误的发生。

替换屏幕截图1

替换屏幕截图2

在处理arb文件进行本地化时,有一篇有趣的文章可能有所帮助。您可以查看:

使用该包并欢迎反馈!😊💖

完整示例

以下是完整的示例代码:

import 'package:localization_helper/src/localization_helper.dart' as localization_helper;

void main() {
  /// 此程序已发布到pub.dev,因此您可以使用此包:
  ///
  /// 1. 作为可执行文件通过运行以下命令:
  /// > dart pub global activate localization_helper
  /// > localization_helper

  localization_helper.main([]);
}

更多关于Flutter本地化管理插件localization_helper的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter本地化管理插件localization_helper的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用localization_helper插件进行本地化管理的一个示例。假设你已经有一个Flutter项目,并且已经添加了localization_helper依赖。

1. 添加依赖

首先,确保在pubspec.yaml文件中添加localization_helper依赖:

dependencies:
  flutter:
    sdk: flutter
  localization_helper: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

2. 创建本地化文件

在你的项目根目录下创建一个assets文件夹,并在其中创建一个locales文件夹。在locales文件夹中,为每个支持的语言创建相应的JSON文件,例如:

  • assets/locales/en.json
  • assets/locales/zh.json

en.json的内容示例:

{
  "welcome_message": "Welcome",
  "goodbye_message": "Goodbye"
}

zh.json的内容示例:

{
  "welcome_message": "欢迎",
  "goodbye_message": "再见"
}

3. 配置pubspec.yaml

pubspec.yaml中配置资源文件:

flutter:
  assets:
    - assets/locales/en.json
    - assets/locales/zh.json

4. 初始化Localization Helper

创建一个localization_service.dart文件来初始化Localization Helper:

import 'package:flutter/material.dart';
import 'package:localization_helper/localization_helper.dart';

class LocalizationService {
  static LocalizationService? _instance;
  late LocalizationHelper _localizationHelper;

  LocalizationService._internal();

  factory LocalizationService() {
    if (_instance == null) {
      _instance = LocalizationService._internal();
      _instance!._initialize();
    }
    return _instance!;
  }

  Future<void> _initialize() async {
    _localizationHelper = LocalizationHelper(
      startLocale: Locale('en'), // 默认语言
      supportedLocales: [
        Locale('en'),
        Locale('zh'),
      ],
      pathToLocalizations: 'assets/locales/',
      fallbackLocale: Locale('en'), // 回退语言
    );
    await _localizationHelper.loadLocalizations();
  }

  LocalizationsDelegate<S> get delegate<S>() {
    return _localizationHelper.delegate<S>();
  }

  Locale get currentLocale => _localizationHelper.currentLocale;

  set currentLocale(Locale locale) {
    _localizationHelper.currentLocale = locale;
  }
}

5. 在应用中使用本地化

main.dart文件中使用LocalizationService

import 'package:flutter/material.dart';
import 'localization_service.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  final localizationService = LocalizationService();
  runApp(
    LocalizedApp(
      localizationService: localizationService,
      child: MyApp(),
    ),
  );
}

class LocalizedApp extends StatelessWidget {
  final LocalizationService localizationService;

  LocalizedApp({required this.localizationService, required Widget child})
      : super(key: ValueKey('LocalizedApp'));

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        localizationService.delegate<MaterialLocalizations>(),
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: localizationService.supportedLocales,
      locale: localizationService.currentLocale,
      home: Builder(
        builder: (context) {
          return MyHomePage();
        },
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Localizations localizations = Localizations.of<Localizations>(context, nullOk: false);
    return Scaffold(
      appBar: AppBar(
        title: Text(localizations.welcomeMessage), // 访问本地化字符串
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 切换语言示例
            final LocalizationService localizationService = LocalizationService();
            localizationService.currentLocale = localizationService.currentLocale.languageCode == 'en' ? Locale('zh') : Locale('en');
            // 重新构建上下文(实际应用中可能需要更优雅的方案)
            Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (context) => MyApp()));
          },
          child: Text(localizations.goodbyeMessage),
        ),
      ),
    );
  }
}

extension Localizations on BuildContext {
  String get welcomeMessage => Localizations.of<S>(this, S)!.welcomeMessage!;
  String get goodbyeMessage => Localizations.of<S>(this, S)!.goodbyeMessage!;
}

class S {
  String? welcomeMessage;
  String? goodbyeMessage;

  S({this.welcomeMessage, this.goodbyeMessage});

  Map<String, dynamic> toMap() {
    return {
      'welcome_message': welcomeMessage,
      'goodbye_message': goodbyeMessage,
    };
  }

  factory S.fromJson(Map<String, dynamic> json) => S(
        welcomeMessage: json['welcome_message'],
        goodbyeMessage: json['goodbye_message'],
      );
}

注意:上面的代码示例中,S类用于映射JSON数据到Dart对象,但在实际使用中,你可能需要为每种语言创建一个具体的类,或者使用生成代码工具(如json_serializable)来处理JSON数据的序列化和反序列化。

以上是一个基本的示例,展示了如何在Flutter项目中使用localization_helper插件进行本地化管理。根据实际需求,你可能需要进一步调整和优化代码。

回到顶部