Localization through custom services in the shuttle application

Preface

Brother cat also has this confusion in the project , How to manage Multilingual , If the constant is defined in , It's still a little inelegant .

The author of this article puts forward a good suggestion , Server editor , Local file cache synchronization .

Just read the database , Get an interface at the back end to maintain data , It seems to be a good plan .

original text

 https://medium.com/flutter-community/make-localization-by-custom-services-in-flutter-apps-519b5de32aae

Code

 https://github.com/VB10/custom_localization

Reference resources

•  https://pub.dev/packages/easy_localization

Text

Many applications are localized on the client side . It means , If you have any problems with your key , You must update both the string and the application . Let's learn about custom solutions , When the user will change the language , Our application will directly update the new language of each screen .

As I said , Usually we use JSON Localization of files, etc . I wrote a lot of Flutter project , So I used to localize to our customers , Generally speaking , I made a Turkish and English version of the product written by me .

Usually we define these keys like this , Then the application reads the value with the key .

Flutter There are many localization options , In particular, I have used... Many times in production projects  easy_localizaiton. This applies to all my requirements , But one day , Customers need special solutions . I've asked directly ,

• You know we have a location , What else do you expect ？
• Yes ,Veli We know that , But we want to manage localization files in our web Services and clients can change the language to our localized list response .

actually , This request is not a big problem , Because we can use remote configuration 、 Firebase There are customized back-end solutions for real-time configuration or simple localization , But no one can meet these requirements . It's time to make doughnuts ！

If we want better coding time , We must make a plan . First , Of two applications API What is the endpoint , For a list of languages we support , The application will bring the translation value by viewing the language key . When the application user changes the language in the application , We have to change the entire string value , Not the old value .

Our steps :

• The backend endpoint of the application and the application change language can be the display language
• We will implement the initial language
• We can change a point of the whole text according to the automatically received new language information .
• The user can find the current language value .

I use Firebase Created a simple back-end resource , for example :

Usually I have a custom backend , such as node.js,Java wait , Or I can choose Firebase Cloud functions , But I just want to show you how to use flutter Feature customization and localization , So we didn't use this method .

Let's start coding ！

We know how to load language resources with backend endpoints . after , I want to cache its back-end response , Because the client needs all the data for each restart . therefore , We need a caching mechanism , To keep the backend responsive , And the user doesn't change the language .

I've chosen  Hive The solution uses cached applications , therefore Hive Very fast , Security , And useful solutions for us . I chose... For many of our enterprise projects Hive. I will use this library in this project :

• Hive -  https://pub.dev/packages/hive (Cache)

• Vexana -  https://pub.dev/packages/vexana (Network)

• Provider -  https://pub.dev/packages/provider (Global State)

• First , We need a sample screen to show the key values of the initial language ( Now I accept the change to tr And then start en while Applications ).

I added... To the picture below tr and en The language value of .

Now? , I will implement a service layer to get list language results and related key values . I always prefer to provide an interface for each business operation invoked by the following example service .

Log in and copy

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

     

      
1.
      
2.
      
3.
      
4.
      
5.
      
6.
     

After I tried to implement a feature test for the back-end response of the control , I wrote this interface , It's right , So I want to validate this response for our business .

When you call the test service test file , You will see that each operation is correct .

• Test function results

It's time to implement the back-end part . Include to title and body widget after , I will call en List of resources . After completion , We achieved the first goal

• Initial resources

Now? , We connected to the back-end service , If the parameter is changed to , We can automatically display new resources . Now? , What do we need ？ If we have too many pages , We want to dynamically change the entire key . Let's take this building .

Last , I implemented this gadget . It is populated by the language list response . If you want to add a new language , You just need to add a resource key in the database after using it .

Language management

I'm going to create a for managing operations manager class . It needs to inform an application of every change . Other key requirements . I plan to set up language extension classes for key strings . This extension will be able to listen for language changes .

It changes our localization resources , The entire module is then notified through provider management . I updated the initial resource key for each language change request .

This is ready to use , But how do I use my keys . Yes , We talked about the need for an extension of string changes . First , We need to learn how to implement this manager according to the current view .

Log in and copy

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

     

      
1.
     

in other words , Each change will get a string response , But I don't use this , Because it's too long and uncontrollable . Of course , How can we write a better solution for this ？

I will replace home Text widget in view , for example :

Log in and copy

ListTile(title: Text(LocaleKeys.ageQuestion.tr(context))),

     

      
1.
     

You can choose not to use context-param Other state management methods . That's your choice , I suggest you use this .

Runtime changes from back-end responses

Now? , We are ready to use , But we need a final improvement in caching , So we'll get performance and capabilities through caching . We've asked enough . Hive It is both a fast and secure key value database .

When the hive is complete , I'll add back-end responses to the database , To start using offline or application . Usually we should get the language response , Until the user can manually change the language or get the data to the application with any data .

I created IHive Abstract classes to manage my hive class . I made one or two boxes , The first key to manage me , Another save language list .

After I updated my language Manager . I added two new parameters IHive <map> and IHive <list> , Used to save locale data .

Log in and copy

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

     

      
1.
      
2.
      
3.
      
4.
      
5.
     

I began to control applications with cached data . If the application has any cached data , It will update the manager resource the first time it starts . When the user updates the locale , I will enter in Hive In order to reuse .

I am here map Keep the selected language in the array , But usually if you want to keep other languages , You can open a new box for a new key . It will provide no more downloads in other languages , Because your old box remains in the application , And you deleted Hive.

And a little bit more , When the application starts , I'll check the data in the cache , Start with initialization .

We're almost ready ! Let's see what happens .

Other tips , You can use the stream builder to listen for configuration changes , But I don't use streams to create screens , Maybe you can create a base class and listen for configuration changes , Without any state management .

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

Thank you for reading

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

GitHub Code

 https://github.com/VB10/custom_localization

end

---

Cat elder brother

• WeChat ducafecat

•   Blog ducafecat.tech

•  github

•  bilibili