Flutter internationalize

Will help you to create json locale files

Features

Better editor for localization.

Grouping text for easier managing text

Migrating to null-safety

If you want to generate null safety dart code you have to use a version >= 0.2.0 of this extension. Older versions of this extension will generate classic dart code (not null-safety).

There is an easy way to change extension version in VSCode:

Requirements

Open command palette (Ctrl + Shift + P) and run "Flutter Internationalize: Open"

This extension will search files json in locales folder in your project root folder. And search for desc.json as the entry point. If file not exist, the extension will create it (and also will create 1 json file called EN_US.json).

If you want to add new language just add new [lang].json

Import from excel file

For excel structure, please do export first to see the structure. Important: Import will remove all json files inside the "locales" folder

Generate dart file and load to application

For easier access from dart side, it can generate the code by click on "Generate dart code" button. The it will create a file called locale_base.dart in lib/generated folder.

Here example of the generated file :

class LocaleBase {
  late Map<String, dynamic> _data;
  late String _path;
  Future<void> load(String path) async {
    _path = path;
    final strJson = await rootBundle.loadString(path);
    _data = jsonDecode(strJson);
    initAll();
  }
  
  Map<String, String> getData(String group) {
    return Map<String, String>.from(_data[group]);
  }

  String getPath() => _path;

  late Localemain _main;
  Localemain get main => _main;

  void initAll() {
    _main = Localemain(Map<String, String>.from(_data['main']));
  }
}

class Localemain {
  late final Map<String, String> _data;
  Localemain(this._data);

  String getByKey(String key) {
    return _data[key]!;
  }

  String get sample => _data["sample"]!;
  String get save => _data["save"]!;
  String get title => _data["title"]!;
  String get info => _data["info"]!;
}

class Localesetting {
  final Map<String, String> _data;
  Localesetting(this._data);

  String get global => _data["global"];
  String get labelUsername => _data["labelUsername"];
}

To load it on the app, you will need to add it on pubspec.yaml first :

  assets:
    - locales/EN_US.json
    - locales/IN_ID.json

And you can load to your app by import the dart code generated above :

final LocaleBase lBase = LocaleBase;
lBase.load('locales/EN_US.json').then((v) {
  //to read on group main and key sample:
  print(lBase.main.sample);
  //to read on group main and key save:
  print(lBase.main.save);
});

Use it on LocalizationsDelegate

class LocDelegate extends LocalizationsDelegate<LocaleBase> {
  const LocDelegate();
  final idMap = const {'en': 'locales/EN_US.json', 'id': 'locales/IN_ID.json'};

  @override
  bool isSupported(Locale locale) => ['en', 'id'].contains(locale.languageCode);

  @override
  Future<LocaleBase> load(Locale locale) async {
    var lang = 'en';
    if (isSupported(locale)) lang = locale.languageCode;
    final loc = LocaleBase();
    await loc.load(idMap[lang]);
    return loc;
  }

  @override
  bool shouldReload(LocDelegate old) => false;
}

Then add delegate to MaterialApp:

  localizationsDelegates: [
    const LocDelegate(),
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],

And we can get loc text on any widget:

Widget build(BuildContext context) {
  final loc = Localizations.of<LocaleBase>(context, LocaleBase);
  print(loc.main.save);
  print(loc.main.cancel);
}

Example of flutter project

Example can be found at here

Any contribution are welcome

Terima kasih