Flutter进阶:基于 MLKit 的 自动翻译功能实现

一、需求来源

无意中发现了很棒的翻译(支持英转中的)第三方库 google_mlkit_translation ,分享给大家。

二、使用示例

dart 复制代码
//
//  GoogleTranslationPage.dart
//  flutter_templet_project
//
//  Created by shang on 2024/11/16 12:23.
//  Copyright © 2024/11/16 shang. All rights reserved.
//

import 'package:flutter/material.dart';
import 'package:flutter_templet_project/extension/ddlog.dart';
import 'package:google_mlkit_translation/google_mlkit_translation.dart';

class TranslationTextPage extends StatefulWidget {
  const TranslationTextPage({super.key});

  @override
  _TranslationTextPageState createState() => _TranslationTextPageState();
}

class _TranslationTextPageState extends State<TranslationTextPage> {
  late final _translator = OnDeviceTranslator(
    sourceLanguage: TranslateLanguage.english, // 源语言:英语
    targetLanguage: TranslateLanguage.chinese, // 目标语言:中文
  );
  final _textController = TextEditingController();
  String _translatedText = '';
  bool _isTranslating = false;

  @override
  void dispose() {
    _translator.close();
    _textController.dispose();
    super.dispose();
  }

  Future<void> _translateText() async {
    if (_textController.text.isEmpty) {
      return;
    }
    _isTranslating = true;
    setState(() {});

    try {
      final translation = await _translator.translateText(_textController.text);
      _translatedText = translation;
      setState(() {});
    } catch (e) {
      _translatedText = '翻译失败: $e';
      DLog.d(e);
      setState(() {});
    } finally {
      _isTranslating = false;
      setState(() {});
    }
  }

  @override
  Widget build(BuildContext context) {
    _textController.text =
        "I am creating flutter package , when I am testing on test project with direct call to android method it works, but when I am trying it with flutter package example project got this below error.";
    return Scaffold(
      appBar: AppBar(title: Text('Google ML Kit Translation')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _textController,
              maxLines: null,
              decoration: InputDecoration(
                labelText: '输入文本',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 16.0),
            ElevatedButton(
              onPressed: _isTranslating ? null : _translateText,
              child: _isTranslating ? CircularProgressIndicator() : Text('翻译'),
            ),
            const SizedBox(height: 16.0),
            Text(
              '翻译结果:',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8.0),
            Text(
              _translatedText,
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}

三、使用指南

最后、总结

  • 支持常规的 50 多种语言的翻译需求。
  • 和 之前文章的 OCR 文字识别功能结合使用,就等于免费版的英文图片翻译为中文的功能(屌不屌!)。
  • 再结合文字语言类型识别,可以进一步实现自动检测语言类型,翻译为特定语言的需求:
dart 复制代码
/// 语言类型检测
Future<void> checkLanguage({required String text}) async {
  if (text.isNotEmpty != true) {
    return;
  }
  String language;
  try {
    language = await _languageIdentifier.identifyLanguage(text);
  } on PlatformException catch (pe) {
    if (pe.code == _languageIdentifier.undeterminedLanguageCode) {
      language = 'error: no language identified!';
    }
    language = 'error: ${pe.code}: ${pe.message}';
  } catch (e) {
    language = 'error: ${e.toString()}';
  }
  _identifiedLanguage = language;
  sourceLanguage = BCP47Code.fromRawValue(language);
  DLog.d([language, sourceLanguage].asMap());
  // setState(() {});
}

github

相关推荐
再吃一根胡萝卜2 分钟前
🔍 当 `<a-menu>` 遇上 `<template>`:一个容易忽视的菜单渲染陷阱
前端
Asort19 分钟前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
无双_Joney37 分钟前
[更新迭代 - 1] Nestjs 在24年底更新了啥?(功能篇)
前端·后端·nestjs
在云端易逍遥39 分钟前
前端必学的 CSS Grid 布局体系
前端·css
ccnocare40 分钟前
选择文件夹路径
前端
艾小码41 分钟前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
闰五月41 分钟前
JavaScript作用域与作用域链详解
前端·面试
泉城老铁1 小时前
idea 优化卡顿
前端·后端·敏捷开发
前端康师傅1 小时前
JavaScript 作用域常见问题及解决方案
前端·javascript