1. Flutter Intl
插件
安装 Android Studio
的 Flutter Intl
插件
进入 Android Studio
- Preferences
- Plugins
,搜索Flutter Intl
插件,安装,重启Android Studio
。
2. 添加flutter_localizations
在项目的pubspec.yaml
的dev_dependencies
下添加flutter_localizations
,并执行flutter pub get
:
dev_dependencies:
flutter_test:
sdk: flutter
flutter_localizations:
sdk: flutter
3. 为项目初始化
执行Android Studio
的菜单Tools
- Flutter Intl
- Initalize for the Project
来初始化项目的国际化。生成2个文件夹和在pubspec.yaml
中生成一个插件安装代码。
4. 添加语言
执行Android Studio
的菜单Tools
- Flutter Intl
- Add Local
,添加zh
。自动生成2个文件。
5. app
添加国际化
在main.dart
中添加以下代码:
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:international_demo/generated/l10n.dart';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
localizationsDelegates: const [
S.delegate,
GlobalMaterialLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
GlobalWidgetsLocalizations.delegate
],
supportedLocales: S.delegate.supportedLocales,
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
6. 使用国际化
分别在intl_en.arb
和intl_zh.arb
添加字符串,如下:
{
"@@locale": "en",
"appName": "International Demo",
"login": "login",
"register": "register",
"pageHomeTitle" : "Welcome {firstName}",
"@pageHomeTitle" : {
"description" : "Welcome message on the Home screen",
"placeholders": {
"firstName": {}
}
}
}
{
"@@locale": "zh",
"appName": "国际化例子",
"login": "登录",
"register": "注册",
"pageHomeTitle" : "欢迎 {firstName}",
"@pageHomeTitle" : {
"description" : "首页欢迎语",
"placeholders": {
"firstName": {}
}
}
}
更多arb
文件的编写格式,见:flutter-arb
使用S.of(context).名称
或 S.current.login
来使用:
Text(
S.current.login,
),
Text(
S.of(context).register,
),
Text(
S.of(context).pageHomeTitle("小明"),
),
手机设置切换语言后,
手机语言为中文:
手机语言为英文:
7. 一些问题的处理
Android
的AppName
任务中心标题国际化
return MaterialApp(
// title: S.of(context).appName, // 这种方式不能正常工作
// 用于配置安卓的APP标题国际化,此标题显示在任务管理器里
onGenerateTitle: (context) => S.of(context).appName,
多个英语国家使用同一个Locale
localeListResolutionCallback: (locale, supportedLocales) {
// 可用来处理英语系的国家指定同一个Locale
// 判断当前的locale是否为英语系国家,如果是直接返回Locale('en', 'US')
},
系统语言环境切换的回调
// 系统语言切换的回调
localeResolutionCallback: (locale, supportedLocales) {},
// 系统语言切换的回调
localeListResolutionCallback: (locale, supportedLocales) {
// 可用来处理英语系的国家指定同一个Locale
// 判断当前的locale是否为英语系国家,如果是直接返回Locale('en', 'US')
},
不根据系统语言,手动指定语言
locale: const Locale('en', 'US'), // 可以手动指定当前的语言