Flutter manually change Language with flutter_localizations and intl

Question

I'm creating a PopupMenuButton to change the language of the app locally but I don't know how to load a different language.
This is the Widget that I'm creating to change the language and I want to set the app language to the value of the PopupMenu item.

import 'package:flutter/material.dart';
import '../generated/l10n.dart';

class ChangeLanguage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PopupMenuButton(
      offset: const Offset(0, 40),
      onSelected: (value) {
        //set language to value
        print(L.current);
        print(Localizations.localeOf(context).toString());
      },
      itemBuilder: (BuildContext context) => [
        PopupMenuItem(
            value: "de",
            child: Text(
              "Deutsch",
              style: Theme.of(context).textTheme.bodyText2,
            )),
        PopupMenuItem(
            value: "en",
            child: Text(
              "English",
              style: Theme.of(context).textTheme.bodyText2,
            )),
      ],
    );
  }
}

I have implemented flutter_localizations and intl in the main.dart file like this:

localizationsDelegates: [
  L.delegate,
  GlobalMaterialLocalizations.delegate,
  GlobalWidgetsLocalizations.delegate,
  GlobalCupertinoLocalizations.delegate,
],
supportedLocales: L.delegate.supportedLocales,

The supported languages are en and de and generated with the intl package.

score 2 · Accepted Answer · answered Apr 24 '21 at 20:33

MaterialApp widget receives a parameter locale, which receives an instance of Locale. You should store (SQL, sharedpreferences, hive, firebase or any data storage service) the value of the preferred language for your client. For example: if the client has set up the 'en' language as default, you could provide to MaterialApp the locale: Locale('en', 'US')

In main.dart you could get the the value and store it in a variable

final language=await _getLanguage();//this method returns a String
Locale locale;//late Locale locale if using null safety
if(language=='de'){
  setState((){
    locale=Locale('de', 'DE');
  });
 
}
else{
  setState((){
    locale=Locale('en', 'US');//assuming that English is your default language.
  })
}


...

return MaterialApp(
  ...
  locale: locale,
);

And that's it. You could use, of course, your preferred state management tool for getting this done better, but this is the core of the implementation you need

Flutter manually change Language with flutter_localizations and intl

1 Answers1