Flutter谷歌翻译功能插件google_translate的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter谷歌翻译功能插件google_translate的使用

pub package travis

google_translate 是一个用于 Dart 的 Google Translate API 插件。

使用方法

1. 添加依赖

在你的 pubspec.yaml 文件中添加 google_translate 依赖:

dependencies:
  google_translate: any # 或者使用最新版本

2. 配置插件

在你的 Flutter 应用中配置 google_translate

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  GoogleTranslate.initialize(
    apiKey: "your_api_key", // 替换为你的 Google Translate API 密钥
    sourceLanguage: "en",
    targetLanguage: "it",
  );

  runApp(const MyApp());
}

3. 使用翻译功能

你可以在需要的地方使用翻译功能。例如,在 StatefulWidget 中:

class _MyHomePageState extends State<MyHomePage> {
  String title = 'Flutter Demo Home Page';
  String body = 'prova un altra lingua';

  @override
  void initState() {
    super.initState();

    'example'.translate().then((value) {
      setState(() {
        title = value;
      });
    });

    'esempio'.translate(sourceLanguage: 'it', targetLanguage: 'en').then((value) {
      setState(() {
        body = value;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text(body),
      ),
    );
  }
}

4. 运行示例

你可以在 example/ 文件夹中找到一个完整的示例应用。以下是一个完整的示例代码:

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  GoogleTranslate.initialize(
    apiKey: "AIzaSyA3jW_Fy9eqaeDA-Lh0qNm8LbXjhJW-ay8", // 替换为你的 API 密钥
    targetLanguage: "it",
  );

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String title = 'Flutter Demo Home Page';
  String body = 'prova un altra lingua';

  @override
  void initState() {
    super.initState();

    title.translate().then((value) {
      setState(() {
        title = value;
      });
    });

    body.translate(sourceLanguage: 'it', targetLanguage: 'en').then((value) {
      setState(() {
        body = value;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text(body),
      ),
    );
  }
}

支持我

如果你觉得这个插件对你有帮助,可以通过我的 Ko-Fi 页面捐赠:

ko-fi

当然,如果你不能或不愿意捐赠,给我一个 GitHub 星标和 pub.dev 点赞也会非常感谢!

每一笔捐赠都让我有动力继续开发开源项目,并知道我在做正确的事情。


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

1 回复

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


当然,以下是如何在Flutter项目中使用google_translate插件来实现谷歌翻译功能的代码案例。

首先,你需要在pubspec.yaml文件中添加google_translate依赖项:

dependencies:
  flutter:
    sdk: flutter
  google_translate: ^x.y.z  # 请将x.y.z替换为当前最新版本号

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

接下来,你可以在你的Flutter应用中使用该插件。以下是一个简单的示例,展示如何从用户获取源语言和目标语言,以及要翻译的文本,并显示翻译结果。

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

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

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

class TranslateScreen extends StatefulWidget {
  @override
  _TranslateScreenState createState() => _TranslateScreenState();
}

class _TranslateScreenState extends State<TranslateScreen> {
  final TextEditingController _sourceTextController = TextEditingController();
  final TextEditingController _translatedTextController = TextEditingController();
  String _sourceLanguage = 'auto'; // 自动检测源语言
  String _targetLanguage = 'en'; // 目标语言为英语
  String _apiKey = 'YOUR_GOOGLE_CLOUD_TRANSLATE_API_KEY'; // 请替换为你的Google Cloud Translate API密钥

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Translate Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            TextField(
              controller: _sourceTextController,
              decoration: InputDecoration(
                labelText: 'Source Text',
              ),
              maxLines: 5,
            ),
            SizedBox(height: 16),
            DropdownButtonFormField<String>(
              value: _sourceLanguage,
              hint: Text('Source Language'),
              onChanged: (newValue) {
                setState(() {
                  _sourceLanguage = newValue;
                });
              },
              items: [
                'auto', 'en', 'es', 'fr', 'de', // 添加你需要的语言代码
              ].map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value.toUpperCase()),
                );
              }).toList(),
            ),
            SizedBox(height: 16),
            DropdownButtonFormField<String>(
              value: _targetLanguage,
              hint: Text('Target Language'),
              onChanged: (newValue) {
                setState(() {
                  _targetLanguage = newValue;
                });
              },
              items: [
                'en', 'es', 'fr', 'de', // 添加你需要的语言代码
              ].map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value.toUpperCase()),
                );
              }).toList(),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () async {
                try {
                  GoogleTranslate googleTranslate = GoogleTranslate(apiKey: _apiKey);
                  String translatedText = await googleTranslate.translate(
                    _sourceTextController.text,
                    source: _sourceLanguage,
                    target: _targetLanguage,
                  );
                  setState(() {
                    _translatedTextController.text = translatedText;
                  });
                } catch (e) {
                  print('Error translating text: $e');
                }
              },
              child: Text('Translate'),
            ),
            SizedBox(height: 16),
            TextField(
              controller: _translatedTextController,
              decoration: InputDecoration(
                labelText: 'Translated Text',
                readOnly: true,
              ),
              maxLines: 5,
            ),
          ],
        ),
      ),
    );
  }
}

注意

  1. 替换YOUR_GOOGLE_CLOUD_TRANSLATE_API_KEY为你的Google Cloud Translate API密钥。你需要先在Google Cloud Platform上启用Cloud Translation API并创建一个API密钥。

  2. google_translate插件在后台使用Google Cloud Translation API,这意味着你需要支付使用该API的费用(除非你有免费配额可用)。

  3. 确保你的应用遵循Google Cloud Translation API的使用政策和限制。

这个示例展示了如何使用google_translate插件进行基本的文本翻译功能。根据你的需求,你可以进一步扩展和优化这个示例。

回到顶部