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

发布于 1周前 作者 nodeper 来自 Flutter

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

translator 是一个免费的Google Translate API for Dart,允许开发者轻松地在Flutter应用中实现多语言翻译功能。它可以帮助我们快速将文本从一种语言翻译成另一种语言,支持多种语言之间的互译。

使用方法

基本用法

首先需要导入 translator 包:

import 'package:translator/translator.dart';

然后可以创建 GoogleTranslator 的实例,并使用 translate 方法进行翻译:

void main() async {
  final translator = GoogleTranslator();

  final input = "Здравствуйте. Ты в порядке?";

  // 使用 Future API 进行翻译
  translator.translate(input, from: 'ru', to: 'en').then((result) {
    print("Source: $input\nTranslated: $result");
  });

  // 将翻译结果存储到变量中
  var translation = await translator.translate("Dart is very cool!", to: 'pl');
  print(translation); // prints Dart jest bardzo fajny!

  // 直接在字符串上调用扩展方法进行翻译
  print(await "example".translate(to: 'pt')); // prints exemplo
}

自动检测源语言

如果不想指定源语言,translator 可以自动检测源语言:

translator.translate("Hello", to: 'es').then((result) {
  print(result); // prints Hola
});

获取完整的翻译对象

translate 方法返回的是一个 Translation 对象,包含了更多的翻译信息:

var translation = await translator.translate('Translation', from: 'en', to: 'es');
print('${translation.source} (${translation.sourceLanguage}) == ${translation.text} (${translation.targetLanguage})');
// prints Translation (English) == Traducción (Spanish)

更改默认的翻译URL

对于某些地区,默认的翻译URL可能无法正常工作,这时可以更改默认的URL:

translator.baseUrl = "translate.google.com.hk";
translator.translateAndPrint("This means 'testing' in chinese", to: 'zh-cn');
// prints 这意味着用中文'测试'

完整示例代码

以下是一个完整的示例代码,展示了如何在Flutter项目中使用 translator 插件:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Translator Demo'),
        ),
        body: Center(
          child: TranslatorDemo(),
        ),
      ),
    );
  }
}

class TranslatorDemo extends StatefulWidget {
  @override
  _TranslatorDemoState createState() => _TranslatorDemoState();
}

class _TranslatorDemoState extends State<TranslatorDemo> {
  final GoogleTranslator translator = GoogleTranslator();
  String translatedText = '';

  void translateText(String text, String targetLang) async {
    var translation = await translator.translate(text, to: targetLang);
    setState(() {
      translatedText = translation.text;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: TextField(
            decoration: InputDecoration(labelText: 'Enter text to translate'),
            onSubmitted: (text) {
              translateText(text, 'es'); // 默认翻译成西班牙语
            },
          ),
        ),
        ElevatedButton(
          onPressed: () {
            translateText('Hello', 'es');
          },
          child: Text('Translate Hello to Spanish'),
        ),
        Text(
          'Translated Text: $translatedText',
          style: TextStyle(fontSize: 20),
        ),
      ],
    );
  }
}

注意事项

  • 该包是基于爬取Google Translate网站的数据开发的,因此可能存在不稳定的情况。
  • 如果你需要更稳定的服务,建议购买官方的Google Translate API。
  • 该包适用于教育目的,不建议在生产环境中依赖此包。

希望这些信息能帮助你在Flutter项目中顺利使用 translator 插件!如果有任何问题,欢迎随时提问。


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

1 回复

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


在Flutter项目中实现多语言支持,translator 插件是一个非常有用的工具。下面是一个使用 translator 插件来实现多语言翻译的示例代码。

首先,确保你已经在 pubspec.yaml 文件中添加了 translator 依赖:

dependencies:
  flutter:
    sdk: flutter
  translator: ^2.0.0  # 请根据需要替换为最新版本

然后运行 flutter pub get 来获取依赖。

接下来,我们需要在项目中配置和使用 translator 插件。以下是一个完整的示例:

1. 创建语言文件

在项目的 assets 文件夹下创建语言文件,例如:

  • assets/locales/en.json
  • assets/locales/zh.json

en.json 内容示例:

{
  "welcome": "Welcome",
  "goodbye": "Goodbye"
}

zh.json 内容示例:

{
  "welcome": "欢迎",
  "goodbye": "再见"
}

2. 更新 pubspec.yaml 以包含语言文件

pubspec.yaml 中添加语言文件到 assets 部分:

flutter:
  assets:
    - assets/locales/en.json
    - assets/locales/zh.json

3. 配置 translator 插件

创建一个 translator_service.dart 文件来配置和使用 translator 插件:

import 'package:flutter/material.dart';
import 'package:translator/translator.dart';
import 'dart:convert';
import 'package:flutter/services.dart' show rootBundle;

class TranslatorService {
  static Translator translator;

  static Future<void> load(Locale locale) async {
    String languageCode = locale.languageCode;
    String jsonString = await rootBundle.loadString('assets/locales/$languageCode.json');
    Map<String, dynamic> jsonMap = jsonDecode(jsonString);

    translator = Translator(jsonMap);
  }

  static String translate(String key) {
    return translator?.translate(key) ?? key;
  }
}

4. 在 MaterialApp 中使用 TranslatorService

在你的主文件中(例如 main.dart),使用 TranslatorService 并设置支持的语言:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Multi Language Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      localizationsDelegates: [
        // 添加其他需要的localizationsDelegates,例如 GlobalMaterialLocalizations.delegate 等
      ],
      supportedLocales: [
        Locale('en', ''),
        Locale('zh', ''),
      ],
      locale: Locale('en'), // 默认语言
      onGenerateRoute: (settings) {
        // 在这里处理路由生成
        return MaterialPageRoute(
          builder: (context) => HomePage(),
        );
      },
      builder: (context, child) {
        return Localizations(
          locale: Localizations.localeOf(context),
          child: TranslatorProvider(
            translator: TranslatorService.translator,
            child: child,
          ),
          delegates: [
            // 添加其他需要的delegates
          ],
        );
      },
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  void initState() {
    super.initState();
    // 根据需要设置初始语言
    TranslatorService.load(Localizations.localeOf(context));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(TranslatorService.translate('welcome')),
      ),
      body: Center(
        child: TextButton(
          onPressed: () {
            // 切换语言示例(这里只是简单切换,实际应用中可能需要持久化用户选择的语言)
            Locale currentLocale = Localizations.localeOf(context);
            setLocale(context, currentLocale.languageCode == 'en' ? Locale('zh') : Locale('en'));
          },
          child: Text(TranslatorService.translate('goodbye')),
        ),
      ),
    );
  }

  void setLocale(BuildContext context, Locale newLocale) {
    _MyAppState? _myAppState = context.findAncestorStateOfType<_MyAppState>();
    _myAppState?.setLocale(newLocale);
  }
}

class _MyAppState extends State<MyApp> {
  Locale _locale;

  @override
  void initState() {
    super.initState();
    _locale = Locale('en'); // 默认语言
  }

  void setLocale(Locale newLocale) {
    setState(() {
      _locale = newLocale;
      // 重新加载语言资源
      TranslatorService.load(_locale);
    });
  }

  @override
  Widget build(BuildContext context) {
    return LocalizedApp(
      locale: _locale,
      child: MaterialApp(
        // ... 其他配置
      ),
    );
  }
}

class LocalizedApp extends StatelessWidget {
  final Locale locale;
  final Widget child;

  LocalizedApp({required this.locale, required this.child});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      locale: locale,
      supportedLocales: [
        Locale('en', ''),
        Locale('zh', ''),
      ],
      home: child,
    );
  }
}

注意:上面的代码示例中,TranslatorProviderLocalizedApp 并不是 translator 插件的一部分,它们是为了演示如何包裹和提供翻译服务而创建的假设类。实际上,translator 插件的使用通常不需要这么复杂的包装,你可以直接在需要翻译的地方调用 TranslatorService.translate(key)

由于 translator 插件本身并不提供全局的 LocalizedApp 或类似的上下文提供者,因此你可能需要自行实现一个状态管理方案(如 ProviderRiverpodGetX)来在整个应用中共享翻译服务实例。上面的代码示例主要是为了展示如何在 Flutter 应用中集成和使用 translator 插件进行多语言翻译,实际应用中你可能需要根据具体需求进行调整。

回到顶部