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

一、需求来源

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

二、使用示例

//
//  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),
            ),
          ],
        ),
      ),
    );
  }
}

三、使用指南

• google_mlkit_translation 的 Readme.md

最后、总结

• 支持常规的 50 多种语言的翻译需求。
• 和 之前文章的 OCR 文字识别功能结合使用，就等于免费版的英文图片翻译为中文的功能（屌不屌！）。
• 再结合文字语言类型识别,可以进一步实现自动检测语言类型，翻译为特定语言的需求：

/// 语言类型检测
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