Flutter国际化插件dynamic_i18n的使用

在您的应用中动态加载翻译文本。

开始使用

在 Dart 的 main() 函数中初始化 I18n：

void main() {
    // 初始化 I18n
    I18n.init(
        url: 'https://www.example.com',
        locale: 'hi',
        locales: ['en', 'hi', 'pa'],
    );

    runApp(MyApp());
}

现在你可以在代码的任何地方使用 I18n.builder：

Column(
    children: [
        // 示例 1: 使用 Text
        I18n.text('Who am I ?'), // 文本 'मैं कौन हूँ ?'

        // 示例 2: 使用 builder
        // 首先根据给定的语言环境构建
        // 在获取翻译后重新构建
        I18n.builder('Who am I ?', (translatedText) {
            return Text(translatedText);
        }),

        // 示例 3: 使用 childBuilder
        I18n.childBuilder(
            'Who am I ?',
            (translatedText, child) {
                return Column(
                children: [
                    Text(translatedText),
                    child, // 在第一次和第二次构建时保持相同
                ],
                );
            },
            Container(), // 将在重新构建时重用
        ),
    ],
);

服务器配置

将您的服务器设置为响应以下请求方式：

请求方法：GET

请求 URL：https://www.example.com/hi.json

响应

Content-Type: application/json

[
    {"en": "How are you ?", "hi": "आप कैसे हो ?"},
    {"en": "Who am I ?", "hi": "मैं कौन हूँ ?"}
]

对于单个翻译请求，库将以以下格式发送 POST 请求到您在 I18n.init 中提供的 URL。例如，它将是：

请求方法：POST

请求 URL：https://www.example.com/hi

{
    "en": sourceText,
    "target": targetLocale,
}

响应

Content-Type: application/json

{"en": "How are you ?", "hi": "आप कैसे हो ?"}

完整示例代码

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

// 状态fulWidget 示例 1
// 如果存在翻译则返回，否则在获取翻译后调用setState
class SomeStatefulWidget extends StatefulWidget {
  const SomeStatefulWidget({Key? key}) : super(key: key);

  [@override](/user/override)
  _SomeStatefulWidgetState createState() => _SomeStatefulWidgetState();
}

class _SomeStatefulWidgetState extends State<SomeStatefulWidget> {
  late I18n locale;

  [@override](/user/override)
  void initState() {
    locale = I18n(this);

    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Text(locale.get('Hello world')); // 显示翻译后的文本
  }
}

// 状态fulWidget 示例 2
// 通过扩展 I18nState 可以减少样板代码
class AnotherStatefulWidget extends StatefulWidget {
  const AnotherStatefulWidget({Key? key}) : super(key: key);

  [@override](/user/override)
  _AnotherStatefulWidgetState createState() => _AnotherStatefulWidgetState();
}

class _AnotherStatefulWidgetState extends I18nState<AnotherStatefulWidget> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Text(i18n('Hello world')); // 显示翻译后的文本
  }
}

// 无状态小部件示例
class SomeStatelessWidget extends StatelessWidget {
  const SomeStatelessWidget({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 示例 1: 使用 Text
        I18n.text('Who am I ?'), // 文本 'मैं कौन हूँ ?'

        // 示例 2: 使用 builder
        // 首先根据给定的语言环境构建
        // 在获取翻译后重新构建
        I18n.builder('Who am I ?', (translatedText) {
          return Text(translatedText);
        }),

        // 示例 3: 使用 childBuilder
        I18n.childBuilder(
          'Who am I ?',
          (translatedText, child) {
            return Column(
              children: [
                Text(translatedText),
                child, // 在第一次和第二次构建时保持相同
              ],
            );
          },
          Container(), // 将在重新构建时重用
        ),
      ],
    );
  }
}