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