BuildContext locale and setLocale

[leoshusar]

Hi! I am using this package for my app but I also have older package with localization using intl - like MyPackageLocalizations.of(context).blah.
I have noticed that when I use LocaleSettings.setLocale(), it doesn't set context's locale and so strings provided by that package are not translated.
Confirmed when I set MaterialApp(locale: myLocale), it works.

Do I need to set context's locale by myself?

[Tienisto]

I played around a little bit. This should work:

void main() {
  // wrap your app with generated TranslationProvider
  runApp(TranslationProvider(child: MyApp()));
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    Translations.of(context); // this will trigger a rebuild of current widget on locale change
    return MaterialApp(
      locale: LocaleSettings.currentLocale.flutterLocale, // which rerenders the MaterialApp with updated locale
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: LocaleSettings.supportedLocales,
      home: MyHomePage(),
    );
  }
}

I will look for a more elegant solution. I am open for any ideas :)

Edit 1: Yeah, it seems that you have to manage it yourself (by adding the locale attribute to MaterialApp)

[leoshusar]

Thanks! I tried to put Translations.of(context) before the MaterialApp and it works - but not exactly 100 % for my app.

For context: I have my own page manager and the pages are defined like this:

class UsersPage extends StatefulWidget with NamedPage {
  const UserRolesPage({
    Key? key,
  }) : super(key: key);

  @override
  _UserRolesPageState createState() => _UserRolesPageState();

  @override
  String get header => i18n.pages.users.header;
}

and then I have list of those pages and I feed them into TabBarView or PageView etc. And what doesn't get translated are those headers, when I create TabBar like this:

TabBar(
  controller: tabController,
  tabs: pages.map((p) => Tab(text: p.header)).toList(),
),

It got translated when I put Translations.of(context) to that Scaffold too.

But I found this kinda hack answer on SO, where you can mark all children elements for rebuild.
So I have created Translatable wrapper around MaterialApp which has the method from SO and now when I do

onPressed: () {
  LocaleSettings.setLocale(AppLocale.cs);
  Translatable.of(context).rebuildAllChildren();
},

everything gets translated!

I don't know if you'd actually like to implement these "hacks" in your library :) I just wanted to share what I've found.

[Tienisto]

It got translated when I put Translations.of(context) to that Scaffold too.

Yep, if you expect the user to change the locale, then it is a better practice to get the translations via Translations.of.
You only need to use this method for widgets that are visible during locale change. But of course, you can use your "hack" to rebuild all widgets :)

final t = Translations.of(context);

return Column(
  children: [
    Text(t.myPage.title),
    Text(t.myPage.subTitle),
  ]
);