Flutter实时翻译插件realtime

Flutter实时翻译插件realtime_translation的使用

开始使用

realtime_translation 是一个用于Android和iOS平台的Flutter插件，可以通过摄像头实现实时文本翻译。你可以选择语言，然后通过 TsCameraView 检测文本，并查看检测到的文本的翻译结果，还可以设置摄像头的缩放级别。

安装配置（Android）

在你的 AndroidManifest.xml 文件中添加以下行，并将 android/app/build.gradle 文件中的 minSdkVersion 修改为21或更高版本：

<uses-feature android:name="android.hardware.camera" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />

minSdkVersion 21

安装配置（iOS）

realtime_translation 插件在iOS 10.0或更高版本上运行。如果编译版本低于10.0，请确保在使用任何 realtime_translation 插件功能之前，通过编程方式检查设备上的iOS版本。例如，可以使用 device_info_plus 插件来检查iOS版本。

在 ios/Runner/Info.plist 文件中添加以下两行：

一个键名为 Privacy - Camera Usage Description 的行，附带使用描述。

或者以文本格式添加以下键：

<key>NSCameraUsageDescription</key>
<string>Can I use the camera for capture image and recognised text?</string>

添加 `TsCameraView` 以检测文本

TsCameraView(
  languageCode: lanCode,
  onGetDetectedText: (String detectGetText) {
    setState(() {
      detectText = detectGetText;
    });
  },
  onGetTranslatedText: (String translateGetText) {
    setState(() {
      transText = translateGetText;
    });
  },
)

添加 `DetectionLanguageView` 以选择语言并显示检测和翻译的文本

DetectionLanguageView(
  languagesCodeList: languageCodeList,
  toLanguageName: lanName,
  languagesList: langNameList,
  toLangugeCode: lanCode,
  selectLanguageData: (String languageCode, String languageName) {
    lanCode = languageCode;
    lanName = languageName;
  },
  translatedText: transText,
  detectedText: detectText,
)

实时翻译预览

示例代码

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

import 'package:flutter/services.dart';
import 'package:realtime_translation/realtime_translation.dart';
import 'package:realtime_translation/views/bottom_language_view.dart';
import 'package:realtime_translation/views/camera_view.dart';

Future<void> main() async {
  await RealtimeTranslation().cameraInitialization();
  SystemChrome.setPreferredOrientations(
      [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
        debugShowCheckedModeBanner: false, home: RealTimeTranslationView());
  }
}

class RealTimeTranslationView extends StatefulWidget {
  const RealTimeTranslationView({Key? key}) : super(key: key);

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

class _RealTimeTranslationViewState extends State<RealTimeTranslationView> {
  // 设置语言代码列表
  final List<String> languageCodeList = [
    'af', 'sq', 'am', 'ar', 'hy', 'az', 'eu', 'be', 'bn', 'bs', 'bg', 'ca', 'ceb', 'ny', 'zh-cn', 'zh-tw', 'co', 'hr', 'cs', 'da', 'nl', 'en', 'eo', 'et', 'tl', 'fi', 'fr', 'fy', 'gl', 'ka', 'de', 'el', 'gu', 'ht', 'ha', 'haw', 'iw', 'he', 'hi', 'hmn', 'hu', 'is', 'ig', 'id', 'ga', 'it', 'ja', 'jw', 'kn', 'kk', 'km', 'ko', 'ku', 'ky', 'lo', 'la', 'lv', 'lt', 'lb', 'mk', 'mg', 'ms', 'ml', 'mt', 'mi', 'mr', 'mn', 'my', 'ne', 'no', 'or', 'ps', 'fa', 'pl', 'pt', 'pa', 'ro', 'ru', 'sm', 'gd', 'sr', 'st', 'sn', 'sd', 'si', 'sk', 'sl', 'so', 'es', 'su', 'sw', 'sv', 'tg', 'ta', 'te', 'th', 'tr', 'uk', 'ur', 'ug', 'uz', 'vi', 'cy', 'xh', 'yi', 'yo', 'zu'
  ];

  // 设置语言名称列表
  final List<String> langNameList = [
    'afrikaans', 'albanian', 'amharic', 'arabic', 'armenian', 'azerbaijani', 'basque', 'belarusian', 'bengali', 'bosnian', 'bulgarian', 'catalan', 'cebuano', 'chichewa', 'chinese (simplified)', 'chinese (traditional)', 'corsican', 'croatian', 'czech', 'danish', 'dutch', 'english', 'esperanto', 'estonian', 'filipino', 'finnish', 'french', 'frisian', 'galician', 'georgian', 'german', 'greek', 'gujarati', 'haitian creole', 'hausa', 'hawaiian', 'hebrew', 'hebrew', 'hindi', 'hmong', 'hungarian', 'icelandic', 'igbo', 'indonesian', 'irish', 'italian', 'japanese', 'javanese', 'kannada', 'kazakh', 'khmer', 'korean', 'kurdish (kurmanji)', 'kyrgyz', 'lao', 'latin', 'latvian', 'lithuanian', 'luxembourgish', 'macedonian', 'malagasy', 'malay', 'malayalam', 'maltese', 'maori', 'marathi', 'mongolian', 'myanmar (burmese)', 'nepali', 'norwegian', 'odia', 'pashto', 'persian', 'polish', 'portuguese', 'punjabi', 'romanian', 'russian', 'samoan', 'scots gaelic', 'serbian', 'sesotho', 'shona', 'sindhi', 'sinhala', 'slovak', 'slovenian', 'somali', 'spanish', 'sundanese', 'swahili', 'swedish', 'tajik', 'tamil', 'telugu', 'thai', 'turkish', 'ukrainian', 'urdu', 'uyghur', 'uzbek', 'vietnamese', 'welsh', 'xhosa', 'yiddish', 'yoruba', 'zulu'
  ];

  // 获取选择的语言代码
  String lanCode = "gu";

  // 获取选择的语言名称
  String lanName = "gujarati";

  // 获取翻译后的文本
  String transText = "";

  // 获取检测到的文本
  String detectText = "";

  // 获取屏幕宽度
  double mWidth = 0;

  // 获取屏幕高度
  double mHeight = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    mWidth = MediaQuery.of(context).size.width;
    mHeight = MediaQuery.of(context).size.height;
    return Scaffold(
      body: Container(
        width: mWidth,
        height: mHeight,
        child: Column(
          children: [
            Expanded(
              child: Stack(
                children: [
                  Align(
                    alignment: Alignment.center,
                    child: Container(
                      width: mWidth,
                      height: mHeight,
                      decoration: BoxDecoration(
                        border: Border.all(width: 4, color: Colors.black),
                      ),
                      child: TsCameraView(
                        // 选择语言代码
                        languageCode: lanCode,

                        // 检测到文本的回调
                        onGetDetectedText: (String detectGetText) {
                          setState(() {
                            detectText = detectGetText;
                          });
                        },

                        // 翻译后的文本的回调
                        onGetTranslatedText: (String translateGetText) {
                          setState(() {
                            transText = translateGetText;
                          });
                        },
                      ),
                    ),
                  ),
                  Align(
                    alignment: Alignment.bottomCenter,
                    child: DetectionLanguageView(
                      // 语言代码列表
                      languagesCodeList: languageCodeList,

                      // 选择的语言名称
                      toLanguageName: lanName,

                      // 语言名称列表
                      languagesList: langNameList,

                      // 选择的语言代码
                      toLangugeCode: lanCode,

                      // 获取语言代码和名称的回调
                      selectLanguageData: (String languageCode, String languageName) {
                        lanCode = languageCode;
                        lanName = languageName;
                      },

                      // 显示翻译后的文本
                      translatedText: transText,

                      // 显示检测到的文本
                      detectedText: detectText,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

itying888 1楼•5 天前

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

当然，以下是一个关于如何使用Flutter实时翻译插件realtime_translation的代码示例。这个示例将展示如何在Flutter应用中集成并使用该插件进行实时翻译。

首先，确保你已经在pubspec.yaml文件中添加了realtime_translation依赖：

dependencies:
  flutter:
    sdk: flutter
  realtime_translation: ^最新版本号  # 请替换为实际的最新版本号

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

接下来，我们编写一个简单的Flutter应用来演示如何使用realtime_translation插件。

main.dart

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

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

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

class TranslationScreen extends StatefulWidget {
  @override
  _TranslationScreenState createState() => _TranslationScreenState();
}

class _TranslationScreenState extends State<TranslationScreen> {
  final RealtimeTranslation _realtimeTranslation = RealtimeTranslation();
  TextEditingController _textController = TextEditingController();
  String _translatedText = '';
  String _sourceLanguageCode = 'en'; // 源语言代码，例如英语
  String _targetLanguageCode = 'zh'; // 目标语言代码，例如中文

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Realtime Translation Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            TextField(
              controller: _textController,
              decoration: InputDecoration(
                labelText: 'Enter text to translate',
              ),
              onChanged: (text) async {
                // 实时翻译
                String translated = await _translateText(text);
                setState(() {
                  _translatedText = translated;
                });
              },
            ),
            SizedBox(height: 16),
            Text(
              'Translated Text: $_translatedText',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 16),
            Row(
              children: <Widget>[
                Expanded(
                  child: DropdownButton<String>(
                    value: _sourceLanguageCode,
                    hint: Text('Source Language'),
                    onChanged: (newValue) {
                      setState(() {
                        _sourceLanguageCode = newValue;
                      });
                    },
                    items: LanguageCodes.map<DropdownMenuItem<String>>((String value) {
                      return DropdownMenuItem<String>(
                        value: value,
                        child: Text(value),
                      );
                    }).toList(),
                  ),
                ),
                SizedBox(width: 16),
                Expanded(
                  child: DropdownButton<String>(
                    value: _targetLanguageCode,
                    hint: Text('Target Language'),
                    onChanged: (newValue) {
                      setState(() {
                        _targetLanguageCode = newValue;
                      });
                    },
                    items: LanguageCodes.map<DropdownMenuItem<String>>((String value) {
                      return DropdownMenuItem<String>(
                        value: value,
                        child: Text(value),
                      );
                    }).toList(),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  // 假设LanguageCodes是你定义的一个包含所有支持语言代码的List<String>
  final List<String> LanguageCodes = [
    'en', 'zh', 'fr', 'es', 'de', // 添加更多语言代码
    // ...
  ];

  Future<String> _translateText(String text) async {
    try {
      TranslationResult result = await _realtimeTranslation.translate(
        text,
        sourceLanguage: _sourceLanguageCode,
        targetLanguage: _targetLanguageCode,
      );
      return result.translatedText;
    } catch (e) {
      print('Translation error: $e');
      return 'Error in translation';
    }
  }
}

注意事项

语言代码：确保你使用的语言代码是插件支持的。你可以查阅插件的文档来获取完整的语言代码列表。
错误处理：在实际应用中，你可能需要更健壮的错误处理逻辑，比如显示用户友好的错误消息。
API限制：某些翻译服务可能有API调用限制或配额，确保你了解并遵守这些限制。

这个示例展示了如何在Flutter应用中集成realtime_translation插件，并实现基本的实时翻译功能。你可以根据实际需求进一步扩展和优化这个示例。

Flutter实时翻译插件realtime_translation的使用