Flutter国际化代码生成插件i18next_code_gen的使用

Flutter国际化代码生成插件i18next_code_gen的使用

pub package

一个支持代码生成的插件，用于i18next。

开始使用

在build.yaml文件中添加配置：

targets:
  $default:
    builders:
      i18next_code_gen:
        options:
          localizations: lib/i18n/en-US/*.json

将en-US替换为主语言。还可以添加out选项以更改输出文件。默认文件为lib/i18n/localizations.i18n.dart。另一个选项是添加flutter: false以支持仅Dart环境。

代码生成

运行一次代码生成器：

dart run build_runner build

或者添加监听器：

dart run build_runner watch

使用

通过导入/i18n/localizations.i18n.dart并调用Localization.of(context)来获取本地化。这会返回一个包含子变量和子子变量的对象，以便获取本地化信息。

支持的系统

支持所有Dart和Flutter环境。

示例代码

示例文件

import 'package:example/i18n/localizations.i18n.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:i18next/i18next.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(final BuildContext context) {
    const locale = Locale('en', 'US'); // 设置主语言
    return MaterialApp(
      title: 'I18CodeGen Demo',
      theme: ThemeData(),
      darkTheme: ThemeData.dark(),
      localizationsDelegates: [
        ...GlobalMaterialLocalizations.delegates,
        I18NextLocalizationDelegate(
          locales: const [locale], // 设置语言环境
          dataSource: AssetBundleLocalizationDataSource(bundlePath: 'lib/i18n'), // 数据源路径
        ),
      ],
      home: Builder(
        builder: (final context) {
          final localizations = Localization.of(context); // 获取本地化对象
          return Scaffold(
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const SizedBox.shrink(),
                  Text(localizations.example.test), // 显示文本
                  Text(localizations.example.testInterpolation(test: 'test')), // 插值示例
                  Text(localizations.example.testInterpolationNested(test: {'test': 'Test2', 'test2': 'Test3'})), // 嵌套插值示例
                  Text(localizations.example.testFormatted(test: 'test4')), // 格式化示例
                  Text(localizations.example.testCount(count: 0)), // 计数示例
                  Text(localizations.example.testCount(count: 1)),
                  Text(localizations.example.testCount(count: 2)),
                  Text(localizations.example.testCountInterpolation(count: 0, test: 'test5')), // 计数插值示例
                  Text(localizations.example.testCountInterpolation(count: 1, test: 'test6')),
                  Text(localizations.example.testCountInterpolation(count: 2, test: 'test7')),
                  Text(localizations.example.testNestedOuter.testNestedInner), // 嵌套示例
                  Text(localizations.example.testNestedKeyInterpolation(test: 'test8')), // 嵌套键插值示例
                  const SizedBox.shrink(),
                ],
              ),
            ),
          );
        },
      ),
      locale: locale,
    );
  }
}

更多关于Flutter国际化代码生成插件i18next_code_gen的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter国际化代码生成插件i18next_code_gen的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


i18next_code_gen 是一个用于 Flutter 的代码生成插件，它可以帮助开发者在 Flutter 应用中实现国际化（i18n）。通过使用 i18next_code_gen，你可以将翻译文件（通常是 JSON 格式）转换为 Dart 代码，从而在应用中使用这些翻译。

以下是如何使用 i18next_code_gen 插件的步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  i18next: ^0.6.0

dev_dependencies:
  build_runner: ^2.1.0
  i18next_code_gen: ^0.6.0

2. 创建翻译文件

在项目的 assets 目录下创建一个 translations 文件夹，并在其中添加 JSON 格式的翻译文件。例如：

// assets/translations/en.json
{
  "hello": "Hello",
  "welcome": "Welcome, {{name}}!"
}

// assets/translations/es.json
{
  "hello": "Hola",
  "welcome": "Bienvenido, {{name}}!"
}

3. 配置 pubspec.yaml

确保在 pubspec.yaml 文件中正确配置了 assets：

flutter:
  assets:
    - assets/translations/

4. 创建 I18Next 类

在 lib 目录下创建一个 Dart 文件（例如 i18n.dart），并定义 I18Next 类：

import 'package:i18next/i18next.dart';

class I18Next {
  static final I18Next _instance = I18Next._internal();

  factory I18Next() {
    return _instance;
  }

  I18Next._internal();

  late I18NextTranslations translations;

  Future<void> loadTranslations() async {
    translations = await I18NextTranslations.load(
      assetPath: 'assets/translations/{{lng}}.json',
    );
  }
}

5. 生成代码

运行以下命令生成 Dart 代码：

flutter pub run build_runner build

这将会生成一个 i18n.g.dart 文件，其中包含了所有翻译的 Dart 代码。

6. 使用生成的代码

在你的应用中使用生成的代码：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await I18Next().loadTranslations();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final i18n = I18Next();
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter i18n Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(i18n.translations.translate('hello')),
            Text(i18n.translations.translate('welcome', {'name': 'John'})),
          ],
        ),
      ),
    );
  }
}

7. 切换语言

你可以通过更改 I18Next 实例的语言来切换应用的语言：

await I18Next().loadTranslations(language: 'es');
回到顶部