Flutter谷歌翻译功能插件google_translator的使用
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
更多关于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。