Flutter Implement Localization within App

August 03, 2021 Publish By : EXPERT APP DEVS 4 min read Viewed By : 679
flutter implement localization within app

What is App Localization? : App localization is the process of making your app content visible to user based on their geographic location.

What is Internationalization? : Adding multiple languages support to your app is called Internationalization.

It is really important to Localize your app if you want to retain your user base, and reach to more and more users. You can find new users without ever building a new app, the same app is represented in their own mother tongue, and so they like it and can relate to it.

Your flutter app, by default, supports only the English(US) language. We will be using intl package for the sake of this tutorial.

In this tutorial we will learn two things :

  1. Show content in system language
  2. Choose language within app

So, let’s start now. First of all go to your pubspec.yaml file and add intl package, you also need to add

generate: true below flutter: , below uses-material-design: true

and run pub get command to download the packages.

Now, go to your main.dart file and inside MaterialApp add supportedLocales, like this :

supportedLocales: L10n.all,

This will show, red lines below L10n, because we haven’t created that class yet.

So, right click on your lib folder and select New > Directory, name the file l10n.dart.

Inside this file add below code:

class L10n {
  static final all = [
    const Locale('en'),
    const Locale('ar'),
    const Locale('hi'),
  ];
}

This means that we are going to add English, Arabic, and Hindi language in our app, and going to provide translations for the same. 

Now, create a new file l10n.yaml for in your root directory and add following into it:

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

 

Where lib/l10n defines our input folder, app_en.arb is our template file for default(English) language and app_localizations.dart is our output file that is going to be generated.

Now, create app_en.arb file and add below code:

"currentLanguage": "English",
"@currentLanguage": {
"description": "This is the current Language"
},
"hello": "Hello!",
"@hello": {
"description": "Greetings"
},

It’s clear from code that We are going to print the greetings inside the app, here we have created two translations “currentLanguage” and “hello”, you can create more translations.

Now, create similar files for our arabic and hindi locales, namely app_ar.arb and app_hi.arb, you can omit "@currentLanguage" and "@hello" this time, because they have been described already.

Now close the app if it’s running, and re-run it, you will see that some files have been automatically generated inside .dart_tool > flutter_gen folder, their names must be app_localizations_en.dart, app_localizations_ar.dart, app_localizations_hi.dart, and app_localizations.dart

Now, go to main.dart file and add below code inside MaterialApp widget :

localizationsDelegates: [
              AppLocalizations.delegate,
              GlobalMaterialLocalizations.delegate,
              GlobalCupertinoLocalizations.delegate,
              GlobalWidgetsLocalizations.delegate,
            ],

This will add all the localization delegates we need in our app.

Now, we will be using these localization inside our Widget using :

Text(AppLocalizations.of(context).hello)

Now you will see our Text widget showing

Hello! on our screen

If we go into the settings and change the language to hindi then, it will be

नमस्ते

and

مرحبا

for arabic.

Now, if you want to change locales based on the user selection, then you can do this is your MaterialApp file:

locale: provider.locale

Where provider is any provider, you can use within app, and locale is instance of Locale class.

So in the end you MaterialApp file will look like this:

MaterialApp(
            debugShowCheckedModeBanner: false,
            title: title,
            locale: provider.locale,
            supportedLocales: L10n.all,
            localizationsDelegates: [
              AppLocalizations.delegate,
              GlobalMaterialLocalizations.delegate,
              GlobalCupertinoLocalizations.delegate,
              GlobalWidgetsLocalizations.delegate,
            ],
            home: HomePage(),
          );

Need a consultation?

Drop us a line! We are here to answer your questions 24/7.