App development

A Comprehensive Guide to Localization in Flutter Apps for Android and iOS

by

Localization is essential for building global Flutter apps that cater to diverse language preferences. This guide walks you through implementing localization in your Flutter app for both Android and iOS, ensuring a seamless multilingual experience.

Step 1: Project Setup

  1. Create a new Flutter project or open an existing one in your IDE.
  2. Add the flutter_localizations dependency in pubspec.yaml: 
    dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  3. Run flutter pub get to fetch the dependency.

Step 2: Project Structure

  1. Create a folder for localization files, e.g., lib/l10n.
  2. Inside, create subfolders for each language: en, fr, es, etc.

Step 3: Define Localizations

  1. Create a .arb file for each language, e.g., app_en.arb.
  2. Define localized strings in JSON format: 
    {
  "title": "Flutter App",
  "welcome_message": "Welcome to our app!"
}
  3. Repeat for all languages with the same keys but translated values.

Step 4: Generate Localization Classes

  1. Run the command in your project root: 
    flutter gen-l10n
  2. The generated classes will appear in lib/generated to handle language switching and provide access to localized strings.

Step 5: Load Localizations

  1. Import the necessary packages in main.dart: 
    import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:your_app/generated/l10n.dart';
  2. Wrap MaterialApp with localization delegates and supported locales: 
    runApp(
  MaterialApp(
    localizationsDelegates: [
      S.delegate, // Generated delegate
      GlobalMaterialLocalizations.delegate,
      GlobalWidgetsLocalizations.delegate,
    ],
    supportedLocales: S.delegate.supportedLocales,
    // ...
  ),
);

Step 6: Retrieve Localized Strings

  1. Import the generated class where needed and access strings: 
    Text(S.of(context).title)

Step 7: Changing the App’s Locale

  1. Create a Locale object for the user’s selected language and store it persistently (e.g., shared preferences).
  2. Set the locale in MaterialApp: 
    MaterialApp(
  locale: yourSavedLocale,
  // ...
)
  3. Update the locale and rebuild the app when the user changes language preferences.

Step 8: Format Dates and Numbers

  1. Use the intl package: 
    import 'package:intl/intl.dart';
  2. Format dates, times, currencies, and numbers based on the current locale.

Step 9: RTL Support for iOS

  1. Add flutter_localizations to your iOS Podfile: 
    target 'Runner' do
  pod 'FlutterLocalizations', :path => Flutter.localizationsPath
end
  2. Run pod install to enable RTL support.

Step 10: Testing

  1. Test your app on emulators or devices with different language settings.
  2. Verify translations and ensure RTL layouts work correctly for RTL languages.

Conclusion

By following these steps—from setup to RTL support—you can build a multilingual Flutter app that provides an excellent user experience tailored to diverse language preferences.

Leave a Reply