Flutter本地化插件localized的使用

Flutter本地化插件localized的使用

1. 简介

localized 是一个用于Flutter应用的本地化插件，它提供了字符串扩展函数 localized 以及翻译工具，帮助开发者轻松实现多语言支持。该插件可以生成JSON格式的本地化文件，并支持通过Google、Yandex和Microsoft的API进行自动翻译。

2. 功能特性

• 生成JSON本地化文件：提供脚本生成空的JSON文件，用于存放不同语言的字符串。
• 字符串扩展函数 localized：通过扩展 String 类，可以直接调用 localized 方法来获取当前语言环境下的字符串。
• 翻译工具：支持通过Google、Yandex和Microsoft的翻译API自动翻译JSON文件中的字符串。

3. 使用步骤

3.1 安装依赖

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

dependencies:
  localized: ^2.1.1

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

flutter pub get

3.2 生成本地化文件

使用以下命令生成指定语言的JSON文件（例如：德语、英语、俄语）：

flutter pub run localized:main -c -l en,de,ru

如果你想将生成的文件放在自定义目录中，可以使用 -d 参数指定目录：

flutter pub run localized:main -c -l en,de,ru -d res/localizations

生成的文件结构如下：

- assets
    - i18n
        - de.json
        - en.json
        - ru.json

或者如果你指定了自定义目录：

- res
    - localizations
        - de.json
        - en.json
        - ru.json

3.3 配置 pubspec.yaml

在 pubspec.yaml 文件中添加生成的本地化文件路径：

flutter:
  assets:
    - assets/i18n/

或者如果你使用了自定义目录：

flutter:
  assets:
    - res/localizations/

3.4 编写代码

3.4.1 导入库

在Dart文件中导入 localized 库：

import 'package:localized/localized.dart';

3.4.2 设置支持的语言

创建一个 Locale 列表，包含你想要支持的语言：

final locales = [
  Locale('de', 'DE'),
  Locale('en', 'EN'),
  Locale('ru', 'RU'),
];

3.4.3 配置 MaterialApp

在 MaterialApp 中设置 supportedLocales 和 localizationsDelegates：

class MyApp extends StatelessWidget {
  final locales = [
    Locale('de', 'DE'),
    Locale('en', 'EN'),
    Locale('ru', 'RU'),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      supportedLocales: locales,
      localizationsDelegates: [
        GlobalCupertinoLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        LocalizationService.delegate(locales: locales),
      ],
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

3.4.4 使用 localized 函数

在需要显示文本的地方，使用 localized 函数来获取当前语言环境下的字符串：

Text('title'.localized(context)), // 根据设备语言显示不同的标题

完整示例代码如下：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:localized/localized.dart';

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

class MyApp extends StatelessWidget {
  final locales = [
    Locale('de', 'DE'),
    Locale('en', 'EN'),
    Locale('ru', 'RU'),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      supportedLocales: locales,
      localizationsDelegates: [
        GlobalCupertinoLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        LocalizationService.delegate(locales: locales),
      ],
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('title'.localized(context)), // 根据设备语言显示不同的标题
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'amount_of_clicks'.localized(context), // 根据设备语言显示不同的点击次数提示
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'increase'.localized(context), // 根据设备语言显示不同的按钮提示
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

4. 自动翻译

localized 插件还支持通过API自动翻译JSON文件中的字符串。你可以选择使用Google、Yandex或Microsoft的翻译服务。

4.1 使用Google Cloud Translator

flutter pub run localized:main -t -l ru,en,de -p Google -k YOUR_GOOGLE_API_KEY -n MAXIMUM_BUFFER_NUMBER

4.2 使用Yandex Translator

flutter pub run localized:main -t -l ru,en,de -p Yandex -f YOUR_YANDEX_FOLDER_ID -n MAXIMUM_BUFFER_NUMBER -i YOUR_YANDEX_IAM_TOKEN

4.3 使用Microsoft Translator

flutter pub run localized:main -t -l ru,en,de -p Microsoft -m YOUR_MICROSOFT_KEY -r YOUR_REGION -n 100