Flutter国际化插件arbify的使用

描述

arbify 是一个用于支持 Flutter 应用程序国际化（i18n）的包，它利用了 intl 包并结合了 Arbify。以下是详细的使用说明。

使用方法

1. 安装 arbify 工具

首先，确保你已经安装了 arbify 命令行工具。你可以通过以下命令安装：

flutter pub global activate arbify

安装完成后，可以运行以下命令查看帮助信息：

flutter pub run arbify:download --help

输出结果如下：

Arbify download command-line utility.
-h, --help                显示此帮助消息。
-i, --[no-]interactive    是否允许命令行工具交互式操作。
                          （默认开启）
-s, --secret=<secret>     用于认证 Arbify API 的密钥。
                          覆盖 .secret.arbify 文件中的密钥。

2. 配置 pubspec.yaml

在项目的 pubspec.yaml 文件中添加 arbify 配置。例如：

arbify:
  url: https://arb.company.com   # 替换为你的 Arbify 实例地址
  project_id: 17                 # 替换为你的项目 ID
  output_dir: lib/l10n           # 输出目录，默认值为 lib/l10n

3. 添加密钥到 .secret.arbify 文件

在项目根目录下创建一个 .secret.arbify 文件，并将从 Arbify 创建的密钥 复制粘贴到该文件中。例如：

echo "your-secret-key" > .secret.arbify

示例输出

执行以下命令下载翻译文件：

flutter pub run arbify:download

输出示例：

Output directory doesn't exist. Creating... done.
en                  Downloading... done.
pl                  Downloading... done.
mk                  Downloading... done.
Generating l10n.dart file... done 
Generating messages dart files... done

完整示例

1. 创建 Flutter 项目

flutter create arbify_example
cd arbify_example

2. 修改 pubspec.yaml

在 pubspec.yaml 中添加 arbify 和 intl 依赖：

dependencies:
  flutter:
    sdk: flutter
  arbify: ^0.0.6
  intl: ^0.16.1

然后运行以下命令获取依赖：

flutter pub get

3. 配置 arbify

在 pubspec.yaml 文件末尾添加以下配置：

arbify:
  url: http://localhost:8000
  project_id: 1
  output_dir: lib/l10n

4. 添加 .secret.arbify 文件

在项目根目录下创建 .secret.arbify 文件，并添加从 Arbify 获取的密钥：

echo "your-secret-key" > .secret.arbify

5. 运行 arbify:download

运行以下命令下载翻译文件：

flutter pub run arbify:download

如果尚未设置密钥，会提示输入：

We couldn't find an Arbify secret. Please create a secret using
the URL below, paste it here and press Enter.

http://localhost:8000/account/secrets/create

Secret: your-secret-key

成功后，你会看到类似以下的输出：

Output directory doesn't exist. Creating... done.
en                  Downloading... done.
pl                  Downloading... done.
Generating l10n.dart file... done 
Generating messages dart files... done

同时会在项目中生成以下文件：

• .secret.arbify（已添加到 .gitignore）
• lib/l10n/l10n.dart

6. 修改 MaterialApp 配置

在 lib/main.dart 中配置 MaterialApp 支持多语言：

import 'package:flutter/material.dart';
import 'package:arbify_example/l10n/l10n.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      supportedLocales: S.delegate.supportedLocales,
      localizationsDelegates: [
        S.delegate,
      ],
      home: MyHomePage(),
    );
  }
}

7. 使用生成的消息

在 lib/main.dart 中使用生成的消息：

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(S.of(context).app_name), // 使用 app_name 消息
      ),
      body: Center(
        child: Text(S.of(context).button_tapped_message(_counter)), // 使用 button_tapped_message 消息
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => _counter++),
        child: Icon(Icons.add),
      ),
    );
  }
}

最终文件结构

pubspec.yaml

name: arbify_example
description: A new Flutter project.

publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  arbify: ^0.0.6
  intl: ^0.16.1

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

arbify:
  url: http://localhost:8000
  project_id: 1
  output_dir: lib/l10n # 默认值

lib/main.dart

import 'package:flutter/material.dart';
import 'package:arbify_example/l10n/l10n.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      supportedLocales: S.delegate.supportedLocales,
      localizationsDelegates: [
        S.delegate,
      ],
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(S.of(context).app_name), // 使用 app_name 消息
      ),
      body: Center(
        child: Text(S.of(context).button_tapped_message(_counter)), // 使用 button_tapped_message 消息
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => _counter++),
        child: Icon(Icons.add),
      ),
    );
  }
}