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

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

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

google_translator

一个Flutter插件,用于适应屏幕和字体大小。让你的UI在不同屏幕尺寸上显示合理的布局!

使用方法

获取Google翻译API密钥
  • 首先,你需要在Google Cloud Platform中启动一个项目。
  • 然后启用Google Cloud Translation API。
  • 创建一个账户的凭证密钥。 导航到项目仪表板的API管理部分, 在下拉菜单中选择API密钥:
添加依赖项

请在安装前检查最新版本。如果有新版本的问题,请使用之前的版本。

dependencies:
  # 功能
  google_translator: ^{latest version}
  ..
  flutter:
    sdk: flutter
在Dart代码中添加以下导入:
import 'package:google_translator/google_translator.dart';

开始使用

首先,你需要在调用翻译函数之前发送API密钥以及一些默认参数(我们建议按照示例进行):

void main() {
    /// 必须在调用`MaterialApp`之前进行`GoogleTranslatorInit`调用
    WidgetsFlutterBinding.ensureInitialized();
    runApp(MyApp());
}

class MyApp extends StatelessWidget {

  final String apiKey = "YOUR_GCP_API_KEY";

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GoogleTranslatorInit(apiKey,
      translateFrom: Locale('pt-br'),
      translateTo: Locale('en'),
      // automaticDetection: , 如果不知道用户想要翻译的语言
      // cacheDuration: Duration(days: 13), 缓存翻译的持续时间
      builder: () => MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(title: 'Flutter演示首页'),
      ),
    );
  }
}

注意:如果需要在MaterialApp之前调用,则必须在runApp函数之前添加WidgetsFlutterBinding.ensureInitialized();

基本使用方法

现在,你只需对所有要翻译的Text添加.translate()。

Scaffold(
    appBar: AppBar(
    title: Text(widget.title ?? "").translate(), // 标题翻译
    ),
    body: Column(
        children: [
            Text("我的翻译文本").translate(), // 文本翻译
            Text("这个文本显示不同的占位符").translate("Place to Holder") // 自定义占位符
        ]
    ),
);

Todo 列表

  • ❌ 为RichText添加扩展;
  • ❌ 为CupertinoTextField添加扩展;
  • ❌ 为CupertinoSearchTextField添加扩展;
  • ❌ 为TextField添加扩展;
  • ❌ 为Tooltip添加扩展;
  • ✅ 为SelectableText添加扩展。
  • ❌ 迁移dio_http_cache依赖到更安全的一个(期待创作者在pub.dev上添加空安全性)

免责声明

此包使用缓存数据,默认持续时间为7天,但可以在GoogleTranslatorInit > cacheDuration参数中更改。

问题

如果你发现任何问题、错误或功能请求,请发送给我。

示例完整代码

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

void main() {
  WidgetsFlutterBinding.ensureInitialized(); // 初始化绑定
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  final String apiKey = "YOUR_API_KEY"; // 替换为你的API密钥

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GoogleTranslatorInit(apiKey,
      translateFrom: Locale('pt-br'), // 源语言
      translateTo: Locale('en'), // 目标语言
      cacheDuration: Duration(days: 13), // 缓存持续时间
      builder: () => MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue, // 主色调
        ),
        home: MyHomePage(title: 'Flutter演示首页'), // 首页标题
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
      title: Text(widget.title ?? "").translate(), // 应用栏标题翻译
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("Original: Meu texto traduzido", 
              textAlign: TextAlign.center),
            Text("Meu texto traduzido", 
              textAlign: TextAlign.center).translate(), // 翻译文本
            SizedBox(height: 20),
            Text("Original: Este texto mostra um placeholder diferente", 
              textAlign: TextAlign.center),
            Text("Este texto mostra um placeholder diferente", 
              textAlign: TextAlign.center).translate("Place to Holder") // 自定义占位符翻译
          ]
        ),
      ),
    );
  }
}

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

1 回复

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


当然,下面是一个关于如何在Flutter项目中使用google_translator插件来实现谷歌翻译功能的代码示例。

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

dependencies:
  flutter:
    sdk: flutter
  google_translator: ^5.0.0  # 请确保使用最新版本

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

接下来,你可以在你的Flutter项目中创建一个简单的界面来实现翻译功能。以下是一个完整的示例代码:

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

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

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

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

class _TranslateScreenState extends State<TranslateScreen> {
  final TextEditingController _textController = TextEditingController();
  String _translatedText = '';
  String _sourceLang = 'auto';
  String _targetLang = 'en';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Translator Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            TextField(
              controller: _textController,
              decoration: InputDecoration(
                labelText: 'Text to Translate',
              ),
              maxLines: 5,
            ),
            SizedBox(height: 16),
            DropdownButtonFormField<String>(
              value: _sourceLang,
              hint: Text('Source Language'),
              onChanged: (value) {
                setState(() {
                  _sourceLang = value!;
                });
              },
              items: [
                'auto', 'en', 'es', 'fr', 'de', 'zh', // 添加更多语言代码根据需要
              ].map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
            ),
            SizedBox(height: 16),
            DropdownButtonFormField<String>(
              value: _targetLang,
              hint: Text('Target Language'),
              onChanged: (value) {
                setState(() {
                  _targetLang = value!;
                });
              },
              items: [
                'en', 'es', 'fr', 'de', 'zh', // 添加更多语言代码根据需要
              ].map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () async {
                setState(() {
                  _translatedText = 'Translating...';
                });
                final GoogleTranslator googleTranslator = GoogleTranslator();
                try {
                  final String translated = await googleTranslator.translate(
                    _textController.text,
                    from: _sourceLang,
                    to: _targetLang,
                  );
                  setState(() {
                    _translatedText = translated;
                  });
                } catch (e) {
                  setState(() {
                    _translatedText = 'Error: ${e.message}';
                  });
                }
              },
              child: Text('Translate'),
            ),
            SizedBox(height: 16),
            Text(
              'Translated Text:',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            Text(_translatedText),
          ],
        ),
      ),
    );
  }
}

这个示例代码创建了一个简单的Flutter应用,其中包括一个文本输入框、两个下拉列表用于选择源语言和目标语言,以及一个按钮用于触发翻译。翻译后的文本会显示在下方的文本区域中。

请确保你已经在你的Flutter环境中正确配置了网络连接,因为google_translator插件依赖于网络请求来访问谷歌翻译API。如果你遇到任何问题,比如API限制或访问问题,可能需要考虑使用其他翻译服务或API。

回到顶部