Flutter本地化翻译插件flutter_loco

Flutter本地化翻译插件flutter_loco_translations的使用

flutter_loco_translations 是一个用于自动更新Flutter项目中翻译的CLI工具。它可以从 Localise.biz 平台获取翻译文件并将其保存到指定路径。

使用方法

要使用 flutter_loco_translations，您需要在命令行中运行以下命令：

dart run flutter_loco_translations --locales="en,en_CA,no" --asset_alias="flutter" --api_key="key" --path="lib/l10n" --filter="!Backend"

参数说明

locales：您希望加载的语言环境列表，用逗号分隔。重要提示：基础语言环境不应包含国家代码，并且语言环境必须以 “en_US” 这种格式书写。
asset_alias：来自 Localise.biz 的资产别名。
api_key：来自 Localise.biz 的API密钥。
path：相对于您运行脚本的位置，保存下载文件的路径。
filter：通过逗号分隔的标签名称过滤资产。使用 * 匹配任何标签，使用 ! 否定标签。

完整示例Demo

下面是一个完整的示例，展示了如何在Flutter项目中使用 flutter_loco_translations 插件进行本地化。

1. 配置 `pubspec.yaml`

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

dev_dependencies:
  flutter_loco_translations: ^latest_version

2. 创建 `l10n` 文件夹

在项目的 lib 目录下创建一个名为 l10n 的文件夹，用于存放生成的翻译文件。

mkdir lib/l10n

3. 获取 API 密钥和资产别名

4. 运行 CLI 工具

在终端中运行以下命令，将翻译文件从 Localise.biz 下载到 lib/l10n 文件夹中：

dart run flutter_loco_translations --locales="en,en_CA,no" --asset_alias="flutter" --api_key="your_api_key" --path="lib/l10n" --filter="!Backend"

5. 配置 `l10n.dart`

flutter_loco_translations 会自动生成 l10n.dart 文件，该文件包含了所有语言环境的翻译。您可以在 main.dart 中使用它来设置应用程序的语言环境。

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'generated/l10n.dart'; // 自动生成的文件

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      localizationsDelegates: [
        S.delegate, // 使用自动生成的 l10n 文件
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: S.delegate.supportedLocales, // 支持的语言环境
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(S.of(context).appTitle), // 使用翻译后的字符串
      ),
      body: Center(
        child: Text(S.of(context).welcomeMessage), // 使用翻译后的字符串
      ),
    );
  }
}

6. 添加翻译字符串

在 Localise.biz 平台上添加或编辑翻译字符串。例如，您可以添加以下字符串：

appTitle: 应用程序标题
welcomeMessage: 欢迎消息

这些字符串将会被 flutter_loco_translations 自动下载并生成到 l10n.dart 文件中。

7. 运行应用程序

最后，运行您的Flutter应用程序，查看不同语言环境下的翻译效果：

flutter run

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

phonegap100 1楼•8 天前

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

当然，以下是一个关于如何使用Flutter本地化翻译插件 flutter_loco_translations 的代码案例。这个插件可以帮助你在Flutter应用中实现多语言支持。

1. 添加依赖

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

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

然后运行 flutter pub get 来获取依赖。

2. 配置 Loco 配置文件

创建一个 loco.yaml 文件来配置 Loco 项目的相关信息，例如 API 密钥和项目 ID：

loco:
  apiKey: 'YOUR_LOCO_API_KEY'  # 替换为你的Loco API密钥
  projectId: 'YOUR_PROJECT_ID'  # 替换为你的Loco项目ID

3. 初始化 Loco

在你的应用入口文件（通常是 main.dart）中初始化 Loco：

import 'package:flutter/material.dart';
import 'package:flutter_loco_translations/flutter_loco_translations.dart';
import 'loco.yaml';  // 确保引入你的loco配置文件

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Loco.initialize();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      localizationsDelegates: [
        LocoDelegates.all(),  // 添加Loco本地化委托
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: Loco.allLocales,  // 使用Loco支持的所有语言环境
      locale: Loco.locale,  // 设置当前语言环境
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(loco('app.name')),  // 使用loco函数获取翻译后的文本
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              loco('welcome.message'),
              style: TextStyle(fontSize: 20),
            ),
            ElevatedButton(
              onPressed: () {
                // 切换语言环境示例
                Loco.setLocale(Locale('fr'));
                setState(() {});
              },
              child: Text('Switch to French'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 在Loco平台添加翻译

你需要登录Loco平台，为你的项目添加翻译。确保翻译文件已经上传并包含你需要的键，例如 app.name 和 welcome.message。

5. 运行应用

完成以上步骤后，运行你的Flutter应用。你应该能够看到应用根据当前设置的语言环境显示相应的翻译文本。

注意事项

确保你的Loco API密钥和项目ID正确无误。
在Loco平台上正确上传并管理你的翻译文件。
根据需要调整 locale 和 supportedLocales。

这个代码案例展示了如何使用 flutter_loco_translations 插件在Flutter应用中实现本地化翻译。希望这对你有所帮助！

Flutter本地化翻译插件flutter_loco_translations的使用