{"id":2944,"date":"2022-05-18T13:59:36","date_gmt":"2022-05-18T11:59:36","guid":{"rendered":"https:\/\/itell.solutions\/?p=2944"},"modified":"2022-09-15T11:27:59","modified_gmt":"2022-09-15T09:27:59","slug":"elementor-2944","status":"publish","type":"post","link":"https:\/\/itell.solutions\/en\/elementor-2944\/","title":{"rendered":"Simple and easy internationalization with Flutter"},"content":{"rendered":"
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

<\/p>\n

\n
\n

General<\/h2>\n<\/div>\n
Internationalization is an important part in the process of developing modern apps. It is absolutely necessary when you develop a multi-language app but it is also a good practice<\/strong> to prepare your app for proper internationalization even though you support only one language at the moment.<\/div>\n
\u00a0<\/div>\n
In general, internationalization is the process of designing and architecting your source code in a way that makes it easy to localize.<\/strong> The target is to structure your application so that it can be adapted for other languages or regions without having to change major parts of your source code. By translating text or adding locale-specific date formatting you are performing a localization of your internationalized application.<\/strong><\/div>\n
\u00a0<\/div>\n
Translation of strings is only one aspect of localization but it might be the first obvious thing to do if you prepare your app for multiple languages.<\/div>\n
\u00a0<\/div>\n
There are major advantages using the principles, patterns and structures of proper internationalization in a single-language-app but it boils down to one significant point: retrieving any language-specific, hardcoded strings from source code by inserting another level of abstraction.<\/strong><\/div>\n
\u00a0<\/div>\n
The target is to replace all strings with placeholders and move the strings to separate Files (for example *.arb or *.po-Files). These files are saved in a human-readable format and can be viewed in a text editor by developers and translators.<\/div>\n
\u00a0<\/div>\n<\/div>\n

Internationalization with Flutter<\/h2>\n
\n
The good news is:<\/strong> internationalization in Flutter is possible and well supported.<\/div>\n
The bad news is:<\/strong> if you are doing it from scratch it is rather complex and it takes some time to get your head around it.<\/div>\n
Even with the help of the packages flutter_localizations and intl it is quite complex because you have to create arb-Files at the right place, implement delegates and so on\u2026<\/div>\n
\u00a0<\/div>\n<\/div>\n

The solution<\/h2>\n
\n
\n
If you are developing your Flutter-application with Android Studio then internationalization becomes VERY easy.<\/strong><\/div>\n
There is a plugin for Android Studio<\/strong> which is called flutter_intl<\/strong><\/em><\/a> which is easy to use and creates all the boilderplate-code that is necessary for proper internationalization.<\/div>\n<\/div>\n<\/div>\n

\u00a0<\/span><\/p>\n

1. Install flutter_intl in Android Studio<\/span><\/h4>\n

<\/p>\n

<\/p>\n

<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t
<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

2. Initialize plugin<\/h4>
First open your project and then initialize the plugin by running the \u201cInitialize for the Project<\/strong>\u201d command from Tools – Flutter Intl menu.<\/div>
The plugin creates a file lib\/l10n\/intl_en.arb which is used for the default locale \u201cen\u201d.<\/div>
Files inside the newly generated folder lib\/generated\/ should not be edited.<\/em><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

3. Add locale for german<\/h3>\n
Select Tools – Flutter Intl – Add locale and enter the name of the new locale. In this case \u201cde\u201d. The command then creates a new file: lib\/l10n\/.arb<\/em><\/div>\n
\u00a0<\/div>\n

4. Code integration<\/h4>\n
Add dependencies:<\/div>\n
\n