Flutter国际化插件gen_i18n的使用
Flutter国际化插件 gen_i18n
的使用
简介
gen_i18n
是一个用于在 Dart 项目中添加国际化支持的插件。通过这个插件,你可以轻松地管理多语言翻译文件,并在应用中动态切换语言。
安装
首先,在你的 pubspec.yaml
文件中添加以下依赖:
dependencies:
flutter_localizations:
sdk: flutter
dev_dependencies:
gen_i18n: ^1.0.3
flutter:
assets:
- assets/i18n/locale/
然后运行 flutter pub get
来安装这些依赖。
使用
初始化
运行以下命令来初始化插件并生成必要的文件:
flutter pub run gen_i18n:initialize
这将生成以下文件:
- i18n.dart: 这是一个位于
lib/i18n/
目录下的 Dart 文件,负责解析翻译文件。 - locale: 翻译文件所在的目录,默认路径为
assets/i18n/locale
。
注意: 翻译文件的命名应以 i18n_
开头,例如 i18n_en.json
。
支持参数
你可以在初始化时指定多个语言环境:
flutter pub run gen_i18n:initialize --locale=pt --locale=es
示例代码
项目结构
假设你的项目结构如下:
project_root/
├── assets/
│ └── i18n/
│ └── locale/
│ ├── i18n_en.json
│ └── i18n_pt.json
├── lib/
│ ├── main.dart
│ └── i18n/
│ └── i18n.dart
└── pubspec.yaml
i18n_en.json
示例
{
"customMessage": "Write is here your message"
}
i18n_pt.json
示例
{
"customMessage": "Escreva sua mensagem aqui"
}
修改 main.dart
在 main.dart
中进行以下修改:
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:your_project_name/i18n/i18n.dart';
const _supportLocales = [Locale('en'), Locale('pt')];
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await I18n.initialize(
defaultLocale: Locale('en'),
supportLocales: _supportLocales,
);
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
locale: I18n.currentLocate,
supportedLocales: I18n.supportedLocales,
localizationsDelegates: const [
I18nDelegate(),
GlobalMaterialLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Locale _locale = Locale('en');
void onChanged(Locale? locale) async {
if (locale == null) return;
await I18n.updateLocate(locale);
setState(() => _locale = locale);
}
DropdownMenuItem<Locale> _itemBuild(Locale item) {
return DropdownMenuItem<Locale>(
child: Text(item.toLanguageTag()),
value: item,
);
}
Widget _languageBody() {
return DropdownButton<Locale>(
value: _locale,
items: _supportLocales.map(_itemBuild).toList(),
onChanged: onChanged,
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'customMessage'.translate,
),
_languageBody()
],
),
),
);
}
}
切换语言
你可以通过调用 I18n.updateLocate(Locale('es'))
方法来动态切换当前的语言环境。
显示翻译文本
要显示翻译后的文本,可以使用以下两种方法之一:
Text(I18n.getValue('customMessage'))
// 或者
Text('customMessage'.translate)
更多关于Flutter国际化插件gen_i18n的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复