Flutter - Internationalization

Internationalization refers to the term that an app is available in different regional languages for better reach to people. For this, we have to make an app available in different languages and suitable layouts for them. Flutter provides methods to internationalize the app. We will be discussing how to localize a MaterialApp.

Flutter supports 78 different languages. By default, English (US) is the localized language.

Setting up the App:

First, we have to add the below lines of code in the pubspec.yaml dependencies file as shown below:

dependencies:
 flutter:
 sdk: flutter
 flutter_localizations: # ADD
 sdk: flutter # ADD
 intl: ^0.17.0-nullsafety.2 # ADD

And in the flutter section in pubspec.yaml add the code :

 generate: true

Click on the pub get to get all the dependencies.

Now create a new yaml file (as l10n.yaml) in the root directory of the project with the following content:

arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart

Add a directory named in the lib directory and then add the files for the languages. Here we will be adding data for two languages i.e. English and Hindi.

Name: app_en.arb
Content:
{
 "helloWorld": "GeeksforGeeks",
 "displayText":"This is a sample App",
 "@helloWorld": {
 "description": "SampleApp for GeeksforGeeks"
 }
}

And for the second file

Name: app_hi.arb
Content:
{
 "helloWorld": "गीक्स फॉर गीक्स ",
 "displayText":"यह एक सैंपल ऐप है"
}

Now restart the app so that app_localizations.dart file is generated in the  following directory:

<project_dir>.dart_tools/flutter_get/genl10n

Now we have to write below lines of codes to make the app internationalize -

First, we have to import app_localizations then we have to add the following two properties to the MaterialApp as

import 'package:flutter_gen/gen_l10n/app_localizations.dart';

• localizationsDelegates property: It defines all the localized resources for the application.
• supportedLocales property: It provides a list of languages supported by the app.
• onGeneratedTitle property: It is called after the widget is set up which means localization is available.

Example:

Output:

We can switch Languages by changing the Language of the device in the settings.

👁 Image