Flutter本地化插件localify的使用

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

Flutter本地化插件Localify的使用

Static Badge

Localify简化并加速了本地化过程,通过无缝地将来自Google表格和Notion等工具的协作数据转换为应用资源包(ARB),使本地化过程变得更加简单。

安装

要使用Localify,你需要在你的pubspec.yaml文件中添加它作为依赖项:

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  localify: ^0.0.1

然后运行以下命令来安装该插件:

dart pub add --dev localify

配置

要运行Localify,你可以通过两种方式创建配置:创建一个localify.yaml文件或直接在pubspec.yaml文件中添加配置。以下是配置的一个示例:

localify:
  output_dir: ./assets/i18n  # 指定输出文件的目录。默认路径是"./assets/i18n"
  output_extension: arb      # 选择"arb"或"json"
  google_sheets:             # 如果你使用Google表格
    credential_json_path: /path/to/your/google_sheets_credential.json  # 你的Google表格API凭证JSON文件路径
    spread_sheet_id: 1234567890ABCDEF1234567890ABCDEF  # 你要工作的Google表格ID
    sheet_name: Sheet1         # 你要解析的工作表名称
  or
  notion_database:           # 如果你使用Notion数据库
    database_key: 12345678-1234-1234-1234-1234567890AB  # 可以在URL中找到
    bearer_token: your_notion_bearer_token  # 必须在 https://www.notion.so/my-integrations 生成

特性

创建完配置后,你可以通过以下命令运行Localify:

生成

生成命令会创建一些文件来帮助你的本地化工作。运行以下命令来生成文件:

dart run localify generate

还可以使用-c标志来生成更紧凑的文件:

dart run localify generate -c

当使用-c选项时,你的i18n文件将会更加简洁,例如:

不使用-c:

{
  "hello": "Hello, {name}",
  "@hello": {
    "description": "say hello to 'name' in supported languages",
    "placeholders": {
      "name": {
        "example": "James",
        "type2": "text"
      }
    }
  }
}

使用-c:

{
  "hello": "Hello, {name}"
}

检查

此功能即将推出。它将作为一个检查器,帮助你通知项目中未使用的键值对。

未来特性

  • ❌ 添加命令check

示例代码

你可以选择以下任意一种方法:创建一个localify.yaml文件或直接在pubspec.yaml文件中添加配置,并运行以下命令来生成i18n文件:

dart run localify generate

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

1 回复

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


当然,以下是一个关于如何使用Flutter本地化插件localify的代码案例。这个案例将展示如何设置和使用localify进行应用本地化。

1. 添加依赖

首先,在pubspec.yaml文件中添加localify依赖:

dependencies:
  flutter:
    sdk: flutter
  localify: ^x.y.z  # 请将x.y.z替换为当前最新版本号

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

2. 创建资源文件

在你的Flutter项目的assets文件夹下创建一个locales文件夹,并在其中创建不同语言的JSON文件。例如:

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

en.json内容示例:

{
  "welcome_message": "Welcome to our app!",
  "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. 初始化Localify

在你的应用主文件中(通常是main.dart),初始化Localify

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Localify(
      // 设置默认语言
      defaultLocale: Locale('en'),
      // 设置支持的语言
      supportedLocales: [Locale('en'), Locale('zh')],
      // 设置资源文件的路径
      assetLoader: (locale) {
        switch (locale.languageCode) {
          case 'en':
            return 'assets/locales/en.json';
          case 'zh':
            return 'assets/locales/zh.json';
          default:
            return 'assets/locales/en.json'; // 默认返回英文
        }
      },
      child: MaterialApp(
        title: 'Localify Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      ),
    );
  }
}

5. 使用Localify进行本地化

在你的页面或组件中使用Localify.of(context)来获取本地化的字符串:

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(Localify.of(context).translate('welcome_message')),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              Localify.of(context).translate('welcome_message'),
              style: TextStyle(fontSize: 24),
            ),
            ElevatedButton(
              onPressed: () {
                // 切换到中文
                Localify.of(context).setLocale(Locale('zh'));
              },
              child: Text('切换到中文'),
            ),
            ElevatedButton(
              onPressed: () {
                // 切换回英文
                Localify.of(context).setLocale(Locale('en'));
              },
              child: Text('切换回英文'),
            ),
            Text(
              Localify.of(context).translate('goodbye_message'),
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}

6. 运行应用

现在你可以运行你的Flutter应用,并通过点击按钮来切换语言,查看本地化的效果。

这个案例展示了如何使用localify插件进行基本的本地化设置和使用。如果你的应用需要更复杂的本地化需求,例如复数形式、性别选择等,localify也提供了相应的API来满足这些需求。

回到顶部