Update String Over The Air in Flutter for Free

Yes, you read it right, for free. You can update your Text or String anytime you want and will be reflected on your Flutter app instantly, without the need for app submission.

Why, Who, When, Where & What

The story is started when another team often want to change the translation in our app. One day they decide to use the classic “Lorem Ipsum” and the next day another guy comes into the picture and they wanted “Khaled Ipsum” everything is good and later on, the day before release they changed it again to “Obama Ipsum”. It’s not stopped yet, after the app lives, the team finally can you can take a breath and relax a bit. Then, lo and behold, on the very next day they think “Heisenberg Ipsum” would be nice.

Well, changing the translation String is a piece of cake, it can be done in mere seconds or minutes, but it’s a tedious process. Depend on how big your project is and how you set up your CI/CD pipeline is. For me to compile the app at least need one hour in our CI/CD pipeline until it’s available for another team to test on TestFlight or Internal Tester at Playstore. If the app is in Production then you need to do another app submission wait for one day or one week until the Apple reviewer and Playstore reviewer review your update and hopping the Apple team didn’t change or update a new item on their review guideline.

How

There is a Software as Service for you to maintain a scalable software localization platform like Localizely or Phrase, they give you an over-the-air update, with quick and easy integration and good documentation. If you have the budget then no need to read further. However, if you don’t have the budget then you can continue reading and see if this solution is suitable for your use cases.

Limitation

Before we start I need to tell some limitations when you implement the initial version of OtaString version 0.0.1.

1. Your String is public and no console or translation editor
   To update your String on release version then you need to have your translation JSON files hosted somewhere in your server or S3 bucket. Also, you need to manually manage your JSON files there’s no fancy editor to help non-tech people update the translation like Phrase or Localizely.
2. Doesn’t support Dart Locale
   This means if your app needs to follow device language then this package is not for you. You can use this package if your app only supports one language or users can set their preferred language if your app has more than one language that users can choose from somewhere in your app.
3. Need to initialize Hive before you use it.
   This initial version is dependent on the Hive package so you need to use or init Hive first.
4. You can’t Mock it but you can Fake it.
   If you want to test using Mockito and try to Mock then it will fail, but of course, you can Fake it if need to test it in a unit test.
5. Only one language for the Default language
   If one of your translations missing from your JSON then it will get the default value that you define. When the app launches for the first time then will use default language, which means to say your user only can see one language until you’re done updating the translation.

All this limitation is on the initial version 0.0.1. Hopefully, someday all the limitations are gone on the next version.

Overview

If the app is First launched then will use the default language after that, if you trigger the Update translation function then it will fetch your translation files and put them in Hive Db, the next app launch will get data from Cache.

How To

1. Install the dependencies

dependencies:
  ota_string: ^0.0.1
  
dev_dependencies:
  build_runner: any
  ota_generator: ^0.0.1

2. Create a new Class for your String

You need to Annotation your class with ‘@OtaStringClass’ and import hive and ota_string. Translation Server is your public translation JSON translation files, Language key is how many languages your app has. The structure of the JSON file of your translation needs to follow this example for now…

3. Run build_runner

flutter packages pub run build_runner build

If success then will app_localize.g.dart will be generated and you ready to use it.

4. Init, Load, Update the language

await Hive.initFlutter();
OtaAppLocalize.load('en');
OtaAppLocalize.current.updateData();

When you load the language it needs to be matched with the one that you put on the language key. To update the translation you can call updateData() function.

5. Show & Replace String

To show String is simply called the generated files and it’s done.

var helloString = OtaAppLocalize.current.hello;

In JSON you can have dynamic value, to put the dynamic value you only need to put any characters in {}.

My Name is {name}, Im from {location}

Name and location will be replaced by String from your app, to replace the String you can call function .replaceOtaStringWith

var res = OtaAppLocalize.current.name_location
    .replaceOtaStringWith(['Spock', 'Vulcan']);

6. Stagging Vs Production

You need to pass another JSON file in OtaStringClass for Stagging and Production String translation

@OtaStringClass(
    translationServerStg: 'https://aldychris.github.io/JsonMocks/OtaJson/BasicSample.json',
    translationServer: 'https://aldychris.github.io/JsonMocks/OtaJson/BasicSampleProduction.json',
    languageKey: ['en', 'zh', 'tlh'])

Then when running the project you need to define a variable otaStringProdEnv as true or false.

--dart-define=otaStringProdEnv=false

Example

What’s Next

Check out the package and I hope, this short article can help you understand the ideas of the packages.

ota_string | Dart Package

ota_generator | Dart Package

Hopefully, if I have time then will keep this project updated and do this improvement :

• Support Flutter Locale, Date format & Plural
• Support update String based on the app version
• Support more than one default translation
• Have console and UI for adding or modifying the translation

Last but not least tap the clap button 👏 to support me or hold the clap button, to leave more claps.