Mastering Localization in Flutter: A Comprehensive Guide

In the diverse landscape of mobile applications, localization stands as a cornerstone of user inclusivity and accessibility. Flutter developers, aiming to reach a global audience, must embrace the art of localizing their apps. This means not only translating text but also adapting the app’s content and functionality to various languages and cultures. This article offers an in-depth guide on localizing Flutter apps, encompassing UI, accessibility (a11y), and internationalization (i18n), based on the comprehensive resources provided by Flutter’s official documentation.

The Essence of Internationalizing Flutter Apps

Internationalization, often abbreviated as i18n, is the process of designing your app in a way that makes it adaptable to various languages and regions. This process includes localizing values like text, layouts, and even certain functionalities for each supported language or locale. With Flutter’s built-in widgets and classes, alongside the powerful flutter_localizations library, apps can achieve a high degree of internationalization.

Key Learning Points

• Tracking the Device’s Locale: Automatically adapt to the user’s preferred language.
• Locale-Specific Widgets: Utilize Material or Cupertino widgets that are locale-aware.
• Managing Locale-Specific Values: Handle different formats for dates, numbers, etc., based on the locale.
• Defining Supported Locales: Configure your app to support specific locales.

Setting Up an Internationalized App

1. Adding Dependencies

In your pubspec.yaml file, include the flutter_localizations package, which supports 115 languages as of December 2023, and the intl package:

dependencies:
  flutter_localizations:
    sdk: flutter
  intl: any

2. Configuring the App

Import flutter_localizations and configure localizationsDelegates and supportedLocales in your MaterialApp or CupertinoApp:

import 'package:flutter_localizations/flutter_localizations.dart';

return MaterialApp(
  title: 'Localizations Sample App',
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: [
    Locale('en'), // English
    Locale('es'), // Spanish
  ],
  home: MyHomePage(),
);

3. Adding Localized Messages

Create ARB files (Application Resource Bundle) like app_en.arb for English and app_es.arb for Spanish in your project’s lib/l10n directory. These files should contain key-value pairs for all your localized strings.

Overriding the Locale

For specific cases where a part of your app needs a different locale, use Localizations.override. This can be demonstrated using a CalendarDatePicker which renders in Spanish regardless of the device’s locale:

Localizations.override(
  context: context,
  locale: const Locale('es'),
  child: Builder(
    builder: (context) {
      return CalendarDatePicker(
        // DatePicker properties
      );
    },
  ),
);

Implementing Custom Localized Messages

After setting up flutter_localizations, you can add your own localized text:

1. Configure Localization Tool: Add a l10n.yaml file in your project’s root directory with the following content:

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

2. Create ARB Template Files: In your lib/l10n directory, add template files like app_en.arb and their respective translations in different languages.

3. Generate Localization Classes: Run flutter pub get or flutter run, and Flutter will automatically generate the necessary localization files in the .dart_tool/flutter_gen/gen_l10n directory.

4. Use Localized Strings: Import app_localizations.dart in your app and use AppLocalizations.of(context)! to fetch localized strings.

Text(AppLocalizations.of(context)!.helloWorld),

or you can create a helper function to make it easier and shorter:

AppLocalizations tr(BuildContext context)=>AppLocalizations.of(context)!;

then you can use it by only calling:

tr(context).helloWorld

Advanced Localization Techniques

For languages with multiple variants, like Chinese, use Locale.fromSubtags to fully differentiate between them. This ensures a comprehensive approach to localization, catering to linguistic nuances.

yawarosman.com