一. app支持国际化
1.下载插件
直接插件市场搜索`Flutter Intl`
Android Studio:Flutter Intl - IntelliJ IDEs Plugin | Marketplace
VS Code:Flutter Intl - Visual Studio Marketplace
添加依赖
dependencies:
flutter_localizations:
sdk: flutter
2.创建资源文件目录
首次使用,点击 Initialize for the Project .
插件会自动生成部分代码
添加/删除其它语系就点击初始化下面的 Add / Remove Locale 即可
3.引用配置
MaterialApp(
...
localizationsDelegates: const [
GlobalCupertinoLocalizations.delegate, //Cupertino组件的翻译回调
GlobalMaterialLocalizations.delegate, //Material组件的翻译回调
GlobalWidgetsLocalizations.delegate, // 普通 Widget 的翻译回调
S.delegate, // 应用程序的翻译回调
],
supportedLocales: S.delegate.supportedLocales,
...
);
在 MaterialApp 上配置 localizationsDelegates 跟 supportedLocales
4.编写国际化文件
编辑自动生成的.arb文件.插件也会自动更新文件的.
json格式,前面key,就是用来读取字段的键名称,value就是对应不同语言的文字
例如中文
英文
5.使用
把我们原本的文字,换成插件生成的字段即可
有BuildContext的 使用 S.of(context).username
无 BuildContext的地方使用 S.current.username
6.总结
至此app已经能支持国际化了,但是还不完善.只能根据系统语言自动切换.
当然你也可以使用切换语言 S.load(Locale('de', 'DE')); 不过这里有时候会导致部分刷新
二.完善app内切换语言
这部分就是我们的自定义代码了.
切换语言主要是改变app的locale
MaterialApp(
...
locale: Locale('zh'),
...
);
本文使用Provider 来实现locale的切换
1.创建一个数据源
class Config extends ChangeNotifier{
///当前使用的语系
Locale? _locale;
Locale? get locale => _locale;
set locale(Locale? val) {
_locale = val;
notifyListeners();
if (val != null) {
_saveLocal(val);
}
}
///无默认支持语系时,所取的语言
Locale? get defaultLocale => const Locale('en');
///本地化的代理类
Iterable<LocalizationsDelegate<dynamic>>? get localizationsDelegates => const [
GlobalCupertinoLocalizations.delegate, //Cupertino组件的翻译回调
GlobalMaterialLocalizations.delegate, //Material组件的翻译回调
GlobalWidgetsLocalizations.delegate, // 普通 Widget 的翻译回调
S.delegate, // 应用程序的翻译回调
];
///支持语系
Iterable<Locale> get supportedLocales => S.delegate.supportedLocales;
///首次进入时读取本地配置,app是否修改过语言 取上一次的语言
Future<void> initLocale() async {
var preferenceKey = const PreferenceKey('');
var languageCode =
await PreferenceStore(preferenceKey.localeLanguageCode)
.getString();
var countryCode =
await PreferenceStore(preferenceKey.localeCountryCode)
.getString();
if (languageCode != null && languageCode != '') {
//自动加载上一次保存的语系
locale = Locale(languageCode, countryCode);
}
return;
}
///持久化国际化信息
Future<void> _saveLocal(Locale locale) async {
var preferenceKey = const PreferenceKey('');
PreferenceStore(preferenceKey.localeLanguageCode)
.setString(locale.languageCode);
PreferenceStore(preferenceKey.localeCountryCode)
.setString(locale.countryCode ?? '');
return;
}
///App打开或者语言配置发生变化(在手机的设置里更改语言,app代码更改等)的时候会触发这个回调
Locale? Function(Locale?, Iterable<Locale>)? get localeResolutionCallback =>
(locale, locales) {
Locale? res;
String? supportLanguage;
String? supportCountryCode;
//判断系统当前第一个语系在不在app支持范围内
for (var i = 0; i < locales.length; ++i) {
var supportLocale = locales.elementAt(i);
if (supportLocale.languageCode == locale?.languageCode) {
supportLanguage = locale?.languageCode;
if (supportLocale.countryCode == locale?.countryCode ||
locale?.countryCode == '') {
supportCountryCode = locale?.countryCode;
break;
}
}
}
//无支持的语系
if (supportLanguage == null) {
res = defaultLocale;
} else if (supportCountryCode == null) {
//无完全支持的语系
res = Locale(supportLanguage);
} else {
//完全支持
res = locale;
}
_locale = res;
return res;
};
}
定义了一个Locale _locale.
全局使用,次对象可以在函数外声明,成为全局对象或写成单例
并且对比上一次.新增了3个方法
initLocale
这个方法首次进入的时候调用.用来判断之前是否手动改过.
若修改过这加载上一次的语系
_saveLocal
用来持久化语系,保存Locale的languageCode和countryCode.本文使用 shared_preferences 来做持久化
localeResolutionCallback
切换语系的回调.用户可能当前语言环境的语系不是我们支持的.我们可以通过这个方法返回一个默认的语系给用户
2.方法调用
2-1.app启动时获取上一次保存的语系
await appConfig.initLocale();
2-2.注册监听provider的值
创建Provider就不叙述了,直接到监听
Selector<Config, Locale?>(
builder: (context, data, __) {
return MaterialApp(
...
locale: data,
localizationsDelegates = appConfig.localizationsDelegates
supportedLocales = appConfig.supportedLocales
localeResolutionCallback = appConfig.localeResolutionCallback
...
);
},
selector: (context, _) => appConfig.locale,
);
2-3.页面获取当前语系&切换语系
其它地方获取这个Config的locale就是当前的语系
appConfig.locale
切换时
appConfig.locale = newLocal