Guide: Localization

The web client is fully internationalized using Flutter’s built-in localization support. This guide explains how to add new translation strings and support for new languages.

Localization Files

All translation strings are stored in Application Resource Bundle (.arb) files located in the lib/l10n/arb/ directory.

app_en.arb: Contains the English translations. This is the template file.
app_ar.arb: Contains the Arabic translations.

Each entry in an .arb file consists of a key, the translated string, and an optional description.

{
    "@@locale": "en",
    "accountPageTitle": "Account",
    "@accountPageTitle": {
        "description": "Title for the account page"
    }
}

How to Add a New Translation String

Add the Key to the English Template

Open lib/l10n/arb/app_en.arb and add a new entry for your string. Provide a clear key and a helpful description.
```
"myNewFeatureTitle": "My New Feature",
"@myNewFeatureTitle": {
    "description": "Title for the new feature page"
}
```
Add Translations to Other Languages

Open the .arb file for each supported language (e.g., app_ar.arb) and add the corresponding translated string for the new key.
```
"myNewFeatureTitle": "ميزتي الجديدة",
```
Generate Dart Code

Flutter’s localization tool automatically generates Dart code from your .arb files. This process is usually triggered automatically when you save an .arb file if you are using a modern IDE with the Flutter extension.

If you need to run it manually, execute the following command in your terminal:
Terminal window
```
flutter gen-l10n
```

Use the String in Your UI

You can now access your new string in any widget that has a BuildContext using the generated AppLocalizations class.

import 'package:flutter_news_app_web_dashboard_full_source_code/l10n/l10n.dart';

// ... inside a build method
Text(context.l10n.myNewFeatureTitle);

How to Add a New Language

To add support for a new language, such as French:

Create a new file: lib/l10n/arb/app_fr.arb.
Set the locale at the top of the file: "@@locale": "fr".
Copy all the keys from app_en.arb and provide the French translations.
Run flutter gen-l10n to update the generated code.
Finally, add the new language to the list of supported languages in lib/app/view/app.dart.