Introduction

When you build a Flutter app for a global audience, you want users to interact with your UI in their native language. Internationalization (i18n) refers to designing your app so it can easily adapt to different languages and regions without engineering changes. Flutter’s localization support, powered by the intl package and code generation, simplifies adding multiple translations. This tutorial shows you how to enable i18n in a new Flutter project, add translation resources, access localized strings, and switch locales at runtime. By the end, you’ll have a basic multilingual Flutter app and understand the workflow needed for production-grade internationalization.

Setting up Flutter Localization Support

Before you start writing translations, configure your Flutter project to support i18n:

1. Add dependencies in pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.17.0
dev_dependencies:
  intl_utils

2. Enable code generation by adding an l10n.yaml file in the project root:

arb_dir: lib/l10n
template_arbs:
  - app_en.arb
output_class: S
output_localization_file

3. Create the directory lib/l10n and add an English template file app_en.arb:

{
  "@@locale": "en",
  "title": "Hello World",
  "greeting": "Welcome, {name}!"
}

4. Run code generation:

flutter pub get
flutter pub run intl_utils:generate

After this step, a Dart file lib/l10n/s.dart is created, giving you an S class with getters for title and greeting.

Adding Translations

With your template in place, add other language ARB files in lib/l10n. For example, Spanish (app_es.arb):

{
  "@@locale": "es",
  "title": "Hola Mundo",
  "greeting": "¡Bienvenido, {name}!"
}

And French (app_fr.arb):

{
  "@@locale": "fr",
  "title": "Bonjour le Monde",
  "greeting": "Bienvenue, {name}!"
}

Re-run:

flutter pub run intl_utils:generate

Your generated S class will now include support for es and fr locales. Flutter’s built-in MaterialApp widget can consume this.

Accessing Localized Strings in Widgets

Import the generated S class and Flutter’s localizations:

import 'package:flutter_localizations/flutter_localizations.dart';
import 'l10n/s.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        S.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: S.delegate.supportedLocales,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final localeStrings = S.of(context);
    return Scaffold(
      appBar: AppBar(title: Text(localeStrings.title)),
      body: Center(
        child: Text(localeStrings.greeting(name: 'Alice')),
      ),
    );
  }
}

1. localizationsDelegates hooks into Flutter’s i18n machinery.

2. supportedLocales is derived from your ARB files.

3. S.of(context) accesses the right translations.

Switching Locales at Runtime

To let users pick a language, pass a locale to MaterialApp and rebuild when it changes. Use a StatefulWidget or a state management solution:

class LocaleProvider extends ChangeNotifier {
  Locale _locale = Locale('en');
  Locale get locale => _locale;

  void setLocale(Locale locale) {
    if (!S.delegate.supportedLocales.contains(locale)) return;
    _locale = locale;
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => LocaleProvider(),
      child: Consumer<LocaleProvider>(
        builder: (context, provider, _) {
          return MaterialApp(
            locale: provider.locale,
            localizationsDelegates: [ /* ... */ ],
            supportedLocales: S.delegate.supportedLocales,
            home: LanguageSelectorPage(),
          );
        },
      ),
    );
  }
}

In your LanguageSelectorPage, call provider.setLocale(Locale('es')) or any supported code. The UI will rebuild with new translations.

Testing and Best Practices

• Always keep your ARB files in sync. Missing keys can cause runtime errors.

• Extract strings early in development to avoid retrofitting later.

• For pluralization and gender, use the ICU syntax in ARB files (e.g., "itemCount": "{count, plural, =0{No items} =1{1 item} other{{count} items}}").

• Automate ARB merges and pushes to translation platforms (e.g., Lokalise or Crowdin) to collaborate with translators.

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

You now have the foundation for i18n in Flutter: configuring your project, adding ARB-based translations, accessing localized strings in widgets, and switching languages at runtime. As your app grows, maintain clean ARB files and leverage ICU features for plural and gender-sensitive messages.

With these tools and best practices, moving from a monolingual app to a fully internationalized Flutter project is straightforward. Start translating today and deliver localized experiences to users around the world!