Multilingual Application Development with Flutter

 

Hello everyone! Today I wanted to talk to you about multilingual applications. Now our applications are not only addressed to a single language; we aim to reach many users from different countries and languages. This brings us to the localisation process. So how do we implement a multilingual application with Flutter? Let’s take a look step by step.

1. What is Localisation? Why is it important?

Localisation is the process of adapting the application to different cultures and geographies, rather than just translating the language. In other words, in addition to changing the language of the application, we need to adjust regional features such as date formats, currency, numbers according to that language. We can say that it is to make users feel ‘at home’.

2. Basic Steps to Making a Multilingual Application in Flutter

Although the process of making a multilingual application in Flutter may seem scary, it is actually quite systematic. Let’s analyse the steps together.

Step 1: Include the flutter_localizations Package in the Project

Firstly, to take advantage of Flutter’s localisation support, we need to add the flutter_localizations package to our project. This package provides the basic tools to serve content in different languages.

We add the following lines to the pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

This small but important step paves the way for the application to work in different languages.

Step 2: Identify the languages we support

Now it is time to specify which languages the application will support. We define these languages using the localizationsDelegates and supportedLocales parameters in the MaterialApp widget.

import 'package:flutter_localizations/flutter_localizations.dart';

MaterialApp(
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
  supportedLocales: [
    Locale('en', 'US'), // English
    Locale('es', 'ES'), // Spanish
  ],
  home: MyHomePage(),
);

That’s it! Now our application supports English and Spanish languages. Of course, we can add more languages to this list.

Step 3: Manage Translations: With the help of the intl Package

One of the most popular packages when it comes to localisation in Flutter is intl. This package offers an excellent solution for managing text in different languages. By creating .arb files and storing language translations in these files, we can define separate content for each language.

For example, we can create intl_en.arb files for English andintl_tr.arb files for Turkish.

An example .arb file might look like this:

{
  "appTitle": "My Multilingual App",
  "welcomeMessage": "Welcome!",
  "@welcomeMessage": {
    "description": "Welcome message displayed on the home page"
  }
}

We can easily use these translations in our code.

Step 4: Dynamic Language Switching within the Application

If we want to dynamically change the language of the application according to the user, we can add a language selector. When the user selects the desired language through this selector, the language of the application changes instantly.

Here is a simple language selector widget:

DropdownButton<Locale>(
  value: _selectedLocale,
  onChanged: (Locale? newLocale) {
    setState(() {
      _selectedLocale = newLocale!;
      MyApp.setLocale(context, newLocale);
    });
  },
  items: [
    DropdownMenuItem(
      child: Text("English"),
      value: Locale('en', 'US'),
    ),
    DropdownMenuItem(
      child: Text("Español"),
      value: Locale('es', 'ES'),
    ),
  ],
);

In this way, we can offer the user the flexibility to change the language. We can also save this setting with SharedPreferences and ensure that the preferred language is automatically selected when the application is reopened.

3. Tips for Localisation

Let’s talk a little bit about the tips:

• Care in Translations: We need to make language translations accurately and clearly. If possible, it may make more sense to use professional translation services rather than machine translations.
• UI Tests: It is very important to test how the application looks in different languages. In some languages, texts can be lengthened and this can cause problems in design.
• Cultural Differences: It is necessary to pay attention not only to language but also to cultural differences. We should consider issues such as date format and currency.

4. Dynamic Content Localisation

If our application provides dynamic content (for example, if it pulls data via API), we may need to localise this data as well. Depending on the language chosen by the user, we can show the data pulled from the API in different languages.

Future<void> fetchLocalizedContent(Locale locale) async {
  final response = await http.get(Uri.parse('https://api.example.com/content?lang=${locale.languageCode}'));
  // Process returned data and display it in the UI
}

In this way, not only static content but also dynamic content of the application is presented in a localised way.

I hope you found this article useful! If you appreciate the information provided, you have the option to support me by Buying Me A Coffee! Your gesture would be greatly appreciated!

Developing multilingual applications with Flutter provides a great advantage in addressing a wide range of users and personalising the user experience. Flutter’s built-in localisation tools and intl package make this process much easier. As a developer, managing the localisation process correctly is an important step for the success of the application.

By following these steps, we are ready to develop a multilingual Flutter application! For more information and resources, here is a link to Flutter’s localisation documentation.

Internationalizing Flutter apps

How to internationalize your Flutter app.

docs.flutter.dev

Good luck to you!

Selin.