How to use flutter_localizations in FlutLab

1. Open https://flutlab.io — 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:

  flutter_localizations:
    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
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  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

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

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,