# A Step-by-Step Guide to Internationalizing Flutter App

### Introduction

Welcome to this comprehensive tutorial where we will delve into the key steps required to internationalize your Flutter app. We'll focus on the essentials and provide you with a clear understanding of the process. For more detailed explanations and advanced use cases, you can refer to our [recommended resource](https://docs.flutter.dev/accessibility-and-localization/internationalization#introduction-to-localizations-in-flutter) on Internationalizing Flutter apps.

### Configuration settings

To get started, follow these steps:

1. Create your Flutter project and execute the following code to download the required packages:
    ```bash
    flutter pub add flutter_localizations --sdk=flutter
    flutter pub add intl:any
    ```
2. In your `pubspec.yaml` file, add the following code under the Flutter section:
    ```yaml
    # The following section 
    is specific to Flutter.
    flutter:
      generate: true # Add this line
    ```
3. Create a `l10n.yaml` file in the root folder of your project:
    ```bash
    touch l10n.yaml
    ```
4. Open the `l10n.yaml` file and add the following content:
    ```yaml
    arb-dir: lib/l10n
    template-arb-file: app_en.arb
    output-localization-file: app_localizations.dart
    ```

    * Specify the `arb-dir` parameter with the folder path where your    `.arb` file will be stored.
    
    * Set the `template-arb-file` parameter with the name of your .arb file. The naming convention is `app_<language_code>.arb` , where `<language_code>` represents the language code (e.g., "en" for English, "es" for Spanish). You can create multiple `.arb` files for different languages you intend to support.
5. Create the `arb` folder and the `app_en.arb` file:
    ```bash
    mkdir lib/l10n
    touch lib/l10n/app_en.arb
    ```
6. Open `lib/l10n/app_en.arb` and add the following content:
    ```json
    {
    "materialAppTitle": "localizations Sample App'
    }
   ```
7. Run the following command to generate the necessary configuration file:
    ```bash
    flutter gen-l10n
    ```

### Adding localization to your app

To integrate localization into you app, follow these steps:

1. In `main.dart` , import `app_localizations.dart` :
    ```dart
    import 'package:flutter_gen/gen_l10n/app_localizations.dart';
    ```
2. Within the `MaterialApp` widget, add `AppLocalizations.localization` as the `localizationsDelegates` parameter and `AppLocalizations.supportedLocales` as the `supportedLocales` parameter:
    ```dart
    MaterialApp(
          localizationsDelegates: AppLocalizations.localizationsDelegates,
          supportedLocales: AppLocalizations.supportedLocales,
          home: Builder(builder: (context) {
            return Scaffold(
              body: Center(child:    Text(AppLocalizations.of(context)!.materialAppTitle)),
            );
          }),
        );
    ```
3. Whenever you update the `app_en.arb` file, run `flutter gen-l10n` to update it. Alternatively, if you're using Visual Studio Code, right-click on the `app_en.arb` file and select "Generate Localizations".
4. Run your Flutter app and it should now support localization.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686622424386/340cc948-2d65-4f18-94f6-458216c051de.png align="center")

### Conclusion

Congratulations!, You have successfully added localization to your Flutter app. Make sure to bookmark this tutorial for future reference in your upcoming Flutter projects. By implementing localization, you can reach a wider audience and provide a more personalized experience for your users.