Have you ever wondered how Netflix displays its shows’ names in different languages globally? For example, La Casa de Papel is anointed Money Heist for the English-speaking markets, while Haus des Geldes for German-speaking markets.
Developing an app that users can use worldwide is a major goal for all app developers. Besides, today’s businesses need to be available in as many languages as possible. But the complexity of app localization and Internationalization can be a significant roadblock.
Internationalization and Localization are essential for ensuring that people who need your web and mobile apps can use them, no matter where they are. This is true for users, regardless of whether they speak English as their native language.
And to your knowledge, to make your app support local languages, you have to write it in a way that it could localize values, such as texts and layouts. In this post, we are taking a closer look at Flutter app internationalization. Open-source, cross-platform SDK, Flutter localization tools contain widgets and classes that help with Internationalization. Moreover, the Flutter libraries themselves are internationalized.
Before we delve into Flutter app localization, what are the benefits of Localization and Internationalization followed by definitions.
What is app localization?
Localization is the process of adapting software to be used in a specific region or language. It focuses on making your app accessible to users based on their locale. For example, support languages, currencies, dates, and number format plurals might be different for another locale, too. It’s also called l10n – 10 and depicts the sum of letters between L and N in Localization.
What is app internationalization?
On the contrary, Internationalization is the process of creating software that’s designed to be used in multiple locales. It focuses on making your app accessible to users who speak different languages. In simple words, Internationalization involves creating versions of your app that people can use in their languages and cultures. It consists of creating multiple locale-based files, importing locale-based assets, etc. It’s also called i18n – 18 depicts the sum of letters between I and N in Internationalization.
Both Internationalization and Localization are closely related but also differ in meaningful ways. Internationalization refers to the process of making a software application accessible in multiple languages. In contrast, Localization refers to the process of adapting the content and appearance of an application to the language and culture of the target audience.
Nevertheless, both are necessary for companies to create apps that customers can use in different countries and regions. Yet, many companies often neglect the importance of Internationalization and Localization in their software development processes. But you should not. Let us find out why.
Benefits of app localization and Internationalization:
The right combination of app localization and internationalization services can help your app succeed across various markets. There are many benefits to providing your mobile app in multiple languages, such as:
- Increased user engagement
- Increase your user base and also the number of people who are able to access your app
- Help you to gain a competitive advantage in your marketplace
- A more intuitive user experience
- The ability to better serve your users
- Reduced support costs
- A reduction in customer service calls
- The ability to expand into new markets without new infrastructure
- The ability to reduce reliance on a single software provider to make the app personalized for global users
Internationalization and Localization in Flutter App
Flutter is a mobile app development framework that not only makes it easy to build high-quality apps but also ensures consistency across various platforms and devices. In addition, Flutter’s internationalization and localization features allow you to internationalize and localize your apps simply. This also makes it easy to create versions of your apps to use throughout different languages and cultures.
Steps for Internationalizing and Localizing a Flutter App
There are a couple of ways for Flutter app internationalization. This post will briefly analyze how to internationalize your Flutter app with the Flutter Intl plugin. The package provides internationalization and localization facilities, such as message translation, plurals and genders, date/number formatting and parsing, and bidirectional text.
All code samples used in this guide are available on the GitHub repo.
Step 1: Install the plugin
Firstly, we have to install the Flutter Intl plugin in our IDE: Visual Studio Code or Android Studio.
In this guide, we will explain how to do it in Android Studio. Though it should be fairly similar to VS Code; just follow the steps in the extension documentation.
You can also use the CLI tool intl_utils if you want similar operations for Continuous Integration.
Step 2: Initialize the plugin
Now we’ll go to Tools in your IDE -> Flutter Intl and hit Initialize for the Project.
You will see en locale added by default when auto-creating a file lib/l10n/intl_en.arb.
Note: The Flutter Intl plugin generates and maintains files inside the folder of lib/generated/ that you better not edit manually. However, you should keep these files in your project repository.
Step 3: Set up your app
Now, we will Add dependencies needed for Localization to pubspec.yaml file:
dependencies:
# Other dependencies...
flutter_localizations:
SDK: Flutter
We will set up our localizationsDelegates and supportedLocales to access the strings, localize Material’s and Cupertino’s widgets into up to 78 languages and set up text directions within the app.
import 'package:flutter_localizations/flutter_localizations.dart';
import 'generated/l10n.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
localizationsDelegates: [
S.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: S.delegate.supportedLocales,
title: 'Flutter Demo',
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
Step 4: Add other locales
At this phase, we can add locales we want our Flutter app to have.
To do this, we have to again go to Tools -> Flutter Intl and run the Add Locale command.
Step 5: Add string keys to the main ARB file
The Application Resource Bundle (.arb) is a file format for Localization based on JSON. Google supports it and it is the official localization library for Dart.
File content example:
{
"pageHomeConfirm": "Confirm",
"pageHomeWelcome": "Welcome {name}",
"pageHomeWelcomeGender": "{gender, select, male {Hi man!} female {Hi woman!} other {Hi there!}}",
"pageHomeWelcomeRole": "{role, select, admin {Hi admin!} manager {Hi manager!} other {Hi visitor!}}",
"pageNotificationsCount": "{howMany, plural, one{1 message} other{{howMany} messages}}"
}
In the example above, we have 5 keys:
- pageHomeConfirm – A very simple key
- pageHomeWelcome – A key whose translation contains a placeholder name
- pageHomeWelcomeGender – A gender key whose translation depends on a placeholder gender. Genders are formatted in ICU format.
- pageHomeWelcomeRole – A select key whose translation depends on a placeholder role. Selects are formatted in ICU format.
- pageNotificationsCount – A plural key whose translation depends on a placeholder howMany. Plurals are formatted in ICU format.
By default our main ARB file is lib/l10n/intl_en.arb. When we add new key-value pairs to it and save the file, the keys will automatically be available for auto-complete in your Dart code.
Step 6: Reference the keys in Dart code
Now the ARB file’s keys correspond to methods from the S class. For example:
Widget build(BuildContext context) {
return Text(
S.of(context).title
);
}
You can also add translation strings to Dart code and extract them to ARB files via Android Studio intention actions or via code actions in VS Code. This way, we can add the same keys to all ARB fields.
Need help with Internationalizing and Localizing your Flutter App?
Localization and Internationalization go hand in hand with your app growth. It not only makes your app available globally but also increases your reach, appealing to people from different countries. On top of that, when you use Flutter, your app growth multiplies by 10x.
However, to stay ahead of the curve, you always need experts to back your business, specifically for technology-driven businesses. That’s where your partner, Flutter app development company, comes into play. You need a team of developers that always stay active and be ready to help you set the trends in the market.
If you are looking to hire Flutter developers who can help you beyond internationalizing your app, contact us right away. We are one of the early adopters of Flutter and have a workforce of nerdy programmers. You can screen them and hire anyone as a dedicated developer to work on your project. Get more information from our business manager now!