Question 322092 in Flutter Question posted in
The official Flutter documentation can be found here.

How do I programatically change Locale in Flutter when using MaterialApp.router()

I have:

final themeMode = context.select<PreferencesChangeNotifier, ThemeMode>((notifier) => notifier.themeMode);
final locale = context.select<LocaleChangeNotifier, Locale>((notifier) => notifier.locale);

return MaterialApp.router(
  locale: locale,
  debugShowCheckedModeBanner: false,
  scaffoldMessengerKey: MyApp.rootScaffoldMessengerKey,
  localizationsDelegates: AppLocalizations.localizationsDelegates,
  supportedLocales: AppLocalizations.supportedLocales,
  routeInformationParser: _routeInformationParser,
  routerDelegate: _routerDelegate,
  title: 'MyApp',
  theme: AppTheme.instance.lightTheme,
  darkTheme: AppTheme.instance.darkTheme,
  themeMode: themeMode,
);

But this only sets the initial Locale and even though MaterialApp gets rebuilt when locale changes, it does not reflect the change.

According to the docs, this is done using Localizations.override()

But I cannot put Localizations.override() above the MaterialApp, since localizations are not in its BuildContext.

I am completely lost where should I set the desired locale. The only thing I could think of is to override the locale on each screen, which seems hacky and I assume two sets of localizations would need to be loaded in such case.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Answering myself with a workaround to the problem, I am still looking for a better solution:

    I wrapped the MaterialApp widget with a key dependent on Locale, so that the MaterialApp effectively restarts when the Locale changes:

    final locale = context.select<LocaleChangeNotifier, Locale>((notifier) => notifier.locale);
return KeyedSubtree(
  key: Key('myApp-$locale'),
  child: MaterialApp.router(...),
);

    I then had to add a locale dependent key to a few other places as some widgets persisted and got reattached to the new MaterialApp tree. It's a bit fragile solution, but seems to work for now.


  2. 0

    MaterialApp maybe not rebuilding when value of locale changes.

    use a ValueListenableBuilder that listens to changes in the locale value
    and then rebuilds a materialApp

    return ValueListenableBuilder<Locale>(
 valueListenable: locale,
 builder: (context, locale, _) {
   return MaterialApp.router(
     locale: locale,
     debugShowCheckedModeBanner: false,
     scaffoldMessengerKey: MyApp.rootScaffoldMessengerKey,
     localizationsDelegates: AppLocalizations.localizationsDelegates,
     supportedLocales: AppLocalizations.supportedLocales,
     routeInformationParser: _routeInformationParser,
     routerDelegate: _routerDelegate,
     title: 'MyApp',
     theme: AppTheme.instance.lightTheme,
     darkTheme: AppTheme.instance.darkTheme,
     themeMode: themeMode,
   );
 },
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search