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

Localization is a crucial aspect of building global Flutter apps that cater to diverse language preferences. In this detailed technical guide, we will walk you through the process of implementing localization in your Flutter app for both Android and iOS platforms development. By following these steps, you’ll be able to provide a seamless, multilingual experience to your users.

Step 1: Project Setup:

1. Create a new Flutter project or open an existing project in your preferred IDE.

• Add the flutter_localizations dependency to your project’s pubspec.yaml file:

dependencies:

  flutter:

    sdk: flutter

  flutter_localizations:

    sdk: flutter

• Save the file and run flutter pub get in your terminal to fetch the dependency.

Step 2: Project Structure:

1. Create a folder to store your localization-related files. You can use the lib/l10n directory or any other structure that suits your project.

• Inside the chosen directory, create a subdirectory for each supported language. For example, create folders named en for English, fr for French, es for Spanish, etc.

Step 3: Define Localizations:

1. Create a .arb file for each supported language within their respective language directories. For example, create app_en.arb in the en directory for English.

• Define the localized strings in each .arb file using the appropriate JSON format. For example, in app_en.arb, define strings like:

{

    “title”: “Flutter App”,

    “welcome_message”: “Welcome to our app!”

}

• Repeat this process for all supported languages, ensuring that each .arb file contains the same set of keys with translated values.

Step 4: Generate Localization Classes:

1. In your project’s root directory, run the following command in the terminal to generate localization classes:

Flutter gen-l10n

• This command will analyze the .arb files and generate the necessary localization classes and files for your project.

• After running the command, you’ll find the generated localization classes in the lib/generated directory. These classes will handle language switching and provide access to localized strings.

Step 5: Load Localizations:

1. In your app’s entry point (e.g., main.dart), import the necessary packages:

import ‘package:flutter_localizations/flutter_localizations.dart’;

import ‘package:your_app/generated/l10n.dart’;

• Inside the main() function, wrap the MaterialApp widget with MaterialApp.localizationsDelegates and MaterialApp.supportedLocales:

runApp(

  MaterialApp(

    localizationsDelegates: [

      S.delegate, // Generated delegate

      GlobalMaterialLocalizations.delegate,

      GlobalWidgetsLocalizations.delegate,

    ],

    supportedLocales: S.delegate.supportedLocales,

    // …

  ),

);

Step 6: Retrieve Localized Strings:

1. To access the localized strings in your app, import the generated localization class where needed:

import ‘package:your_app/generated/l10n.dart’;

• Use the generated class to retrieve the localized strings. For example:

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

Step 7: Changing the App’s Locale:

1. Create a Locale object representing the user’s selected language preference. You can store this preference in a persistent storage (e.g., shared preferences).

• Set the app’s locale to the user’s preferred language in the MaterialApp widget:

MaterialApp(

  locale: yourSavedLocale,

  // …

)

• Whenever the user changes the language preference, update the locale and rebuild the relevant parts of your app to reflect the new language.

Step 8: Format Dates and Numbers:

1. For date and number formatting, use the intl package. Import it in your relevant files:

import ‘package:intl/intl.dart’;

• Use the relevant DateFormat or NumberFormat classes to format dates, times, currencies, or numbers based on the app’s current locale.

Step 9: RTL Support for iOS:

1. For RTL support on iOS, add the flutter_localizations package as a dependency in your iOS project’s Podfile:

target ‘Runner’ do

    # …

    pod ‘FlutterLocalizations’, :path => Flutter.localizationsPath

  end

• Run pod install in your terminal to install the dependencies and enable RTL support for iOS.

Step 10: Testing:

1. Run your app on emulators or physical devices with different language settings to test the localization.

• Verify that the app displays the correct translations and follows the RTL layout guidelines for RTL languages.

Conclusion:

From project setup to generating localization classes, loading localizations, changing locales, and handling RTL support, you are now equipped to create a multilingual app that provides a superb user experience tailored to different language preferences.