Mobile app developers face a constant need to reach a global audience. One of the most effective ways to do so is by implementing multiple languages in their application. By offering the option to choose a language, you ensure that users feel comfortable and understand the application.
Furthermore, by having an application with multiple languages, you increase the possibility of reaching a wider audience, which can translate into an increase in downloads and usage of the application. Therefore, implementing multiple languages in a mobile application is essential to attract and retain users from different parts of the world.
In this article, we will explain how to use one of the most popular Flutter packages in the process of adapting multiple languages to an application.
How to set up languages in a Flutter application with Easy Localization?
One of the most commonly used solutions to ensure multiple languages in applications is the use of the Easy Localization package. This package simplifies the process of internationalization, also supporting language translations, gender handling, text direction, and pluralization.
Some of the features it provides include:
Easy translations for many languages.
Ability to load translations from JSON, CSV, Yaml, XML files using Easy Localization Loader.
Keeps language changes stored.
Supports plural, gender, nesting, RTL.
Translation key redirection to fallback languages.
Error widget for missing translations.
Extension methods in Text and BuildContext.
Code generation for localization files and keys.
Verification of null values.
Implementation of the Easy Localization package
Traditionally, this package is configured as follows.
Create a translations folder inside assets and store the translations as shown:
assets
└── translations
├── {código de Idioma}.{ext}
└── {código de Idioma}-{código de País}.{ext}
For this case, we have created two files es.json and en.json, where the translations for the Spanish and English languages are stored.
assets
└── translations
├── es.json
└── en.json
Example of the es.json file:
{
"hello": "Hola",
"home": "Inicio",
"english": "Inglés",
"spanish": "Español"
...
}
Next, it is necessary to declare the new folder in the pubspec.yaml file so that it can be read.
flutter:
assets:
- assets/translations/
As an additional detail, for the translation to work on iOS, you must add the supported language configurations in the ios/Runner/Info.plist file as described.
<key>CFBundleLocalizations</key>
<array>
<string>es</string>
<string>en</string>
</array>
Then, add the EasyLocalization widget in the main class as presented. Where supportedLocales represents the list of languages, path is the location of the language files, startLocale sets the initial language when none is set, fallbackLocale is used so that if a translation is not available, it will use the one from the configured language, useFallbackTranslations enables the fallback language.
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await EasyLocalization.ensureInitialized();
runApp(
EasyLocalization(
supportedLocales: const [
Locale('es'),
Locale('en'),
],
path: 'assets/translations',
startLocale: const Locale('es'),
fallbackLocale: const Locale('es'),
useFallbackTranslations: true,
child: const OctaApp(),
),
);
}
Additionally, we must add the new parameters localizationsDelegates, supportedLocales, locale, to the MaterialApp class for proper functioning.
class OctaApp extends StatelessWidget {
const OctaApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: AppConstants.appTitle,
theme: AppTheme.lightTheme,
onGenerateRoute: AppRouter.generateRoute,
localizationsDelegates: context.localizationDelegates, //<--
supportedLocales: context.supportedLocales, //<--
locale: context.locale, //<--
home: const SplashScreen(),
);
}
}
Within the application, we can use the tr() method to call translations based on languages, for example:
Text(tr("welcome"))
If we want to change the language of the application, we use the setLocale function:
context.setLocale(Locale('en'));
This new language is stored and all available translations are loaded automatically.
For more details you can watch the following video:
For more information, please refer to the official package documentation on Github.
Follow us for more content on Flutter application development!