Make your Flutter app support multiple Languages (Localization) natively Part 1

In this article we will try to implement localization in flutter, so our flutter app can support for multiple languages.

By default, Flutter only provides US English localizations. To add support for other languages, an application must specify additional MaterialApp (or CupertinoApp) properties, and include a package called flutter_localizations. As of November 2020, this package supports 78 languages.

Now first let’s create folders to organize our dart file.

Go to pubspec.yaml file and add flutter_localizations package and then run pub get packages to import it.

import flutter_localizations package

Next create dart class with name l10n.dart in folder l10n. This class will help us to determine which countries that we will support for localization. Then let’s add the code in l10n class.

As we can see in above code, the Locale object is and identifier to select user language and also we put on Locale constructor is language or country code. For this project we well support for 5 languages (English, Spanish, Japan, Arab, and Indonesian). You can see more about languages code in here

Next let’s make code in our main.dart file like bellow.

main.dart

The code localizationsDelegates is to inform translation to our widget, which widget that we will inform? The widget is Material Widget (GlobalMaterialLocalizations.delegate) and Cupertino Widget(GlobalCupertinoLocalizations.delegate). Also code GlobalWidgetsLocalizations.delegate to make our widget to text where the writing is from right to left exp: Arab countries. Code supportedLocales: L10n.all is to inform to our app what languages that we well support. You will found red code at HomePage() because we still not yet create that class. We well create that class later.

Next back to pubspec.yaml file again and intl package and make enable the generate flag.

pubspec.yaml

In Flutter localization, the text that translated and used by widget is from generated class. We will generated this class later.

Next add a new yaml file to the root directory of the Flutter project called l10n.yaml with the following content:

l10n.yaml

This file configures the localization tool; in this example, the input files are located in ${FLUTTER_PROJECT}/lib/l10n, the app_en.arb file provides the default template, and the generated localizations are placed in the app_localizations.dart file (this is the generated file that has we talked before).

Next move to l10n folder and add file to store our localization text. We are adding 5 five files for supporting 5 languages.

As you can see it the last name file contain languages code, this language code is mandatory if you typo for giving name then you will get error when running your project.

Next move to app_en.arb , in this file we will config localization text for English language.

app_en.arb

As you can see the content in app_en.arb is key and value, where the key we will call in widget for getting the value text. You can add more detail with adding @key (exp: @title, @greeting, and @invitation_message) at bellow of key like description or placeholders. In greeting key, we can add a parameter so our localization text will take a data when we use it. But the we must describe type data for the parameter, in this case our parameter name is username with type data String.

Next we can add code for other arb files to provide localization text for other languages.

app_ar.arb

app_es.arb

app_ja.arb

app_id.arb

As you can see, for app_en.arb have more code than other. This is because app_en.arb is default file for localization. So when we select language that our app isn’t support, app_en.arb file will be used to provide English language.

Next we will generated files that will be used for our widget. Open terminal in your code editor and run flutter gen-l10n . This command will generating files and you can see that file in ${FLUTTER_PROJECT}/.dart_tool/flutter_gen/gen_l10n

The text localization that has we created in arb files has generated. You can see each class to check for details.

Now back to main.dart file and add this code import package:flutter_gen/gen_l10n/app_localizations.dart . Then we inform our generated class to our project with adding this code

main.dart

Now our preparation for localization has complete. For implementation i will separate to part 2. Thanks for reading my article, stay tune for part 2 in here.