Internationalisation (i18n) & Localisation (i10n) in Flutter

TL;DR: Watch a summary of this article on my YouTube channel (linked below).

According to Ethnologue, a database of world languages, there are about 7,168 living languages in the world as at 2023. Of these languages, English is overall the most widely spoken with approximately 1.5 billion speakers. This number includes both native and non-native speakers who learn English as a second or third language due to e.g., education or business purposes.

However, only ~400 million people speak English as their first language around the world. While this is a significant figure, there are about 7.4 billion people in the world who are not native English speakers. Other languages such as Mandarin have approximately 1.1 billion native speakers while Spanish has approximately 460 million native speakers.

So, what do these language statistics mean for us as developers? If we are developing an application and want it to succeed on a global level, we might need to localise our applications to account for everyone regardless of the language or locale. A way to achieve this in Flutter is through internationalisation.

What is internalisation (i18n) and localisation (i10n)?

Internationalisation is the process of designing and developing software that can be adapted to various languages, cultures and regions without the need to re-engineer the code. It is often abbreviated as i18n (where “18” represents the number of letters between “i” and “n”).

Localisation on the other hand is the process of adapting the internationalised application or software for a specific region or language by translating text and adding locale-specific components. It is often abbreviated as i10n (where “10” represents the number of letters between “i” and “n”).

Internationalisation as part of the software development cycle is performed once where as localisation is a process that can be done multiple times in the lifecycle of an application to ensure that the specific locale components are added and modified as needed.

Why internalisation?

Internationalisation is a crucial aspect of mobile app development because it enables applications to be adapted and customised for users from different regions, cultures, and languages. Below are some more specific reasons why we might need to consider internationalisation and localisation.

1. Global Reach for your applications
   Tailoring and customising your application to different regions allows it to reach a more global audience. This is because, it will be available to multiple languages and cultures as opposed to being limited to a small subset in the world. It will therefore attract a more diverse user group, international markets and in turn more revenue for your app (especially if you have any form monetisation set up)
2. Accessibility
   Internationalisation is an extension of accessibility as it ensures that users from different language speaking regions can use the application with ease. This inclusivity is vital in making your application available to a broader range of users.
3. Better User Experience
   An application with internationalisation in mind enhances the user experience by making it more comfortable, intuitive, and user-friendly for all language speakers (especially outside English). Simply adding locale specific nuances in your application and tailoring aspects as ‘tiny’ as the date format will lead to a higher user satisfaction and retention rates.
4. Store Visibility
   App localisation is an important factor in app growth. When you want your application to be downloaded worldwide, you might need to consider internationalisation. With internationalisation, you’ll be able to increase your application’s reach on the Google PlayStore or Apple AppStore to users in different countries, regions or locales.
5. Competitive Advantage
   An application with internationalisation can give you a competitive edge. Providing a translated and culturally adapted version of your application in this current market will make it stand out from other competitors that don’t offer the same.

Adding internationalisation support to an existing Flutter project

Adding internationalisation to your Flutter project is a relatively easy process. In this article we’ll be exploring the easy_localization package.

• Start by creating a Flutter project. We’ll use the default counter application for this demo
• Add the easy_localization dependency to the pubspec.yaml file and run Flutter pub get to ensure the package is exposed in your application easy_localization: ^3.0.3
• Create an assets folder in your root directory and within that create another folder which will be named translations.
• Ensure you add these folders to your pubspec.yaml file, save and run Flutter pub get (for the same reason as bullet #2)
• Proceed to create the JSON language files in the translations folder created in step #3. Name these files as: {language}.{ext}. E.g., en.json (for English), fr.json (for French), es.json (For Spanish) etc.

{
  "title": "My Application",
  "tapMessage": "You have pushed the button this many times."
} 

{
  "title": "Mi Aplicación",
  "tapMessage": "Has pulsado el botón tantas veces."
}

• Import the package in the main.dart file and add the EasyLocalization widget in the runApp function. Add the required properties such as the default locale, supported locales and the path to the localisation files

  runApp(
    EasyLocalization(
      supportedLocales: const [Locale('en'), Locale('es')],
      path: 'assets/translations', 
      fallbackLocale: const Locale('en'),
      child: const MyApp(),
    ),
  );

• Also, add the following properties to the Material app widget or CupertinoApp widget to localise the app:

localizationsDelegates: context.localizationDelegates,
supportedLocales: context.supportedLocales,
locale: context.locale,

These lines of code, allows you to create a dynamic and responsive internationalisation setup in your Flutter app as the application can adapt to the user’s language preferences, providing the appropriate translations and displaying content in the chosen language.

• localizationsDelegates: This is a list of delegates that provide localised values for the application. context.localizationDelegates: This property provides a list of delegates that are already registered with the context.
• supportedLocales: This is a list of locales that the app supports. context.supportedLocales: This property provides a list of locales that are supported by the device.
• locale: This is the current locale of the app. context.locale: This property provides the locale that is currently set for the app.

Therefore, with these you can set up and manage the settings that are related to localisation for the application.

• Finally, load the translation strings where needed in the application using the tr() function provided by the easy_localization package. Use the key in the key-value pair as per the created JSON language files.

Text('tapMessage'.tr()),

When you now run the application, you should see the translated text based on your device’s language settings. Below is a screenshot of before and after implementing the above steps. Spanish is the default language set in the phone.

And that’s it! The package lives up to it’s name — easy. Let me know if you try this out for yourselves. The final project is available on my GitHub page here.

I also have the same tutorial on my YouTube channel, so feel free to check that out too and share your feedback.

“Cultural differences should not separate us from each other, but rather cultural diversity brings a collective strength that can benefit all of humanity. Also: Intercultural dialogue is the best guarantee of a more peaceful, just and sustainable world.”
— Robert Alan Aurthur

Looking forward to the conversations that this article will spark!

Thank you so much for reading and/or watching ❤

References

1. Flutter Docs. https://docs.flutter.dev/ui/accessibility-and-internationalization/internationalization

2. Ethnologue. https://en.wikipedia.org/wiki/Ethnologue

3. Wikipedia. https://en.wikipedia.org/wiki/Internationalization_and_localization

4. Flutter Tech. https://medium.com/@FlutterTech/internationalization-in-flutter-a-comprehensive-guide-1ec5deadbfa7