Flutter多语言翻译插件universal_translator的使用

Flutter多语言翻译插件universal_translator的使用

1. 插件简介

universal_translator 是一个Flutter插件，用于在应用中实现多语言翻译功能。它通过调用第三方API（如RapidAPI的NLP翻译服务）来实现文本的实时翻译，并且支持缓存机制以提高性能。

2. 使用步骤

2.1 添加依赖

在 pubspec.yaml 文件中添加 universal_translator 依赖：

dependencies:
  # 功能性依赖
  universal_translator: ^{latest version}  # 请检查最新版本
  flutter:
    sdk: flutter
2.2 导入必要的库

在Dart代码中导入 universal_translator：

import 'package:universal_translator/universal_translator.dart';
2.3 初始化插件

在应用启动时，需要初始化 UniversalTranslatorInit，并配置翻译API的相关参数。建议在 main.dart 中进行初始化操作。

void main() {
  // 确保在运行应用之前初始化Flutter绑定
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 翻译API的URL
    String path = "https://nlp-translation.p.rapidapi.com/v1/translate";
    
    // API请求头，包含API密钥
    Map<String, dynamic> headers = {"x-rapidapi-key": "MY_API_KEY"};

    // 定义响应处理函数，提取翻译后的文本
    String responsePattern(Response response) {
      if (response.statusCode == 200 && response.data['status'] == 200) {
        dynamic data = response.data;
        return data["translated_text"][data["to"]];
      }
      return '';  // 如果翻译失败，返回空字符串
    }

    // 定义请求体的格式
    Map<String, dynamic> bodyPattern(String text, Locale to) => {
      "text": text,
      "to": to.toLanguageTag(),  // 目标语言
      "from": "pt"  // 源语言，这里假设为葡萄牙语
    };

    // 初始化翻译插件
    return UniversalTranslatorInit(
      path,  // 翻译API的URL
      headers: headers,  // 请求头
      method: HttpMethod.get,  // HTTP请求方法
      bodyPattern: bodyPattern,  // 请求体格式
      responsePattern: responsePattern,  // 响应处理函数
      translateTo: Locale('en'),  // 默认翻译目标语言为英语
      cacheDuration: Duration(days: 13),  // 缓存有效期为13天
      // automaticDetection: true,  // 如果不知道用户的语言，可以启用自动检测
      builder: () => MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(title: 'Página inicial de demonstração do Flutter'),
      ),
    );
  }
}
2.4 基本用法

在需要翻译的 Text 组件上使用 .translate() 方法即可实现翻译。例如：

Scaffold(
  appBar: AppBar(
    title: Text(widget.title ?? "").translate(true),  // 翻译标题
  ),
  body: Center(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text("Original: Meu texto traduzido", textAlign: TextAlign.center),
        Text("Meu texto traduzido", textAlign: TextAlign.center).translate(),  // 翻译文本
        SizedBox(height: 20),
        Text("Original: Este texto mostra um placeholder diferente", textAlign: TextAlign.center),
        Text.rich(
          TextSpan(
            text: "primeiro ",
            children: [
              TextSpan(text: "primeiro.primeiro ", children: [
                TextSpan(
                  text: "primeiro.primeiro.primeiro ",
                  children: [
                    TextSpan(text: "primeiro.primeiro.primeiro.primeiro "),
                  ]),
                TextSpan(text: "primeiro.primeiro.segundo ")
              ]),
              TextSpan(text: "primeiro.segundo ", children: [
                TextSpan(text: "primeiro.segundo.primeiro "),
                TextSpan(text: "primeiro.segundo.segundo "),
                TextSpan(text: "primeiro.segundo.terceiro ")
              ])
            ],
          ),
          textAlign: TextAlign.center
        ).translate(true, "Place to Holder")  // 翻译富文本，并指定占位符
      ],
    ),
  ),
);

3. 完整示例Demo

以下是一个完整的示例代码，展示了如何使用 universal_translator 插件来实现多语言翻译功能：

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:universal_translator/universal_translator.dart';

void main() {
  // 确保在运行应用之前初始化Flutter绑定
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 翻译API的URL
    String path = "https://nlp-translation.p.rapidapi.com/v1/translate";
    
    // API请求头，包含API密钥
    Map<String, dynamic> headers = {"x-rapidapi-key": "MY_API_KEY"};

    // 定义响应处理函数，提取翻译后的文本
    String responsePattern(Response response) {
      if (response.statusCode == 200 && response.data['status'] == 200) {
        dynamic data = response.data;
        return data["translated_text"][data["to"]];
      }
      return '';  // 如果翻译失败，返回空字符串
    }

    // 定义请求体的格式
    Map<String, dynamic> bodyPattern(String text, Locale to) => {
      "text": text,
      "to": to.toLanguageTag(),  // 目标语言
      "from": "pt"  // 源语言，这里假设为葡萄牙语
    };

    // 初始化翻译插件
    return UniversalTranslatorInit(
      path,  // 翻译API的URL
      headers: headers,  // 请求头
      method: HttpMethod.get,  // HTTP请求方法
      bodyPattern: bodyPattern,  // 请求体格式
      responsePattern: responsePattern,  // 响应处理函数
      translateTo: Locale('en'),  // 默认翻译目标语言为英语
      cacheDuration: Duration(days: 13),  // 缓存有效期为13天
      // automaticDetection: true,  // 如果不知道用户的语言，可以启用自动检测
      builder: () => MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(title: 'Página inicial de demonstração do Flutter'),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String? title;

  const MyHomePage({super.key, this.title});

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title ?? "").translate(true),  // 翻译标题
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("Original: Meu texto traduzido", textAlign: TextAlign.center),
            Text("Meu texto traduzido", textAlign: TextAlign.center).translate(),  // 翻译文本
            SizedBox(height: 20),
            Text("Original: Este texto mostra um placeholder diferente", textAlign: TextAlign.center),
            Text.rich(
              TextSpan(
                text: "primeiro ",
                children: [
                  TextSpan(text: "primeiro.primeiro ", children: [
                    TextSpan(
                      text: "primeiro.primeiro.primeiro ",
                      children: [
                        TextSpan(text: "primeiro.primeiro.primeiro.primeiro "),
                      ]),
                    TextSpan(text: "primeiro.primeiro.segundo ")
                  ]),
                  TextSpan(text: "primeiro.segundo ", children: [
                    TextSpan(text: "primeiro.segundo.primeiro "),
                    TextSpan(text: "primeiro.segundo.segundo "),
                    TextSpan(text: "primeiro.segundo.terceiro ")
                  ])
                ],
              ),
              textAlign: TextAlign.center
            ).translate(true, "Place to Holder")  // 翻译富文本，并指定占位符
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用universal_translator插件来实现多语言翻译的示例代码。请注意，universal_translator是一个假设存在的插件名称，实际使用时可能需要根据具体的插件文档进行调整。假设该插件提供了基础的翻译功能，以下是如何集成和使用的示例。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加universal_translator依赖：

dependencies:
  flutter:
    sdk: flutter
  universal_translator: ^x.y.z  # 替换为实际的版本号

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

2. 初始化插件

在你的Flutter应用的入口文件（通常是main.dart）中初始化插件：

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

void main() {
  // 初始化插件
  UniversalTranslator.initialize();
  
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      // 添加语言支持
      localizationsDelegates: [
        // 添加universal_translator的本地化委托
        UniversalTranslator.localizationsDelegate,
        // 默认的委托，如GlobalMaterialLocalizations等
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: UniversalTranslator.supportedLocales,
      locale: Locale(UniversalTranslator.currentLocaleCode), // 设置为当前语言
      localeResolutionCallback: (locale, supportedLocales) {
        // 根据需要自定义语言解析逻辑
        for (var supportedLocale in supportedLocales) {
          if (supportedLocale.languageCode == locale?.languageCode ||
              supportedLocale.countryCode == locale?.countryCode) {
            return supportedLocale;
          }
        }
        return supportedLocales.first;
      },
    );
  }
}

3. 使用翻译功能

在你的页面或组件中使用翻译功能。假设插件提供了一个translate方法来获取翻译后的文本：

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _translatedText = '';

  @override
  void initState() {
    super.initState();
    // 获取翻译后的文本
    _fetchTranslatedText();
  }

  void _fetchTranslatedText() async {
    String key = 'hello_world'; // 假设这是你的翻译键
    String translatedText = await UniversalTranslator.translate(key);
    setState(() {
      _translatedText = translatedText;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Multi-Language Demo'),
      ),
      body: Center(
        child: Text(_translatedText),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 切换语言示例，假设切换到'fr'（法语）
          UniversalTranslator.setCurrentLocale('fr');
          // 更新UI
          setState(() {
            _fetchTranslatedText();
          });
        },
        tooltip: 'Change Language',
        child: Icon(Icons.translate),
      ),
    );
  }
}

注意事项

  1. 翻译资源：实际使用时，你需要确保universal_translator插件有正确加载和解析翻译资源文件（如JSON、YAML等）。
  2. 错误处理：在真实应用中，应该添加错误处理逻辑，以处理翻译键不存在或语言包加载失败等情况。
  3. 插件文档：由于universal_translator是一个假设的插件名称，实际使用时请查阅具体插件的官方文档，以获取准确的API和用法。

希望这个示例代码能帮助你在Flutter项目中集成和使用多语言翻译插件。

回到顶部