快速適配 Flutter 之語言國際化

若是你但願你的APP走出海外，那麼就須要你在編寫代碼時考慮支持不一樣的語言環境，設置一些「本地化」的值，例如文本/佈局。Flutter自己是具有國際化的，在適配方面也較爲簡單，今天我將會介紹一個名爲Flutter Intl的插件快速實現Flutter的語言國際化。

Flutter Intl

以前在學習適配國際化的時候，出現最多的一個組件叫作flutter_i18n，不過因爲一些緣由，這個插件已經中止維護了，後來無心中發現了一個名爲Flutter Intl的插件，咱們只須要在VSCode/Android Studio中安裝他便可。

添加依賴

默認狀況下，Flutter僅提供美國英語本地化。要添加對其餘語言的支持，應用程序必須指定其餘MaterialApp屬性，幷包含一個名爲的單獨包-「flutter_localizations」。

在pubspec.yaml中添加flutter_localizations依賴並執行packages get

# 國際化
flutter_localizations:
    sdk: flutter
複製代碼

以下圖所示：

初始化項目

接下來咱們選擇Tools -> Flutter Intl -> Initialize for the Project就會對項目進行初始化

初始化結束後，pubspec.yaml中會自動增長如下字段

flutter_intl:
    enabled: true
複製代碼

表示國際化已經開啓。與此同時，lib目錄下會新增generated和l10n兩個目錄。

• l10n目錄下爲arb文件
• generated目錄下爲根據arb文件自動生成如下dart代碼

ARB 文件

ARB文件擴展名爲：Application Resource Bundle 意爲應用程序資源包，並獲得Google的支持，每一個.arb文件都包含一個JSON表，該表從資源ID映射到本地化值，文件名包含已爲其轉換值的語言環境。

因此，若是咱們想新增一門語言支持的話，只須要經過插件添加相應的arb文件便可。

新增語言

• 經過插件新增arb文件

而後填入相應的local值生成arb文件，如zh表示中文。

以後便會在lib/generated/intl/目錄下會生成新的messages_xx.dart文件

配置語言

arb文件生成成功後，剩下的即是在MaterialApp中配置supportedLocales和localizationsDelegates

MaterialApp(
…………
    // 設置語言
    localizationsDelegates: const [
    S.delegate,
    GlobalMaterialLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate
    ],
    // 講zh設置爲第一項,沒有適配語言時，英語爲首選項
    supportedLocales: S.delegate.supportedLocales,
…………
）
複製代碼

咱們來解釋下上面這段代碼出現的變量

• localizationsDelegates列表中的元素是生成本地化值集合的工廠。

• S.delegate 咱們項目的本地化委託類，插件自動生成，他會根據你的arb文件自動生成對應的函數。

• GlobalMaterialLocalizations.delegate 爲Material Components庫提供了本地化的字符串和其餘值。

• GlobalCupertinoLocalizations.delegate 爲Cupertino Components庫提供了本地化的字符串和其餘值。

• GlobalWidgetsLocalizations.delegate定義widget默認的文本方向，從左到右或從右到左。

• supportedLocales支持的本地化。
• S.delegate.supportedLocales咱們項目支持的本地化，插件自動生成，它會在你添加arb文件時自動更新你的支持的本地化。

有關這些應用程序屬性的更多信息，它們所依賴的類型以及如何國際化Flutter應用程序，能夠查閱官方文檔👉《Flutter 應用裏的國際化》

使用

上文提到了，配置好該插件後，咱們須要作的即是在arb文件中編輯相應的字段便可，這裏給出示例。

若是有其餘語言，只須要再添加一份arb文件便可。

接下來我麼只須要將字符串部分替換掉便可。

而後保存文件，插件就會在message_xx.adart中自動添加對應的函數方便獲取該字符串。

固然，arb還支持其餘語法，這裏說下最多見的佔位符語法：

• arb文件

{
  "dialogTip":"Hello $name"
}
複製代碼

• 使用

S.of(context).dialogTip("Rhyme");
複製代碼

更多使用方式見intl | Dart Package

切換語言

上面說了這麼多都只是告訴咱們如何適配多種語言，上面這些操做均是跟隨系統自動調整語言的，那麼有什麼辦法可讓用戶自定義切換語言呢？天然是能夠的。

咱們只須要在合適的地方調用如下代碼便可。

S.load(Locale('zh', 'CN');
複製代碼

這裏的zh/CN能夠換成其餘語言代碼。

而後咱們將選擇好的語言用SharedPreference保存，每次啓動App時檢查用戶設置的語言便可。效果以下圖所示：

最後

以上就是本文的所有內容了，總的來講，有了Flutter Intl工具以後，開發者能夠省去繁瑣的代碼配置，安心將精力花在文字適配（翻譯）上。

代碼已上傳至Github，以爲有幫助的不妨給個star👇

github.com/YueYongDev/…

參考

• intl | Dart Package
• Flutter-國際化適配終結者
• FunFlutter系列之國際化Intl方案
• Flutter 應用裏的國際化

---

年前給本身定了一個小目標，若是公衆號讀者超過2000就拉一個讀者交流羣，有興趣的能夠掃描下方二維碼關注公衆號「01二進制」後臺回覆「加羣」，咱們一塊兒交流，一塊兒進步，一塊兒成長！