A Step-by-Step Guide to Internationalizing Flutter App
Introduction
Welcome to this comprehensive tutorial where we will delve into the key steps required to internationalize your Flutter app. We'll focus on the essentials and provide you with a clear understanding of the process. For more detailed explanations and advanced use cases, you can refer to our recommended resource on Internationalizing Flutter apps.
Configuration settings
To get started, follow these steps:
- Create your Flutter project and execute the following code to download the required packages:
flutter pub add flutter_localizations --sdk=flutter flutter pub add intl:any
- In your
pubspec.yaml
file, add the following code under the Flutter section:# The following section is specific to Flutter. flutter: generate: true # Add this line
- Create a
l10n.yaml
file in the root folder of your project:touch l10n.yaml
Open the
l10n.yaml
file and add the following content:arb-dir: lib/l10n template-arb-file: app_en.arb output-localization-file: app_localizations.dart
Specify the
arb-dir
parameter with the folder path where your.arb
file will be stored.Set the
template-arb-file
parameter with the name of your .arb file. The naming convention isapp_<language_code>.arb
, where<language_code>
represents the language code (e.g., "en" for English, "es" for Spanish). You can create multiple.arb
files for different languages you intend to support.
- Create the
arb
folder and theapp_en.arb
file:mkdir lib/l10n touch lib/l10n/app_en.arb
- Open
lib/l10n/app_en.arb
and add the following content:{ "materialAppTitle": "localizations Sample App' }
- Run the following command to generate the necessary configuration file:
flutter gen-l10n
Adding localization to your app
To integrate localization into you app, follow these steps:
- In
main.dart
, importapp_localizations.dart
:import 'package:flutter_gen/gen_l10n/app_localizations.dart';
- Within the
MaterialApp
widget, addAppLocalizations.localization
as thelocalizationsDelegates
parameter andAppLocalizations.supportedLocales
as thesupportedLocales
parameter:MaterialApp( localizationsDelegates: AppLocalizations.localizationsDelegates, supportedLocales: AppLocalizations.supportedLocales, home: Builder(builder: (context) { return Scaffold( body: Center(child: Text(AppLocalizations.of(context)!.materialAppTitle)), ); }), );
- Whenever you update the
app_en.arb
file, runflutter gen-l10n
to update it. Alternatively, if you're using Visual Studio Code, right-click on theapp_en.arb
file and select "Generate Localizations". - Run your Flutter app and it should now support localization.
Conclusion
Congratulations!, You have successfully added localization to your Flutter app. Make sure to bookmark this tutorial for future reference in your upcoming Flutter projects. By implementing localization, you can reach a wider audience and provide a more personalized experience for your users.