Go Global with Flutter: A Quick Guide to App Internationalization

Go Global with Flutter: A Quick Guide to App Internationalization

FlutterPulse

This article was translated specially for the channel FlutterPulseYou'll find lots of interesting things related to Flutter on this channel. Don't hesitate to subscribe!🚀

What is Internationalization in an App?

Internationalization (often abbreviated as i18n) is the process of designing and preparing your application to support multiple languages, cultures, or regions without requiring changes to the codebase. It allows your app to dynamically adapt:

  • Text translations (e.g. : "Hello" → "Bonjour" or "ආයුබෝවන්")
  • Date, time, and number formatting
  • Right-to-left (RTL) layout support
  • Local conventions such as currency symbols, units, etc.

Internationalization is not the same as localization (l10n).

i18n = making the app ready to be localized.

l10n = actually translating it to a specific locale (like en, si, fr, etc.).

Is It Easy to Internationalize an App in Flutter Compared to Other Frameworks?

Yes, internationalizing apps in Flutter is generally easier and more efficient than in many other frameworks.

Here's Why,

  1. Built-in Support via flutter_localizations
  2. flutter_localizations provides ready-to-use localizations for over 70 locales.
  • You don't need third-party libraries, this is in contrast to React Native or Android (Java/Kotlin) where you often need external packages or manual setup.

2. Simple Configuration with .arb Files

Flutter uses .arb (Application Resource Bundle) files for each language. These files are:

  • Easy to manage (just JSON with metadata)
  • Automatically compiled to a localization class using flutter gen-l10n
  • Type-safe and easy to use with AppLocalizations.of(context)

3. Hot Reload Compatible

How to setting up an internation­alized app?

  1. To use flutter_localizations, add the package as a dependency to your pubspec.yaml file and also the intl package.
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: any

2. Import the flutter_localizations library and specify localizationsDelegates and supportedLocales for your MaterialApp or CupertinoApp:

import 'package:flutter_localizations/flutter_localizations.dart';
return MaterialApp(
      title: 'Flutter Demo',
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
      supportedLocales: const [
        Locale('en'), // English
        Locale('si'), // Sinhala
        Locale('fr'), // French
      ],
      localizationsDelegates: const [
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
      ],
    );

To specify thesupportedLocalesin your Flutter app, you can refer to the list of locale codes available at https://api.flutter.dev/flutter/flutter_localizations/GlobalMaterialLocalizations to find the appropriate language and region codes for your desired locales.

3. Add your own localized messages

  • Open the pubspec.yaml file and enable the generate flag
flutter:
  generate: true # Add this line
  • Create a new yaml file in the root directory of the Flutter project. Name this file l10n.yamland include following content
File Structure
arb-dir: lib\l10n
template-arb-file: intl_en.arb
output-localization-file: app_localizations.dart

This file configures the localization tool.

  • Create a file called intl_en.arbin the directory of ${FLUTTER_PROJECT}/lib/l10n

For example,

{
  "helloWorld": "Hello",
  "@helloWorld": {
    "description": "The conventional newborn programmer greeting"
  }
}
  • Add another bundle file called intl_si.arb in the same directory. In this file, add the Sinhala translation of the same message.
{
    "helloWorld": "ආයුබෝවන්"
}
File structure after adding .arb files

Naming convention of .arb files
You can name your .arb files anything you want, but for Flutter's flutter gen-l10n tool to recognize and process them automatically, the filename must either
1. Include the locale code directly after the base name
baseName_localeCode.arb (baseName = app, intl, or messages |
localeCode = standard locale like en, es, si, fr)
ex: app_en.arb, intl_es.arb, messages_fr.arb

2. or Include the @@locale property inside the file.

// Only if you want custom names for .arb files
{
  "@@locale": "en",
  "helloWorld": "Hello",
  "@helloWorld": {
    "description": "Greeting text"
  }
}
  • Run flutter pub getcommand.
  • Add the import statement on app_localizations.dart and AppLocalizations.delegate in your call to the constructor for MaterialApp
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
return MaterialApp(
      title: 'Flutter Demo',
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
      supportedLocales: const [
        Locale('en'), // English
        Locale('si'), // Sinhala
        Locale('fr'), // French
      ],
      localizationsDelegates: const [
        AppLocalizations.delegate, // Add this line
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
      ],
    );
  • The AppLocalizations class also provides auto-generated localizationsDelegates and supportedLocales lists. You can use these instead of providing them manually.
const MaterialApp(
  title: 'Flutter Demo',
  localizationsDelegates: AppLocalizations.localizationsDelegates,
  supportedLocales: AppLocalizations.supportedLocales,
);
  • Now, you can use AppLocalizations anywhere in your app.
Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              AppLocalizations.of(context)!.helloWorld, // Add this line
            ),
            // other widgets 
          ],
        ),
      ),
    );
  }
  • This code generates a Text widget that displays "Hello" if the target device's locale is set to English, and "ආයුබෝවන්" if the target device's locale is set to Sinhala.

The Material app has to actually be started to initialize AppLocalizations. If the app hasn't yet started, AppLocalizations.of(context)!.helloWorld causes a null exception.

Use localized content within widgets that are built after localization is loaded, like Scaffold, AppBar, etc.

In the example we've discussed so far, the app's language is automatically selected based on the device's locale. While this works in many cases, it's often better to let users manually choose their preferred language within the app.

To achieve this, you can bind the locale property of MaterialApp to a LocaleProvider, which updates based on user interaction:

MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
      supportedLocales: AppLocalizations.supportedLocales,
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      locale: provider.locale,   // Updated dynamically
    );

With this setup, you can switch the app's language at runtime via buttons or dropdowns.
Check out the full implementation on my GitHub: https://github.com/PumuduRajakaruna/flutter_internationalization/tree/main

Reference: https://docs.flutter.dev/ui/accessibility-and-internationalization/internationalization

Thank you for being a part of the community

Before you go:

Report content on this page

Report Page

Please submit your DMCA takedown request to dmca@telegram.org