How to use flutter_localizations in FlutLab

1. Open your Profile and press the “+ Project” button.

2. Create a new project with “CodeBase: Stateless Hello World”.

3. Open pubspec.yaml file and add the packages as a dependency:

  flutter_localizations:
    sdk: flutter
  intl: ^0.17.0

4. Also, in the pubspec.yaml file, enable the generate flag:

  generate: true

5. Press the “pub get” button.

6. Wait for the result - “Process finished successfully”

7. Let’s create an l10n.yaml file inside the root folder. Click the “Create file” icon (look at the screenshots below):

8. File was successfully created. Add these lines inside it:

  arb-dir: lib/l10n
  template-arb-file: app_en.arb
  output-localization-file: app_localizations.dart

9. Create l10n folder inside lib folder.

10. Create app_en.arb file inside lib/l10n folder.

11. Add code there

  {
    "helloWorld": "Hello World!",
    "@helloWorld": {
      "description": "The conventional newborn programmer greeting"
    }
}

12. Create app_es.arb file inside lib/l10n folder.

13. Add code there

  {
    "helloWorld": "¡Hola Mundo!"
  }

14. Press the “Build Project” button and run your app.

15. So that codegen takes place. You should see generated files in /.dart_tool/flutter_gen/gen_l10n.

16. Add the import to your main.dart file:

import 'package:flutter_localizations/flutter_localizations.dart';

import 'package:flutter_gen/gen_l10n/app_localizations.dart';

17. In the main.dart file find line 14 and add this code:

  locale: Locale('es', ''),
  localizationsDelegates: [
    AppLocalizations.delegate, // Add this line
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: [
    Locale('en', ''), // English, no country code
    Locale('es', ''), // Spanish, no country code
  ],

18. Replace this fragment of code (line 49)

  Text('Hello, World!'),

with this one

  Text(AppLocalizations.of(context)!.helloWorld),

19 Press the “Build Project” button with web-build.

20. If you will open app_localizations.dart file, you can find generated localizationsDelegates and supportedLocales list:

21. So, this allows you to write more concise code and use the generated localizationsDelegates and supportedLocales list instead of providing them manually.

  localizationsDelegates: AppLocalizations.localizationsDelegates,
  supportedLocales: AppLocalizations.supportedLocales,

https://docs.flutter.dev/development/accessibility-and-localization/internationalization

Supported languages

af - Afrikaans
am - Amharic
ar - Arabic
as - Assamese
az - Azerbaijani
be - Belarusian
bg - Bulgarian
bn - Bengali Bangla
bs - Bosnian
ca - Catalan Valencian
cs - Czech
da - Danish
de - German (plus one country variation)
el - Modern Greek
en - English (plus 8 country variations)
es - Spanish Castilian (plus 20 country variations)
et - Estonian
eu - Basque
fa - Persian
fi - Finnish
fil - Filipino Pilipino
fr - French (plus one country variation)
gl - Galician
gsw - Swiss German Alemannic Alsatian
gu - Gujarati
he - Hebrew
hi - Hindi
hr - Croatian
hu - Hungarian
hy - Armenian
id - Indonesian
is - Icelandic
it - Italian
ja - Japanese
ka - Georgian
kk - Kazakh
km - Khmer Central Khmer
kn - Kannada
ko - Korean
ky - Kirghiz Kyrgyz
lo - Lao
lt - Lithuanian
lv - Latvian
mk - Macedonian
ml - Malayalam
mn - Mongolian
mr - Marathi
ms - Malay
my - Burmese
nb - Norwegian Bokmål
ne - Nepali
nl - Dutch Flemish
no - Norwegian
or - Oriya
pa - Panjabi Punjabi
pl - Polish
ps - Pushto Pashto
pt - Portuguese (plus one country variation)
ro - Romanian Moldavian Moldovan
ru - Russian
si - Sinhala Sinhalese
sk - Slovak
sl - Slovenian
sq - Albanian
sr - Serbian (plus 2 scripts)
sv - Swedish
sw - Swahili
ta - Tamil
te - Telugu
th - Thai
tl - Tagalog
tr - Turkish
uk - Ukrainian
ur - Urdu
uz - Uzbek
vi - Vietnamese
zh - Chinese (plus 2 country variations and 2 scripts)
zu - Zulu

How to use flutter_localizations in FlutLab

Read More

Supported languages