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

Flutter 中使用多语言翻译插件 mdtrans 可以帮助开发者快速实现应用程序的国际化功能。以下是详细的使用步骤及完整示例代码。

安装插件

首先，在 pubspec.yaml 文件中添加 mdtrans 插件：

dependencies:
  mdtrans: ^版本号

运行以下命令安装依赖：

flutter pub get

配置项目

Android 配置

确保您的项目支持 AndroidX 并且最低编译目标为 API 28 或更高版本。

在 android/app/src/main/res/values/styles.xml 文件中添加以下内容：

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

完整的 styles.xml 文件如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <!-- 显示启动屏幕 -->
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>
</resources>

然后在 AndroidManifest.xml 的 <application> 标签中添加主题配置：

android:theme="@style/AppTheme"

iOS 配置

iOS 不需要额外的设置，直接跳到使用部分。

示例代码

以下是一个完整的示例代码，展示如何使用 mdtrans 插件进行多语言翻译。

示例代码

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:mdtrans/mdtrans.dart';

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isTranslating = false;

  final mdtrans = Mdtrans();

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化插件，传入多语言翻译所需的 API Key 和基础 URL
    mdtrans.init("YOUR_API_KEY", "YOUR_TRANSLATION_BASE_URL");
    mdtrans.setFinishCallback(_callback);
  }

  // 翻译按钮点击事件
  _translateText() {
    setState(() {
      isTranslating = true;
    });

    mdtrans
        .translate(
          "Hello World", // 待翻译文本
          "en",          // 源语言（英语）
          "zh"           // 目标语言（简体中文）
        )
        .then((translatedText) {
          print("Translated Text: $translatedText");
        })
        .catchError((error) {
          print("Translation Error: $error");
        })
        .whenComplete(() {
          setState(() {
            isTranslating = false;
          });
        });
  }

  // 回调函数
  Future<void> _callback(String translatedText) async {
    return Future.value(null);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: const Text('mdtrans 插件示例'),
        ),
        body: new Center(
          child: isTranslating
              ? CircularProgressIndicator()
              : ElevatedButton(
                  child: Text("Translate Text"),
                  onPressed: () => _translateText(),
                ),
        ),
      ),
    );
  }
}