Internationalization

Adding a Language

Add a new Language

Before letting Sidekick know that there’s a new language in the app, translate the existing files into your target language.

For this you’ll find a folder named localization in the root folder of sidekick:

You will note above some json files. These contain the actual texts which comes with a corresponding key (or piece of the app). Sidekick only uses the keys to identify a translation. The actual translation can be a simple key that stands for a specific translation as String or more complex.

To start, copy any of the folders and change the folder name to the desired language. If you're not sure please check for the language code here. To construct a folder name firstly pick a code from the ISO-639 Language Codes List followed by a - and then a country code from the ISO-3166 Country Codes List. For example, es for Spanish and MX for Mexico, so the folder name would be es-MX.

Once that's done, start going through the files and changing the values for the JSON. You may encounter different types of key-value pairs.

Simple Strings

These are the easiest to handle, it is just a static string that can be translated directly.

For example:

{  
	"refresh": "Actualizar",
	"New Project: "Nuevo Projecto"  
}

The key is then used in the code to place the translation into the UI:

I18Next.of(context).t('components:refresh')

Nested values

You may also find nested translations such as:

{  
	"atoms": {  
		"refresh": "Actualizar"
	}  
}

Which is similarly called in code in the following way:

I18Next.of(context).t('components:atoms.refresh')

Variables in translations

You can also encounter variables inside the translations. For example:

{  
	"atoms": {  
		"countFound": "{{count}} encontrado(s)"  
	}  
}

Make sure that the variable, which is between the curly brace {{varName}} is still part of the value after translation, but place it wherever it fits.

This can be called in the following way:

I18Next.of(context).t('components:atoms.countFound', variables: {  
	'count': count.toString(),  
}),

In Summary

You can specify the way translations will be called in the actual source code! The file components.json, where the name of the file components is also the namespace for the translation. After that a : is following to tell the I18Next package that now he can go and find the first root-key in the namespace. In Example 3 you can see that atoms is one of the root keys. Now with every . you can specify the nested key inside atoms (in code). You can structure and nest as deep as your app needs, but try to keep it as simple as possible, please.

Adding a language into Flutter

The hard part's done. Now let's let Sidekick know about the new language.

Adding the new assets

Firstly, you need to tell Flutter where to find the new folder of your translation. For that just add a new assets in the pubspec.yaml entry like shown:

Adding language to the language manager

Next, you only need to add a new Locale to the Language-Manager which you can
find in lib > i18n > language_manager.dart:

Adding the localized name to the rest of the languages

You're nearly done! Now, we need to show the user the proper language name in the native language, so don’t forget to add an entry to the settings.json translation file:

Note: You need to add your language entry (For example: "es-ES": "Español") to all existing settings.json!

That’s it! That’s all you need to do to add a new translation. Flutter will now automatically
detect and read the new language and provide it in the DropdownMenu. Congrats!