原文链接:https://www.didierboelens.com/2018/04/internationalization---make-an-flutter-application-multi-lingual/
这篇文章介绍了一种让你的Flutter App支持多语言的方法,用户可以选择一种不同于手机设置中设置的语言。
难度:中等
前言
国际化已经被讨论了很多次了,官方关于国际化的文档可以看 这里。因为想要理解国际化的概念,同时满足我的项目需要,我决定写下这篇文章来分享我的经验,也希望可以给你们一些提示。
需求
- 默认情况下,工作语言是在手机的系统设置中配置的。
- 如果App不支持设置的语言,那么默认值为“en”。
- 翻译文件被当作资源文件(asset)存放在Json文件“language specific”中。
- 用户可以从支持的语言列表中选择另一种工作语言。
- 当用户选择来另一种工作语言时,为了展示最新选择的语言,整个App布局刷新。
内部依赖
Flutter本身就支持地区化(即Locale的概念),Locale类的languageCode用来判断用户所使用的语言。
使用这个地区化的包,需要用到flutter_localizations
包,我们在pubspec.yaml文件中添加如下依赖内容:
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
我们保存pubspec.yaml文件,编译器会提示你load/import这个新依赖。
翻译文件
下一步就是创建翻译文件,然后将它们定义为资源文件(asset)。
根据我以前开发网站的经验,我将这些资源文件存放在名为“/locale”的文件夹下,命名惯例为“i18n_{lang}.json”,在这篇文章中我也使用这些规则。
我们新建一个和“/lib”同级别的文件夹“/locale”,然后在这个文件夹中新建两个文件,分别为“i18n_en.json” 和“ i18n_fr.json”。
文件夹树现在是这个样子的:
MyApplication
|
+- android
+- build
+- images
+- ios
+- lib
+- locale
|
+- i18n_en.json
+- i18n_fr.json
+- test
接下来我们需要将这两个文件设置为资源文件的一部分,编辑pubspec.yaml文件,然后将它们都添加进assets部分:
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
flutter:
assets:
- locale/i18n_en.json
- locale/i18n_fr.json
实现
现在我们可以开始实现我们的需求了。
首先在 main.dart 中初始化App的地方添加相关配置:
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart'; // 导入flutter的包
import 'translations.dart'; // 导入我们自定义的处理翻译逻辑的包(后面会讲)
void main