How to setup ChangeNotifier for loading locale files - flutter

Question

I am new to flutter.
I am building a multi language app.
Before app start it needs to load current locale file.
Then every time user changes the locale it needs to load the new file.
At least in theory, I think this can be done using "ChangeNotifierProvider" , ProxyProvider or something similar.
So I have AppLanguage class load the correct locale file based on language code
class AppLanguage extends ChangeNotifier {
String _appLocale = 'en';
Map<String, String> _localizedStrings;
Map<String, String> get localeData => this._localizedStrings;
Future<bool> getLocaleData() async {
var prefs = await SharedPreferences.getInstance();
if (prefs.getString('language_code') == null) {
_appLocale = 'en';
await prefs.setString('language_code', _appLocale);
} else {
_appLocale = prefs.getString('language_code');
}
String jsonString = await rootBundle.loadString('i18n/$_appLocale.json');
Map<String, dynamic> jsonMap = json.decode(jsonString);
_localizedStrings = jsonMap.map((key, value) {
return MapEntry(key, value.toString());
});
return true;
}
Future<void> changeLanguage(String locale) async {
var prefs = await SharedPreferences.getInstance();
_appLocale = locale;
await prefs.setString('language_code', locale);
notifyListeners();
}
}
getLocaleData() function read the data and changeLanguage change current locale and fires notifyListeners
class Translator {
final Map<String, String> localizedStrings;
Translator(this.localizedStrings);
String translate(String key) {
return localizedStrings[key];
}
}
the Widgets will use translator class to get the correct translations.
The problem I have is, how to wire this up in main. I am stuck at how to setup the providers.
void main() async {
WidgetsFlutterBinding.ensureInitialized();
AppLanguage appLanguage = AppLanguage();
await appLanguage.getLocaleData();
runApp(MyApp(appLanguage: appLanguage));
}
class MyApp extends StatelessWidget {
final AppLanguage appLanguage;
MyApp({this.appLanguage});
#override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ProxyProvider<AppLanguage, Translator>(
update: (context, appLanguage, trans) =>
Translator(appLanguage.localeData),
),
],
child: MaterialApp(
title: 'Language Demo',
home: MyHomePage(),
),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Hello'),
),
body: Container(),
);
}
}
Can someone kindly provide some help to wire this up?
Or maybe provide a better way of doing this?

Answer 1

A few things, ProxyProvider (or any type of ProxyProvider, ChangeNotifierProxyProvider, etc.) updates its value when the provider it depends on changes too, but you created the AppLanguage in main, without an inject dependency, just like a simple class (it's not really provided in the context) so it would be easier to just use a ChangeNotifierProvider in this case.
There is a parameter called window.locale that return the language the device it's using at that time, at the start of the app you can use it to know the language of the device if you're don't have it the sharedPreference the first time. Advante of this it's that in your example if there is not preference saved it will use the default 'en' for English, but you also support japanase, so if someone has its device in japanese and download your app for the first time it would be nice to use japanese since the beginning.
Future<Locale> _getLocaleData() async {
var prefs = await SharedPreferences.getInstance();
String languageCode = prefs.getString('language_code');
if (languageCode == null) {
return window.locale;
} else {
return Locale(languageCode);
}
}
void main() async {
Locale locale = await _getLocaleData();
runApp(MyApp(
appLanguage: locale,
));
}
class MyApp extends StatelessWidget {
final Locale language;
MyApp({this.language});
#override
Widget build(BuildContext context) {
return ChangeNotifierProvider<AppLanguage>(
builder: (_) => AppLanguage(language),
child: Consumer<AppLanguage>(builder: (context, model, _) {
return MaterialApp(
locale: model.appLocal,
supportedLocales: [
Locale('en', 'US'),
Locale('ja', ''),
],
localizationsDelegates: [
AppLocalizations.delegate, //create your AppLocalizations just like the article you shared
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
home: MyWidget(),
);
}),
);
}
}
class AppLanguage extends ChangeNotifier {
AppLanguage(Locale locale) : _appLocale = locale;
Locale _appLocale;
Locale get appLocal => _appLocale;
Future<void> changeLanguage(String locale) async {
var prefs = await SharedPreferences.getInstance();
_appLocale = Locale(locale);
await prefs.setString('language_code', locale);
notifyListeners();
}
}