Flutter - Dynamic language based on device

Question

I´am trying to get the mobile countryCode and languageCode using Localizations

Widget build(BuildContext context) {
        Locale myLocale = Localizations.localeOf(context);
        print(myLocale.countryCode);
        print(myLocale.languageCode);
        return MaterialApp(
          title: 'Title',
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            primarySwatch: Colors.blue,       
          ),
          home: LoginPage(),
          localizationsDelegates: [
            GlobalMaterialLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate,
          ],
          supportedLocales: [
            Locale('es' 'ES'),
          ],
        );
      }

But return "Localizations ancestor was not found".Somebody know what is the correct way to do this?

Marleah

Answer 1

Use LocaleResolutionCallback to get the device locale :

 Widget build(BuildContext context) {
    Locale myLocale ;

    return MaterialApp(
      title: 'Title',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,       
      ),
      home: LoginPage(),
      localeResolutionCallback: (deviceLocale, supportedLocales) {
      myLocale = deviceLocale ; // here you make your app language similar to device language , but you should check whether the localization is supported by your app
      print(myLocale.countryCode);
      print(myLocale.languageCode);
      }
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        Locale('es' 'ES'),
      ],
    );
  }

Seismology

supportedLocales: [ Locale(myLocale.languageCode,myLocale.countryCode), ], can i do this? – Marleah

You can, but it won't help you that much as supportedLocales are those which are built in your app and used to check against them. – Seismology

How can I use this locale in widgets that are created deep down the widget tree? – Exigible

@JohnSmithOptional any luck with that? – Loydloydie

You can use a Bloc, and let it provide the locale data to your app. – Seismology

@ElJazouli yes, see my question here #56992783 and the reply from user 10101010 : https://mcmap.net/q/1632525/-how-to-get-the-preferred-language-of-a-user-before-building-a-widget-in-flutter – Exigible

Answer 2

Based on the answer by Ibrahim I was able to solve another use case - what to do if your app does not support a locale. How do you make sure that the applications falls back to the appropriate 'base' language - in my case 'en'. Here is my attempt - please feel free to comment.

  MaterialApp(
    localizationsDelegates: [
      AppLocalizations.delegate,
      GlobalMaterialLocalizations.delegate,
      GlobalWidgetsLocalizations.delegate,
      GlobalCupertinoLocalizations.delegate,
    ],
    //ensure that if a locale is not on the list the fallback is 'en'
    localeResolutionCallback: (
      locale,
      supportedLocales,
    ) {
      if (supportedLocales.contains(Locale(locale.languageCode))) {
        return locale;
      } else {
        return const Locale('en', '');
      }
    },
    supportedLocales: [
      const Locale('en', ''),
      const Locale('pl', ''),
    ],

Hectare

Thanks. your approach is not null safe. Here is my adapted soluction: if (locale != null && supportedLocales.contains(Locale(locale.languageCode))) { return locale; } else { return supportedLocales.first; } – Marabout