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

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

在进行大量翻译工作时，比如我遇到的情况，dart_translate插件是一个简单易用的选择。它无需订阅谷歌云服务，就可以实现多语言翻译。

安装

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

dependencies:
  dart_translate: ^版本号

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

使用示例

以下是一个简单的示例，展示了如何使用dart_translate插件来进行翻译。

示例代码
import 'package:flutter/material.dart';
import 'package:dart_translate/dart_translate.dart'; // 导入dart_translate包

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final translate = GoogleTranslate(); // 初始化GoogleTranslate对象

  Future<void> translateText() async {
    try {
      var thaiToEnglish = await translate.translate("สวัสดี", "th", "en"); // 泰语翻译为英语
      print("translate text: $thaiToEnglish\n");

      var autoToEnglish = await translate.translate("ลาก่อน", "auto", "en"); // 自动检测语言翻译为英语
      print("translate text: $autoToEnglish\n");
    } catch (e) {
      print('Error occurred during translation: $e');
    } finally {
      translate.close(); // 关闭连接
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter 国际化翻译示例'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: translateText, // 点击按钮触发翻译
          child: Text('点击翻译'),
        ),
      ),
    );
  }
}

代码解释

  1. 导入包：

    import 'package:dart_translate/dart_translate.dart';

  2. 初始化GoogleTranslate对象：

    final translate = GoogleTranslate();

  3. 翻译方法：

    var thaiToEnglish = await translate.translate("สวัสดี", "th", "en");

    这行代码将泰语文本“สวัสดี”翻译成英语。

  4. 自动检测语言并翻译：

    var autoToEnglish = await translate.translate("ลาก่อน", "auto", "en");

    这行代码会自动检测输入文本的语言，并将其翻译成英语。

  5. 错误处理：

    catch (e) {
  print('Error occurred during translation: $e');
}

  6. 关闭连接：

    translate.close();

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

1 回复

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


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

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 dart_translate 依赖：

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

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

2. 创建翻译文件

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

lib/
  translations/
    en.json
    es.json
    zh.json

每个 JSON 文件对应一种语言，内容格式如下：

en.json:

{
  "hello": "Hello",
  "welcome": "Welcome to Flutter"
}

es.json:

{
  "hello": "Hola",
  "welcome": "Bienvenido a Flutter"
}

zh.json:

{
  "hello": "你好",
  "welcome": "欢迎使用 Flutter"
}

3. 初始化 dart_translate

在你的 main.dart 文件中初始化 dart_translate：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  await DartTranslate.load(
    basePath: 'assets/translations/',
    defaultLocale: 'en',
    supportedLocales: ['en', 'es', 'zh'],
  );

  runApp(MyApp());
}

4. 使用翻译

在你的应用中使用 DartTranslate 来获取翻译：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(DartTranslate.translate('welcome')),
        ),
        body: Center(
          child: Text(DartTranslate.translate('hello')),
        ),
      ),
    );
  }
}

5. 切换语言

你可以通过 DartTranslate.setLocale 来动态切换语言：

ElevatedButton(
  onPressed: () {
    DartTranslate.setLocale('es');
  },
  child: Text('Switch to Spanish'),
),

6. 加载本地化资源

确保在 pubspec.yaml 中声明你的翻译文件：

flutter:
  assets:
    - assets/translations/en.json
    - assets/translations/es.json
    - assets/translations/zh.json

7. 处理语言切换后的 UI 更新

为了在语言切换后自动更新 UI，你可以使用 StatefulWidget 或 Provider 等状态管理工具来监听语言变化并重建 UI。

8. 处理未翻译的键

如果某些键没有翻译，dart_translate 会返回默认语言中的值。如果你想自定义这种行为，可以在 DartTranslate.load 中设置 fallbackLocale。

await DartTranslate.load(
  basePath: 'assets/translations/',
  defaultLocale: 'en',
  fallbackLocale: 'en',
  supportedLocales: ['en', 'es', 'zh'],
);

9. 高级用法

dart_translate 还支持嵌套的 JSON 结构，你可以通过点符号来访问嵌套的键：

{
  "messages": {
    "hello": "Hello"
  }
}

DartTranslate.translate('messages.hello');
回到顶部