Flutter本地化管理插件flutter

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

简介

flutter_lokalise 是一个用于从 Lokalise 下载翻译包并将其转换为 .arb 文件的工具。通过这个插件，您可以轻松地将多语言支持集成到您的 Flutter 应用中。

使用方法

1. 配置 `pubspec.yaml`

首先，在 pubspec.yaml 文件中添加 flutter_lokalise 作为开发依赖，并配置相关参数：

dev_dependencies:
  flutter_lokalise: any

flutter_lokalise:
  project_id: YOUR_LOKALISE_PROJECT_ID
  api_token: YOUR_LOKALISE_API_TOKEN
  include_tags:
    - tag1
    - tag2
    
flutter_intl:
  enabled: true

project_id: 您在 Lokalise 中的项目 ID。
api_token: 您的 Lokalise API Token。
include_tags: 您希望包含的标签列表（可选）。

2. 运行 `flutter_lokalise`

接下来，您可以通过以下命令运行 flutter_lokalise：

flutter pub run flutter_lokalise \
  [--working-directory <path>] \
  [--api-token <token>] \
  [--project-id <project_id>] \
  <command>

--working-directory: 指定工作目录（可选）。
--api-token: 指定 API Token（如果未在 pubspec.yaml 中配置）。
--project-id: 指定项目 ID（如果未在 pubspec.yaml 中配置）。
<command>: 您要执行的命令，例如 download。

您还可以通过设置全局命令或创建别名来简化命令的调用：

# 设置全局命令
flutter pub global activate flutter_lokalise

# 创建别名
alias flutter_lokalise="flutter pub run flutter_lokalise"

# 现在可以直接使用
flutter_lokalise <command>

3. 下载翻译文件

flutter_lokalise 支持 download 命令，用于下载 .arb 格式的翻译文件：

flutter_lokalise download \
  [--output <path>] \
  [--include-tags <tag1,tag2,...>]

--output: 指定输出目录（可选，默认为 lib/l10n）。
--include-tags: 指定要包含的标签（可选）。

例如，如果您只想下载特定标签的翻译文件，可以使用以下命令：

flutter_lokalise download --include-tags tag1,tag2

如果不指定任何参数，flutter_lokalise 将使用 pubspec.yaml 中的配置下载所有翻译文件：

flutter_lokalise download

示例代码

以下是一个简单的 main.dart 示例，展示了如何在 Flutter 应用中使用本地化功能：

import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // 启用本地化
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      supportedLocales: AppLocalizations.supportedLocales,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context)!.title),
      ),
      body: Center(
        child: Text(AppLocalizations.of(context)!.welcomeMessage),
      ),
    );
  }
}

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

caililin 1楼•8 天前

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

当然，以下是一个关于如何使用 flutter_lokalise 插件进行Flutter应用本地化管理的代码示例。flutter_lokalise 是一个用于从 Lokalise API 获取本地化资源的 Flutter 插件。

1. 添加依赖

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

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

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

2. 配置 Lokalise API 密钥

你需要从 Lokalise 获取 API 密钥，并在你的 Flutter 应用中配置它。通常，可以将这个密钥存储在环境变量或 .env 文件中。

3. 初始化插件并下载本地化资源

接下来，在你的 Flutter 应用中初始化 flutter_lokalise 插件，并下载本地化资源。

import 'package:flutter/material.dart';
import 'package:flutter_lokalise/flutter_lokalise.dart';
import 'dart:async';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  FlutterLokalise? lokalise;
  late Locale currentLocale;

  @override
  void initState() {
    super.initState();
    
    // 初始化 Lokalise 插件
    lokalise = FlutterLokalise(
      apiKey: 'YOUR_LOKALISE_API_KEY', // 请替换为你的 Lokalise API 密钥
      projectId: 'YOUR_LOKALISE_PROJECT_ID', // 请替换为你的 Lokalise 项目ID
      fileFormat: 'json', // Lokalise 支持的文件格式，如 'json', 'arb', 'string', 'yaml'
      defaultLanguage: 'en', // 默认语言
    );

    // 监听语言更改事件
    lokalise!.onLanguageChanged!.listen((Locale locale) {
      setState(() {
        currentLocale = locale;
      });
    });

    // 下载本地化资源
    _downloadLocalizations();

    // 设置初始语言
    currentLocale = Locale('en'); // 或者其他默认语言
  }

  Future<void> _downloadLocalizations() async {
    try {
      await lokalise!.downloadAllFiles();
    } catch (e) {
      print('Failed to download localizations: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Lokalise Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      locale: currentLocale,
      localizationsDelegates: lokalise!.delegates,
      supportedLocales: lokalise!.supportedLocales,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Lokalise Demo'),
        ),
        body: Center(
          child: Text(
            lokalise!.translate('welcome_message') ?? 'Default Message', // 替换为你在 Lokalise 中定义的键
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

4. 在 Lokalise 中添加翻译

确保你已经在 Lokalise 项目中添加了相应的翻译文件，并且每个文件中都包含了相应的键和翻译值。例如，welcome_message 键在不同语言下的翻译。

5. 运行应用

运行你的 Flutter 应用，你应该能够看到根据当前设置的语言显示的本地化文本。

注意事项

错误处理：在实际应用中，你可能需要更详细的错误处理逻辑。
动态加载：如果你的应用需要动态加载语言资源（例如，在用户更改语言设置后），你可以调用 lokalise!.downloadLanguageFiles(Locale('xx')) 来下载特定语言的资源。
环境变量：建议使用 .env 文件来管理敏感信息，如 API 密钥。

这个示例展示了如何使用 flutter_lokalise 插件进行基本的本地化资源管理和文本翻译。根据你的具体需求，你可能需要调整这个示例代码。

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