How to use flutter_localizations in FlutLab

Myroslava Drobnych
3 min readDec 6, 2021
  1. Open — Flutter online IDE in your favorite browser.

2. Go to your Profile and press the “+ Project” button.

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

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

sdk: flutter
intl: ^0.17.0

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

generate: true

6. Press the “pub get” button.

7. Wait for the result — “Process finished successfully”

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

9. 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

10. Createl10n folder inside lib folder.

11. Createapp_en.arb file inside lib/l10n folder.

12. Add code there

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

13. Createapp_es.arb file inside lib/l10n folder.

14. Add code there

"helloWorld": "¡Hola Mundo!"

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

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

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

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

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

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

19. Replace this fragment of code (line 49)

Text('Hello, World!'),

with this one


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

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

22. 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,