Flutter多功能集成插件getx_csv_translation_generator的使用
Flutter多功能集成插件getx_csv_translation_generator的使用
安装
在pubspec.yaml文件中添加以下依赖:
dependencies:
getx_csv_translation: <latest>
dev_dependencies:
build_runner: <latest>
getx_csv_translation_generator: <latest>
运行以下命令以安装依赖:
flutter pub get
使用
1. 创建 translations.csv
创建一个名为 translations.csv 的文件,并添加翻译数据。例如:
key,en_US,th_TH
test,test,ทดสอบ
param,test @name,ทดสอบ @name
2. 创建 lib/translations.dart
创建一个 lib/translations.dart 文件,并定义翻译类:
import 'package:getx_csv_translation/getx_csv_translation.dart';
import 'package:get/get.dart';
part 'translations.g.dart'; // 自动生成的文件
// 注解用于生成翻译代码
@GetXCSVTranslation()
class GetXCSVTranslations extends Translations {
@override
Map<String, Map<String, String>> get keys => $keys;
}
3. 生成翻译文件
3.1 使用 build_runner
运行以下命令生成翻译文件:
flutter packages pub run build_runner build
3.2 使用 CLI
运行以下命令生成翻译文件:
flutter pub run getx_csv_translation_generator build --csvPath <path to translation(optional)> --targetPath <path to translations.dart(optional)>
运行以下命令监听并自动更新翻译文件:
flutter pub run getx_csv_translation_generator watch --csvPath <path to translation(optional)> --targetPath <path to translations.dart(optional)>
4. 配置 GetX 应用
在 main.dart 中配置 GetX 应用:
import 'package:get/get.dart';
import 'lib/translations.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
translations: GetXCSVTranslations(), // 使用生成的翻译类
locale: Get.deviceLocale, // 自动检测设备语言
fallbackLocale: Locale('en'), // 默认语言
home: MyHomePage(),
);
}
}
如何使用 AppLocalization 类
AppLocalization 类提供了静态方法来获取翻译字符串。例如:
const $keys = {
'en': {
'test': 'Test',
'param': 'Test @name',
},
'th': {
'test': 'ทดสอบ',
'param': 'ทดสอบ @name',
}
};
class AppLocalization {
static String get test => 'test'.tr;
static String get param => 'param'.tr;
}
示例使用 AppLocalization 类
- 导入
AppLocalization类:
import 'lib/translations.dart';
- 使用静态方法获取翻译字符串:
String testTranslation = AppLocalization.test;
String paramTranslation = AppLocalization.param;
- 如果有动态翻译参数,可以传递参数:
String dialogDescription = AppLocalization.param.trParams({
'name': 'John Doe',
});
构建配置
可以通过 build.yaml 文件配置生成器选项:
targets:
$default:
builders:
getx_csv_translation_generator|getx_csv_translation:
options:
csv_path: ./translation.csv
single_quote: true
localization_name: AppLocalization
更多关于Flutter多功能集成插件getx_csv_translation_generator的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter多功能集成插件getx_csv_translation_generator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
getx_csv_translation_generator 是一个用于 Flutter 的多功能集成插件,旨在简化应用程序的国际化(i18n)和本地化(l10n)过程。它结合了 GetX 状态管理库和 CSV 文件来管理翻译字符串,并自动生成相应的 Dart 代码。
主要功能
- CSV 文件管理翻译字符串:使用 CSV 文件来存储和管理不同语言的翻译字符串,便于编辑和维护。
- 自动生成 Dart 代码:根据 CSV 文件自动生成 Dart 代码,减少手动编写翻译代码的工作量。
- 与 GetX 集成:与
GetX状态管理库无缝集成,简化了在应用程序中使用翻译字符串的过程。 - 支持多语言:支持多种语言的翻译,便于开发多语言应用程序。
使用步骤
1. 添加依赖
首先,在 pubspec.yaml 文件中添加 getx_csv_translation_generator 和 get 的依赖:
dependencies:
flutter:
sdk: flutter
get: ^4.6.5
dev_dependencies:
getx_csv_translation_generator: ^1.0.0
然后运行 flutter pub get 来安装依赖。
2. 创建 CSV 文件
在项目根目录下创建一个 CSV 文件(例如 translations.csv),用于存储翻译字符串。CSV 文件的第一列是键(key),后续列是不同语言的翻译值。例如:
key,en,es,fr
hello,Hello,Hola,Bonjour
goodbye,Goodbye,Adiós,Au revoir
3. 生成翻译代码
在终端中运行以下命令,根据 CSV 文件生成 Dart 代码:
flutter pub run getx_csv_translation_generator
这将在 lib 目录下生成一个 translations 文件夹,其中包含生成的 Dart 文件。
4. 配置 GetX 翻译
在 main.dart 中配置 GetX 的翻译功能:
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'translations/translations.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return GetMaterialApp(
translations: AppTranslations(),
locale: Locale('en', 'US'), // 设置默认语言
fallbackLocale: Locale('en', 'US'), // 设置回退语言
home: HomePage(),
);
}
}
5. 使用翻译字符串
在应用程序中使用生成的翻译字符串:
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class HomePage extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('hello'.tr), // 使用翻译字符串
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('hello'.tr),
ElevatedButton(
onPressed: () {
Get.updateLocale(Locale('es', 'ES')); // 切换语言
},
child: Text('Switch to Spanish'),
),
],
),
),
);
}
}

