一、为什么需要国际化?
如果你的应用面向全球用户,多语言支持 是基本要求。Flutter 官方提供了强大的 flutter_localizations 包,配合 intl 工具,可轻松实现多语言切换。
二、快速上手:三步实现中英文切换
步骤 1:添加依赖
yaml
编辑
# pubspec.yaml
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
intl: ^0.19.0
步骤 2:配置 MaterialApp
dart
编辑
import 'package:flutter_localizations/flutter_localizations.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
localizationsDelegates: const [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: const [
Locale('en', ''), // 英语
Locale('zh', ''), // 中文
Locale('ja', ''), // 日语
],
home: HomePage(),
);
}
}
步骤 3:使用 AppLocalizations
dart
编辑
// 获取当前语言文本
Text(AppLocalizations.of(context)!.helloWorld)
⚠️ 但此时会报错:缺少
AppLocalizations类!
三、生成多语言资源文件(关键步骤)
1. 创建 l10n.yaml 文件(项目根目录)
yaml
编辑
arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart
2. 创建语言文件
-
lib/l10n/app_en.arbjson
编辑
{ "helloWorld": "Hello World", "welcomeMessage": "Welcome, {name}!" } -
lib/l10n/app_zh.arbjson
编辑
{ "helloWorld": "你好,世界", "welcomeMessage": "欢迎,{name}!" } -
lib/l10n/app_ja.arbjson
编辑
{ "helloWorld": "こんにちは、世界", "welcomeMessage": "ようこそ、{name}さん!" }
3. 生成代码
bash
编辑
flutter gen-l10n
✅ 自动生成
app_localizations.dart,无需手动编写!
四、动态切换语言(带保存)
dart
编辑
// 切换语言并重启应用
void changeLanguage(BuildContext context, String locale) {
final MyAppState? state = context.findAncestorStateOfType<MyAppState>();
if (state != null) {
state.setLocale(Locale(locale));
}
}
// 在 MyApp 中管理状态
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
late Locale _locale;
@override
void initState() {
super.initState();
_locale = const Locale('zh'); // 默认中文
}
void setLocale(Locale locale) {
setState(() {
_locale = locale;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
locale: _locale,
// ...其他配置同上
);
}
}
💡 可结合
shared_preferences保存用户选择。
五、实际效果展示
| 语言 | 截图 |
|---|---|
| 中文 | |
| English | |
| 日本語 |
📌 支持参数化文本:
AppLocalizations.of(context)!.welcomeMessage('张三')
六、高级技巧
-
复数形式(如 "1 item" vs "2 items"):
arb
编辑
"itemCount": "{count, plural, =0{无项目} =1{1个项目} other{{count}个项目}}" -
日期/数字本地化:
dart
编辑
DateFormat.yMMMd().format(DateTime.now()); // 自动适配语言格式 -
RTL 语言支持(如阿拉伯语):
dart
编辑
MaterialApp( supportedLocales: [Locale('ar')], localizationsDelegates: [...], theme: ThemeData(useMaterial3: true), )Flutter 会自动镜像布局!
七、结语
国际化不再是"附加功能",而是产品出海的必备能力 。Flutter 的 gen-l10n 工具链让多语言开发变得简单高效。
如果你正在做全球化 App,不妨现在就集成 i18n!