Manage Multiple Languages

Localization is used for displaying text to users in different languages based on their device language. This is implemented using Flutter’s recommended approach, powered by the Dart-maintained intl package.

Creating Translations

The translations are stored in .arb files, one per supported language. Each file should be named using the language locale. For example, English translations go in app_en.arb, and Spanish translations in app_es.arb.

Here is an example entry in the English translation file:

1
{
2
  "@@locale": "en",
3
  "appName": "Flutter Kit",
4
  "@appName": {
5
    "description": "The name of the app"
6
  },
7
  "errorGeneric": "Oops! Something went wrong",
8
  "@errorGeneric": {
9
    "description": "The generic error message"
10
  }
11
}

To generate the necessary code, run:

1
flutter pub get

Once generated, you can access translations in a few different ways.

With BuildContext

You can access localized strings directly with the standard AppLocalizations API:

1
Text(
2
  AppLocalizations.of(context)!.errorGeneric,
3
)

We also provide a context.translate extension for convenience:

1
Text(
2
  context.translate.errorGeneric,
3
)

Without BuildContext

If you’re working in a view model, service, or anywhere else that doesn’t have access to a BuildContext, you can use the static accessor:

1
Translate.current.errorGeneric

This makes localization usable in pure Dart classes and non-widget layers of your app.

Adding Other Languages

To add another language, create a new .arb file using the correct locale code. Descriptions are optional and primarily for developers.

1
{
2
  "@@locale": "es",
3
  "appName": "Flutter Kit ES",
4
  "errorGeneric": "Oops! Algo salió mal"
5
}

Then run the generation command again:

1
flutter pub get

Your app will automatically pick up the new language if the user’s device is set to that locale.