Multi-language support is an important feature to globalize the application and increase the user audience. Language is a factor that connects people and the same principle is applied to app development also. When a customer sees their native language, it creates an emotional bond with the app.
FACT
English continues to represent the most common language on the Internet, almost 75% of app users do not speak English, which leaves a considerable big market available for multilingual apps.
Transform your app idea into a reality with our Flutter app development services.
Flutter by default only provides the US English localization. For supporting other languages, the application must specify additional properties and include the package called flutter_localizations. As of November 2020, this package supports 78 languages.
Check the below code for practical implementation.
Add the below package as a dependency to your pubspec.yaml file:
|
1 2 3 4 5 |
dependencies: flutter: sdk: flutter flutter_localizations: #Add this line sdk: flutter #Add this line |
In the next step, import the flutter_localizations library and specify localizationsDelegates and supportedLocales for MaterialApp:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import 'package:flutter_localizations/flutter_localizations.dart'; MaterialApp( localizationsDelegates: [ // ... app-specific localization delegate[s] here GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, GlobalCupertinoLocalizations.delegate, ], supportedLocales: [ const Locale('en', ''), // English, no country code const Locale('es', ''), // Spanish, no country code // ... other locales the app supports ], ) |
Adding the localized messages for multi-language support
Once the flutter_localizations package is added, use the following instructions to add localized text to your application.
- Add the
intlpackage to thepubspec.yamlfile:
|
1 2 3 4 5 6 |
dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter intl: ^0.16.1 #Add this line |
- Enable the
generateflag in thepubspec.yamlfile:
|
1 2 |
flutter: generate: true #Add this line |
- Add the new yaml file to the root directory of the Flutter project called
l10n.yamlwith the following content:
|
1 2 3 |
arb-dir: lib/l10n template-arb-file: app_es.arb output-localization-file: app_localizations.dart |
- In
${FLUTTER_PROJECT}/lib/l10n, add theapp_es.arbtemplate file.
|
1 2 3 |
{ "hello": "Hola!!" } |
- Now after running the app. A file will be generated in
${FLUTTER_PROJECT}/flutter_gen/gen_l10nafter which we will start using the localization in the app.
|
1 2 3 4 5 6 |
import 'package:flutter_localizations/flutter_localizations.dart'; import 'package:flutter_gen/gen_l10n/app_localizations.dart'; // Add this line Widget build(BuildContext context) { return Text(AppLocalizations.of(context).hello); } |
In this way, we can support multi-languages in flutter apps.