在 Flutter 應用程式中通過定製服務進行本地化

會煮咖啡的貓發表於2022-02-21
Flutter

前言

貓哥在專案中也是有這個困惑，如何管理 多語言，如果常量定義方式，還是有點不優雅。

這篇文章的作者就提出了個不錯的建議，服務端編輯，本地檔案快取同步。

就是讀取資料庫啦，後端弄個介面維護維護資料，貌似是一個不錯的方案。

原文

https://medium.com/flutter-co...

程式碼

https://github.com/VB10/custo...

參考

正文

許多應用程式在客戶端進行本地化。這意味著，如果您的金鑰有任何問題，您必須同時更新字串和應用程式。讓我們學習自定義解決方案，當使用者將改變語言，我們的應用程式將直接更新每個螢幕的新語言。

正如我所說的，通常我們使用 JSON 檔案等的本地化。我寫了許多 Flutter 專案，所以我過去使本地化為我們的客戶，一般來說，我做了一個土耳其和英語版本的產品由我寫的。

通常我們像這樣定義這些鍵，然後應用程式用鍵讀取值。

Flutter 有許多本地化選項，特別是我在生產專案中多次使用了 easy_localizaiton。這對我的所有要求都適用，但有一天，客戶需要特殊的解決方案。我已經直接要求,

  • 你知道我們有一個 location ，你還指望什麼？
  • 是的，Veli 我們知道這一點，但是我們想要管理本地化檔案在我們的 web 服務和客戶端可以更改語言到我們的本地化列表響應。

實際上，這個請求並不是什麼大問題，因為我們可以使用遠端配置、 Firebase 實時配置或者簡單的本地化都有自定義的後端解決方案，但是任何人都不能滿足這些要求。該做甜甜圈了！

如果我們想要更好的編碼時間，我們必須制定計劃。首先，兩個應用程式的 API 端點是什麼，以獲得我們支援的語言列表，應用程式將通過檢視語言鍵帶來翻譯值。當應用程式使用者更改應用程式中的語言時，我們必須更改整個字串值，而不是舊值。

我們的步驟:

  • 應用程式和應用程式更改語言的後端端點可以是顯示語言
  • 我們將實現初始語言
  • 我們可以根據自動接收到的新語言資訊改變整個文字的一個點。
  • 使用者可以找到當前的語言值。

我用 Firebase 建立了簡單的後端資源，例如:

通常我有一個定製的後端，比如 node.js，Java 等等，或者我可以選擇 Firebase 雲函式，但是我只是想展示如何使用 flutter 特性定製本地化，所以我們沒有使用這個方法。

讓我們開始編碼吧！

我們知道如何用後端端點載入語言資源。之後，我想快取它的後端響應，因為客戶端需要每次重新啟動的全部資料。因此，我們需要快取機制，以保持後端響應，而使用者不更改語言。

我已經選擇了 Hive 解決方案使用快取的應用程式，因此 Hive 非常快速，安全，和有用的解決方案為我們。我為我們的許多企業專案選擇了 Hive。我將在這個專案中使用這個庫:

我在下面的圖片中新增了 tr 和 en 的語言值。

現在，我將實現一個服務層來獲取列表語言結果和相關鍵值。我總是傾向於為下面的例項服務呼叫的每個業務操作提供介面。

abstract class ILangugaeService {
  final INetworkManager networkManager;
  ILangugaeService(this.networkManager);
  Future<List<String>?> fetchLangageList();
  Future<Map<String, dynamic>?> fetchSpesificResources(String key);
}

在我嘗試為控制元件後端響應實現一個特性測試之後，我編寫了這個介面，它是正確的，因此我想為我們的業務驗證這個響應。

當您呼叫這個測試服務測試檔案時，您將看到每個操作都是正確的。

  • 測試功能結果

是時候實現後端部分了。在包括 to title 和 body widget 之後，我將呼叫 en 的資源列表。完成後，我們完成了第一個目標

  • 初始資源

現在，我們連線到了後端服務，如果更改為語言引數，我們可以自動顯示新的資源。現在，我們需要什麼？如果我們有太多的頁面，我們希望動態地更改整個鍵。讓我們把這個建築。

最後，我實現了這個小工具。它由語言列表響應填充。如果您想要新增一種新的語言，您只需在使用完成後在資料庫中新增一個資源鍵即可。

語言管理

我將建立一個用於管理運營的 manager 類。它需要通知一個應用程式的每一個變化。對鑰匙的其他要求。我計劃為鍵字串設定語言擴充套件類。這個擴充套件將能夠監聽語言的變化。

它改變了我們的本地化資源，然後通過提供程式管理通知整個模組。我更新了每個語言更改請求的初始資源鍵。

這是準備使用，但我如何使用我的鑰匙。是的，我們談到需要一個字串變化的擴充套件。首先，我們需要學習如何根據當前檢視實現這個管理器。

Text(context.watch<LanguageManager>().resources?[LocaleKeys.hello.name] ?? '')

也就是說，每次更改都會得到字串響應，但我不使用這個，因為它太長而且不能控制。當然，我們如何才能為此編寫一個更好的解決方案？

我將替換 home 檢視中的文字小部件，例如:

ListTile(title: Text(LocaleKeys.ageQuestion.tr(context))),
您可以選擇不使用 context-param 的其他狀態管理方法。那是你的選擇，我給建議應該用這個。

來自後端響應的執行時更改

現在，我們已經準備好使用，但是我們需要最後的改進快取，因此我們將通過快取獲得效能和能力。我們的要求已經夠多了。Hive 它既是一個快速又安全的鍵值資料庫。

完成配置單元后，我將向資料庫中新增後端響應，以便使用離線或應用程式啟動。通常我們應該獲取語言響應，直到使用者可以手動更改語言或者獲取資料到具有任何資料的應用程式。

我建立了 IHive 抽象類來管理我的 hive 類。我做了一個兩個盒子，第一個管理我的鑰匙，另一個儲存語言列表。

在我更新了我的語言管理器之後。我新增了兩個新的引數 IHive <map> 和 IHive <list> ，用於儲存語言環境資料。

LanguageManager(
  LanguageService(ProductNetworkManager()),
  LanguageHive(),
  LanguageListHive(),
  ),

我開始控制那些有快取資料的應用程式。如果應用程式有任何快取資料，它將在第一次啟動時更新管理器資源。使用者在更新語言環境時，我將進入在 Hive 中響應以便再次重用。

我在 map 陣列中保持選擇的語言，但是通常如果你想保持其他語言，你可以為新的鍵開啟一個新的框。它將提供不再下載其他語言，因為您的舊框保留在應用程式，而您刪除的 Hive。

還有一點，當應用程式啟動時，我將在檢查快取中的資料之後，首先進行初始化。

我們差不多準備好了! 讓我們看看結果如何。

其他提示，您可以使用流構建器監聽配置更改，但是我不使用流建立螢幕，也許您可以建立一個基類並監聽配置更改，而不需要任何狀態管理。

Thank you for reading ?
Have a good hacking, both in real life and coding life

感謝您閱讀 ?

《Have a good hacking, both in real life and coding life》

GitHub 程式碼

https://github.com/VB10/custo...

end

© 貓哥

相關文章