Flutter国际化翻译插件xapptor_translation的使用

Flutter国际化翻译插件Xapptor Translation的使用

Xapptor Translation

pub package

翻译模块用于使用Google翻译服务并将值保存在本地存储中。

让我们开始吧

1 - 依赖它

在你的项目的pubspec.yaml文件中添加依赖：

dependencies:
    xapptor_translation: ^0.0.3

2 - 安装它

从命令行安装包：

flutter pub get

3 - 学习它像魔法一样简单

设置translation_stream和translation_stream_list变量
late TranslationStream translation_stream;
List<TranslationStream> translation_stream_list = [];
设置text_list变量并包含你的文本
List<String> text_list = [
    "Example text for traduction 1",
    "Example text for traduction 2",
    "Example text for traduction 3",
];
设置你的update_text_list函数
void update_text_list({
    required int index,
    required String new_text,
    required int list_index,
}) {
    text_list[index] = new_text;
    setState(() {});
}
初始化translation_stream和translation_stream_list变量
[@override](/user/override)
void initState() {
    translation_stream = TranslationStream(
        text_list: text_list,
        update_text_list_function: update_text_list,
        list_index: 0,
        active_translation: true,
    );
    translation_stream_list = [translation_stream];

    super.initState();
}
在Scaffold中设置顶部栏（可以包括语言选择器）
appBar: TopBar(
    background_color: Colors.blue,
    has_back_button: true,
    actions: <Widget>[
        Container(
        margin: EdgeInsets.only(right: 20),
        width: 150,
        child: LanguagePicker(
                translation_stream_list: translation_stream_list,
                language_picker_items_text_color: Colors.cyan,
            ),
        ),
    ],
    custom_leading: null,
    logo_path: "assets/images/logo.png",
),
调用已翻译的文本，例如text_list[0]
body: Center(
    child: Text(
        text_list[0],
        textAlign: TextAlign.center,
        style: TextStyle(
            color: Colors.black,
            fontSize: 40,
        ),
    ),
),

完整示例代码

class ExampleWidget extends StatefulWidget {
  [@override](/user/override)
  _ExampleWidgetState createState() => _ExampleWidgetState();
}

class _ExampleWidgetState extends State<ExampleWidget> {
    late TranslationStream translation_stream;
    List<TranslationStream> translation_stream_list = [];

    List<String> text_list = [
        "Example text for traduction 1",
        "Example text for traduction 2",
        "Example text for traduction 3",
    ];

    void update_text_list({
        required int index,
        required String new_text,
        required int list_index,
    }) {
        text_list[index] = new_text;
        setState(() {});
    }

    [@override](/user/override)
    void initState() {
        translation_stream = TranslationStream(
            text_list: text_list,
            update_text_list_function: update_text_list,
            list_index: 0,
            active_translation: true,
        );
        translation_stream_list = [translation_stream];

        super.initState();
    }

    [@override](/user/override)
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: TopBar(
                background_color: Colors.blue,
                has_back_button: true,
                actions: <Widget>[
                    Container(
                    margin: EdgeInsets.only(right: 20),
                    width: 150,
                    child: LanguagePicker(
                            translation_stream_list: translation_stream_list,
                            language_picker_items_text_color: Colors.cyan,
                        ),
                    ),
                ],
                custom_leading: null,
                logo_path: "assets/images/logo.png",
            ),
            body: Center(
                child: Text(
                    text_list[0],
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        color: Colors.black,
                        fontSize: 40,
                    ),
                ),
            ),
        );
    }
}

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

1 回复

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


xapptor_translation 是一个用于 Flutter 应用国际化的插件，它可以帮助你轻松地管理多语言翻译。以下是如何使用 xapptor_translation 的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  xapptor_translation: ^1.0.0  # 请使用最新版本

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

2. 创建翻译文件

在项目中创建一个 translations 文件夹，并在其中创建不同语言的翻译文件，例如：

  • translations/en.json
  • translations/es.json

每个文件的内容应该是 JSON 格式的键值对，例如：

translations/en.json:

{
  "hello": "Hello",
  "welcome": "Welcome to our app"
}

translations/es.json:

{
  "hello": "Hola",
  "welcome": "Bienvenido a nuestra aplicación"
}

3. 初始化翻译插件

在 main.dart 文件中初始化 xapptor_translation：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  await Translation.initialize(
    translationsPath: "assets/translations",
    defaultLanguage: "en",
    supportedLanguages: ["en", "es"],
  );

  runApp(MyApp());
}

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

4. 使用翻译

在你的应用中使用 Translation.of(context) 来获取翻译文本：

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

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

5. 切换语言

你可以通过 Translation.setLanguage 方法来切换应用的语言：

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

class LanguageSwitcher extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: Translation.of(context).currentLanguage,
      onChanged: (String? newValue) {
        if (newValue != null) {
          Translation.setLanguage(context, newValue);
        }
      },
      items: Translation.of(context).supportedLanguages.map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
    );
  }
}
回到顶部