Understanding App Localization in Flutter

A team of flutter developers agreed to work on an e-commerce mobile app to bridge the gap between online buyers and sellers by providing a platform for businesses to showcase their products while customers purchase them. However, they faced a big problem as soon as they decided to expand to different countries and regions with unique languages. The users in these new locations struggled to use the app as it was only available in the default mobile app language.

The developers soon realized how important it was to make the app more accessible to users in other countries hence the need to write the app in a way that makes it possible to cater for their diverse user base. But the only drawback was how do they implement that solution for the app?

From a business perspective, a large customer base usually means more revenue and opportunities for mobile app expansion. However while the benefits of global expansion exist, one major factor to address is the language and cultural barrier which involves adapting the app user interface for users in different locations. This is where the need for App Localization comes into the picture.

In this article, we will take a deep dive into App Localization, what it entails and how to integrate it into a sample flutter app. Specifically, we’ll cover the following:

• What is App Localization
• Benefits of Integrating App Localization in your Flutter app
• App Localization in Use: Integrating Localization in your Flutter app
• Testing our sample app
• Conclusion

Shall we?

What is App Localization

App localization is a process of making your mobile apps more accessible and available to users in different locales. It answers the question of adopting a mobile app’s language, text, currency symbols, or date to match the user’s current location.

Most times the words internationalization (i18n) and localization (l10n) are used interchangeably whereas they both have their unique function.

App Localization/ App Internationalization

Localization focuses on making your mobile app available to other locales by defining the user’s language and region. While Internationalization focuses on the steps involved in structuring your code to make it easy to localize. It provides the ability to support more than one locale which simplifies localization.

Benefits of Integrating App Localization in your Flutter app

1. Better Communication: App Localization ensures that users are able to understand in their language the app features and functions thereby increasing user engagement and retention.
2. Greater Global Reach: App Localization helps to increase a mobile app’s global reach as users are more likely to engage with an app that is presented in their native language.
3. Increased User Experience: Adapting a mobile app user interface and functionality for users in different target markets provides a more personalized and customized experience for users.

App Localization in Use: Integrating Localization in your Flutter app

Now that we have a clear picture of what App Localization entails, let’s see how to implement it in a sample flutter app. We will be using a resume mobile application built with flutter to demonstrate the step by step integration of App Localization.

To follow up with the integration, check out the starter project on GitHub. Also, for this article we will localize for English and French language nonetheless you can localize for any language as long as the core concept is understood.

Let’s get into it

The first step is to add the flutter_localization package as a dependency to your pubspec.yaml.

Next, add the intl package also known as internationalization as a dependency to your pubspec.yaml.

Then in the section of the pubspec.yaml that is specific to Flutter enable the generate flag. We do this by adding this line generate: true that helps with automatic code generation of the flutter localization files.

App Localization Integration for IOS

Now that we have added the required dependencies for App Localization, when it comes to IOS apps we need to add the list of supported localizations as that is very important. We do this in the ios/Runner/info.plist file to indicate the language codes the mobile app supports.

Then in the root directory of the app, create a file named l10n.yaml and add the following:

• arb-dir: This is where you specify the location directory of your arb template files.
• template-arb-file: This specifies the default template arb file that will be used as the basis for generating dart localization files. For this app we will be using intl_en.arb (English language).
• output-localization-file: This is a file for auto-generated localization classes located within the ${FLUTTER_PROJECT}/.dart_tool/ directory.

Next is to create the template arb files also known as Application Resource Bundle. First, create a directory named l10n in the lib directory of the app. Then within that directory create the default template arb file: intl_en.arb. In the file add the json object that contains the language specific localized text in the form of key/value pair.

Next, create the arb template files for the language code the app supports apart from the default: intl_fr.arb. Then add the json object that contains the language specific localized text.

Now, restart the mobile app to apply those changes within the application. You should see the generated files in ${FLUTTER_PROJECT}/.dart_tool/

Great, you are one step away from localizing your app. The last step is to specify the supported app locale in the main.dart under MaterialApp by adding localizationsDelegates and supportedLocales.

For us to add both properties, we need to add the import statement import ‘package:flutter_gen/gen_l10n/app_localizations.dart’;

Now that we have successfully integrated App Localization in the resume app we can go ahead to use it within our UI views or our app in general. In the arb template files, the key of each entry is used as the method name of the getter, while the value of that entry contains the localized message. For example, in the custom AppBar component view, replace the string “Resume App” with AppLocalizations.of(context)!.resume_app.

The key is used to access the localized message depending on the selected locale. Now to make it easy to access the localized message without using AppLocalizations.of(context)!, we can create a simple extension off the BuildContext that takes the App Localization and returns it as a non optional value.

Create a lib/extensions/app_locale.dart file with the following content:

Then we can replace AppLocalizations.of(context)! with context.loc within the AppBar component view by importing the extension file.

Testing our sample app

Great, we have successfully integrated app Localization in our resume app. In order to confirm the validity of the implementation, switch the default language code of the mobile device under the phone settings to one of the supported locales.

This means for example switching between English and French locales should cause the text to update automatically and vice-versa as shown below.

Conclusion

In this article, you were introduced to App Localization, the benefits of integrating App Localization and how to easily integrate it into your flutter mobile apps using a sample resume app. For further detailed information, check out the App Localization documentation provided by the Flutter team. Thanks for reading.

Check out the complete source code for the sample app. If you have any questions or inquiries, feel free to reach out to me on Twitter: @CalebJ or LinkedIn: @CalebJ.