Flutter国际化翻译插件icapps_translations的使用

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

Flutter国际化翻译插件icapps_translations的使用

icapps_translations 是一个Dart包，用于从icapps翻译工具自动下载翻译。其余的实现由 locale_gen 完成。以下是详细的设置和使用说明。

依赖添加

首先，在 pubspec.yaml 文件中添加依赖：

dependencies:
  sprintf: ^6.0.2

dev_dependencies:
  icapps_translations: <latest-version>

确保将您的语言文件夹添加到Flutter项目的资源中：

flutter:
  assets:
    - assets/locale/

接着，添加 icapps_translations 的配置以获取最新的翻译：

icapps_translations:
  api_key: 'enter-your-api-key' # 对于新的翻译工具，这是bearer令牌
  project_id: 'optional project id' # 要使用新的翻译工具，请在此输入项目ID
  default_language: 'nl'
  languages: ['en', 'nl']
  locale_assets_path: 'assets/locale/' # 这是您的JSON文件应保存的位置。
  assets_path: 'assets/locale/' # 这是在Flutter应用程序中您的JSON文件所在的位置。
  nullsafety: true # 生成空安全兼容代码。默认为false

您也可以通过环境变量设置API密钥和/或项目ID：

export API_KEY_ICAPPS_TRANSLATIONS=your_api_key_here
export PROJECT_ID_ICAPPS_TRANSLATIONS=your_project_id_here

使用命令运行包

使用Flutter运行

flutter packages pub run icapps_translations

使用Dart运行

pub run icapps_translations

示例代码

下面是一个简单的示例演示如何在Flutter应用中使用此包：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Localization.load(locale: Locale('en'));
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: Localization.translation('app_title')),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(Localization.translation('welcome_message')),
          ],
        ),
      ),
    );
  }
}

版本迁移指南

  • 从9.0.0以下版本迁移到9.0.0及以上版本：不再支持静态访问翻译，需要手动管理本地化实例。
  • 从7.0.0以下版本迁移到7.0.0及以上版本：无需再提供上下文来访问翻译，初始化/更改区域设置的方式也有所变化。

支持的功能

  • 参数支持（字符串和数字）
  • 复数形式支持

通过以上步骤，您可以轻松地在Flutter应用中集成多语言支持，并且可以方便地管理和更新您的翻译文件。


更多关于Flutter国际化翻译插件icapps_translations的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter国际化翻译插件icapps_translations的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用icapps_translations插件进行国际化翻译的代码示例。

1. 添加依赖

首先，你需要在pubspec.yaml文件中添加icapps_translations依赖：

dependencies:
  flutter:
    sdk: flutter
  icapps_translations: ^最新版本号  # 请替换为最新版本号

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

2. 设置翻译文件

在你的项目根目录下创建一个assets/translations文件夹，并在其中添加翻译文件。例如，你可以创建en.json和zh.json文件：

assets/translations/en.json

{
  "welcome_message": "Welcome to our app!",
  "goodbye_message": "Goodbye!"
}

assets/translations/zh.json

{
  "welcome_message": "欢迎来到我们的应用！",
  "goodbye_message": "再见！"
}

3. 配置pubspec.yaml

在pubspec.yaml中配置翻译文件路径：

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

4. 初始化翻译插件

在你的main.dart文件中初始化icapps_translations插件：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      localizationsDelegates: [
        // 添加翻译委托
        IcappsTranslations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en'),
        const Locale('zh'),
      ],
      locale: Locale('en'), // 默认语言
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final translations = IcappsTranslations.of(context);

    return Scaffold(
      appBar: AppBar(
        title: Text(translations?.translate('welcome_message') ?? 'No Translation'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              translations?.translate('welcome_message') ?? 'No Translation',
              style: TextStyle(fontSize: 24),
            ),
            ElevatedButton(
              onPressed: () {
                // 切换语言示例
                setState(() {
                  Locale currentLocale = Localizations.localeOf(context);
                  if (currentLocale.languageCode == 'en') {
                    IcappsTranslations.setLocale(context, Locale('zh'));
                  } else {
                    IcappsTranslations.setLocale(context, Locale('en'));
                  }
                });
              },
              child: Text(
                translations?.translate('goodbye_message') ?? 'No Translation',
              ),
            ),
          ],
        ),
      ),
    );
  }
}

5. 切换语言

在上面的代码中，我们添加了一个按钮来切换语言。当用户点击按钮时，会检查当前语言并切换到另一种语言。

6. 运行项目

确保你已经按照上述步骤配置好项目后，运行flutter run来启动你的Flutter应用。你应该能看到应用根据当前语言显示相应的翻译文本，并且可以通过按钮切换语言。

这样，你就成功地在Flutter项目中使用icapps_translations插件进行国际化翻译了。

回到顶部