Multi-lingual In Flutter

Before starting our blog topic Multi-lingual In Flutter, let’s discuss multilingually. What is multilingual? and why do we need it in Flutter application development? Multilingual is related to the multiple languages in that an application is supported.

Whenever we developed any application, for accessing a large number of users of different countries or different communities, your application must support the language that users understand. With the support of multiple languages, you can ensure large amount of users group for your application.

Let’s start the implementation of the Multi-lingual In Flutter project and get to know how we improvise the user experience of the Flutter application.

You may also check our Flutter app development services page.

1. Add the localization package into pubsec.yaml folder

dependencies:
  flutter:
    sdk: flutter

    flutter_localizations:
      sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter

  intl: ^0.17.0-nullsafety.2

dependencies:

flutter:

sdk: flutter

flutter_localizations:

sdk: flutter

dev_dependencies:

flutter_test:

sdk: flutter

intl: ^0.17.0-nullsafety.2

We have added the flutter_localization dependency and int1 dev dependency for the null check. You can add the updated version on int1 dependency.

2. Add the Strings files in assests folder.

Now, we will add the different JSON files in the assets folder, which consists of the strings values for the application. We have added the “en.json” & “ar.json” files, as we are doing with Arabic and English translation. You can add multiple files as per your requirements.

// ar.json file
{
  "app_title": "عرض توضيحي متعدد اللغات",
  "main_title": "لوريم إيبسوم هو ببساطة نص شكلي يستخدم في صناعة الطباعة والتنضيد. كان Lorem Ipsum هو النص الوهمي القياسي في الصناعة منذ القرن الخامس عشر الميلادي ، عندما أخذت طابعة غير معروفة لوحًا من النوع وتدافعت عليه لصنع كتاب عينة من النوع. لقد صمد ليس فقط لخمسة قرون ، ولكن أيضًا القفزة في التنضيد الإلكتروني ، وظل دون تغيير جوهري. تم نشره في الستينيات من القرن الماضي مع إصدار أوراق Letraset التي تحتوي على مقاطع Lorem Ipsum ، ومؤخرًا مع برامج النشر المكتبي مثل Aldus PageMaker بما في ذلك إصدارات Lorem Ipsum."
}

// en.json file

{
  "app_title": "Multilingual Demo",
  "main_title": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
}

// ar.json file

{

"app_title": "عرض توضيحي متعدد اللغات",

"main_title": "لوريم إيبسوم هو ببساطة نص شكلي يستخدم في صناعة الطباعة والتنضيد. كان Lorem Ipsum هو النص الوهمي القياسي في الصناعة منذ القرن الخامس عشر الميلادي ، عندما أخذت طابعة غير معروفة لوحًا من النوع وتدافعت عليه لصنع كتاب عينة من النوع. لقد صمد ليس فقط لخمسة قرون ، ولكن أيضًا القفزة في التنضيد الإلكتروني ، وظل دون تغيير جوهري. تم نشره في الستينيات من القرن الماضي مع إصدار أوراق Letraset التي تحتوي على مقاطع Lorem Ipsum ، ومؤخرًا مع برامج النشر المكتبي مثل Aldus PageMaker بما في ذلك إصدارات Lorem Ipsum."

}

// en.json file

{

"app_title": "Multilingual Demo",

"main_title": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."

}

3. Create a Language translation file.

In this post, we will look at the process of translating a language into English. We will create a translation file, which will be used to fetch the data from the assets locale directory.When the string name did not matches with existing string then it will return the blank strings.

class LanguageTranslation {
  late Locale locale;
  static Map<dynamic, dynamic> _localizedValues = new Map();

  LanguageTranslation(Locale locale) {
    this.locale = locale;
    _localizedValues = new Map();
  }

  static LanguageTranslation? of(BuildContext context) {
    return Localizations.of<LanguageTranslation>(context, LanguageTranslation);
  }

  String value(String key) {
    return _localizedValues[key] ?? '** $key not found';
  }

  static Future<LanguageTranslation> load(Locale locale) async {
    LanguageTranslation translations = new LanguageTranslation(locale);
    String jsonContent =
        await rootBundle.loadString("assets/locale/${locale.languageCode}.json");
    _localizedValues = json.decode(jsonContent);
    return translations;
  }

  get currentLanguage => locale.languageCode;
}

class LanguageTranslation {

late Locale locale;

static Map<dynamic, dynamic> _localizedValues = new Map();

LanguageTranslation(Locale locale) {

this.locale = locale;

_localizedValues = new Map();

}

static LanguageTranslation? of(BuildContext context) {

return Localizations.of<LanguageTranslation>(context, LanguageTranslation);

}

String value(String key) {

return _localizedValues[key] ?? '** $key not found';

}

static Future<LanguageTranslation> load(Locale locale) async {

LanguageTranslation translations = new LanguageTranslation(locale);

String jsonContent =

await rootBundle.loadString("assets/locale/${locale.languageCode}.json");

_localizedValues = json.decode(jsonContent);

return translations;

}

get currentLanguage => locale.languageCode;

}

The LanguageDelegate class will load the LanguageTranslation class whenever a locale changes. The Delegate class check the localization is supported or not and load the language translation class when it changes. It will also extend the “LocalizationDelegate” class if the locale does not change.

class TranslationsDelegate extends LocalizationsDelegate<LanguageTranslation> {
  const TranslationsDelegate();

  @override
  bool isSupported(Locale locale) => ['en', 'ar'].contains(locale.languageCode);

  @override
  Future<LanguageTranslation> load(Locale locale) =>
      LanguageTranslation.load(locale);

  @override
  bool shouldReload(TranslationsDelegate old) => false;
}

class TranslationsDelegate extends LocalizationsDelegate<LanguageTranslation> {

const TranslationsDelegate();

@override

bool isSupported(Locale locale) => ['en', 'ar'].contains(locale.languageCode);

@override

Future<LanguageTranslation> load(Locale locale) =>

LanguageTranslation.load(locale);

@override

bool shouldReload(TranslationsDelegate old) => false;

}

4. Use the localization in main.dart

In the material app, we will add the support for the delegate class and translation class and passes it to the parent widget:

localizationsDelegates: [
        const TranslationsDelegate(),
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', ''),
        const Locale('ar', ''),
      ],
      localeResolutionCallback: (locale, supportedLocales) {
        for (var supportedLocaleLanguage in supportedLocales) {
          if (supportedLocaleLanguage.languageCode == locale!.languageCode &&
              supportedLocaleLanguage.countryCode == locale.countryCode) {
            return supportedLocaleLanguage;
          }
        }
        return supportedLocales.first;
      },
      home: MyHomePage(title: ''),

localizationsDelegates: [

const TranslationsDelegate(),

GlobalMaterialLocalizations.delegate,

GlobalWidgetsLocalizations.delegate,

supportedLocales: [

const Locale('en', ''),

const Locale('ar', ''),

localeResolutionCallback: (locale, supportedLocales) {

for (var supportedLocaleLanguage in supportedLocales) {

if (supportedLocaleLanguage.languageCode == locale!.languageCode &&

supportedLocaleLanguage.countryCode == locale.countryCode) {

return supportedLocaleLanguage;

}

return supportedLocales.first;

home: MyHomePage(title: ''),

Now, in every where from whole app, you should use LanguageTranslation’s “value” method in order to get the string values according to the locale.

// for getting the string values on the basis of locale.

LanguageTranslation.of(context)!.text('main_title')


// You can use following method to update the locale

void onLocaleChange(Locale locale) async {
    setState(() {
      LanguageTranslation.load(locale);
    });
  }

// calling the method for locale change
onLocaleChange(const Locale("en"));

// for getting the string values on the basis of locale.

LanguageTranslation.of(context)!.text('main_title')

// You can use following method to update the locale

void onLocaleChange(Locale locale) async {

setState(() {

LanguageTranslation.load(locale);

});

}

// calling the method for locale change

onLocaleChange(const Locale("en"));

Output :

Conclusion:

You can use multi-lingual for enhancing the user experience and increase the number of users for your application of different languages

Hope this blog helps you to understand the basic uses of the Multi-lingual In Flutter.

Thank you for reading!!

For more information, you can visit the Dev Console.

flutter

Abhishek Rathore 27 April 2023

. . .

Multi-lingual In Flutter

1. Add the localization package into pubsec.yaml folder

2. Add the Strings files in assests folder.

3. Create a Language translation file.

4. Use the localization in main.dart

Leave a Comment Cancel Reply

Message Sent!