Flutter谷歌翻译功能插件google_translate的使用
Flutter谷歌翻译功能插件google_translate的使用
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 页面捐赠:
当然,如果你不能或不愿意捐赠,给我一个 GitHub 星标和 pub.dev 点赞也会非常感谢!
每一笔捐赠都让我有动力继续开发开源项目,并知道我在做正确的事情。
更多关于Flutter谷歌翻译功能插件google_translate的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于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,
),
],
),
),
);
}
}
注意:
-
替换
YOUR_GOOGLE_CLOUD_TRANSLATE_API_KEY
为你的Google Cloud Translate API密钥。你需要先在Google Cloud Platform上启用Cloud Translation API并创建一个API密钥。 -
google_translate
插件在后台使用Google Cloud Translation API,这意味着你需要支付使用该API的费用(除非你有免费配额可用)。 -
确保你的应用遵循Google Cloud Translation API的使用政策和限制。
这个示例展示了如何使用google_translate
插件进行基本的文本翻译功能。根据你的需求,你可以进一步扩展和优化这个示例。