Implementing Localization and Internationalization in Flutter Apps

Reaching a global audience requires your app to support multiple languages and cultural norms. Flutter provides robust tools for localization (l10n) and internationalization (i18n), allowing you to cater to users worldwide.

At MetaDesign Solutions, we’ve helped clients expand their apps’ reach through effective localization. In this blog, I’ll explain how to implement localization in Flutter and share best practices.

Understanding Localization and Internationalization

Internationalization (i18n): Designing your app to support multiple languages and regions.
Localization (l10n): Adapting your app for specific languages and cultures.

Goal: Provide a seamless experience to users regardless of their language or location.

Steps to Implement Localization in Flutter

1. Prepare Your App for Internationalization

Wrap your MaterialApp or CupertinoApp with WidgetsApp and specify supported locales.

Example:

dart code:

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

2. Add the flutter_localizations Package

Include the package in your pubspec.yaml:

yaml code:

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

3. Generate Localization Files

Use the intl package to manage localization.

Install the intl package:
yaml code:

				
					dependencies:
  intl: ^0.17.0

Create ARB Files: JSON-like files containing localized strings.

lib/l10n/intl_en.arb:
json code

				
					{
  "@@locale": "en",
  "hello": "Hello",
  "welcome": "Welcome to our app"
}

lib/l10n/intl_es.arb:
json code:

				
					{
  "@@locale": "es",
  "hello": "Hola",
  "welcome": "Bienvenido a nuestra aplicación"
}

4. Generate Localization Classes

Use the intl_utils package to automate code generation.

Install intl_utils:
yaml code:

				
					dev_dependencies:
  intl_utils: ^2.0.0

Configure Code Generation:
Add a l10n.yaml file:
yaml code:

				
					arb_dir: lib/l10n
template_arb_file: intl_en.arb
output_class: S
output_localization_file: s.dart
preferred_supported_locales:
  - en
  - es

Generate Code:
bash code:

				
					flutter pub run intl_utils:generate

5. Use Localized Strings in Your App

Import the Generated Class:
dart code:

				
					import 'package:your_app/s.dart';

Access Localized Strings:
dart code;

				
					Text(S.of(context).hello),

6. Handle Pluralization and Formatting

Use ICU message syntax in ARB files.

Example:

intl_en.arb:
json code:

				
					{
  "items": "{count, plural, =0{No items} one{1 item} other{{count} items}}"
}

Usage:
dart code:

				
					Text(S.of(context).items(count)),

Best Practices

Keep Text Out of Code: Avoid hardcoding strings; use the localization system.
Cultural Sensitivity: Be mindful of cultural nuances and date/time formats.
Test Localization: Verify translations and layouts for each locale.

Tools for Translation Management

Crowdin: Integrate with your repo for collaborative translation.
Lokalise: Supports Flutter and ARB files for localization management.
Phrase: Offers translation services and integration with Flutter.

Challenges and Solutions

Text Expansion: Some languages require more space.
Solution: Use flexible layouts and avoid fixed widths.

Right-to-Left (RTL) Languages: Arabic, Hebrew, etc.
Implementation:
dart code:

				
					Directionality(
  textDirection: TextDirection.rtl,
  child: YourWidget(),
);

Fonts: Ensure fonts support all characters.
Solution: Use fonts that include necessary character sets or dynamically load fonts.

Real-World Application at MetaDesign Solutions

We localized an e-learning app to support English, Spanish, and Arabic.

Approach:

Implemented localization using the steps above.
Adjusted UI for RTL support in Arabic.
Collaborated with professional translators for accurate translations.

Outcome: The app expanded into new markets, increasing user base by 50%.

How MetaDesign Solutions Can Help

Localization can be complex, but our expertise makes the process smooth.

Our Services:

Localization Implementation: Setting up your app for multiple languages.
Translation Management: Coordinating with translators for accurate content.
UI/UX Adjustments: Modifying designs to accommodate different languages and cultures.

Why Choose Us:

Global Experience: Worked on projects targeting diverse markets.
Technical Proficiency: Skilled in Flutter’s localization tools.
Attention to Detail: Ensuring cultural nuances are respected.

Get in Touch

Looking to take your app global with localization?

Email us at sales@metadesignsolutions.com to get started.