How to change a Flutter app language without restarting the app?

Question

In the settings page of my app, I would like to add an option that controls the app language.

I can set the language before starting the app like this:

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // other arguments
      locale: Locale('ar'),
    );
  }

But is it possible to change the language without restarting the app?

Answer 1

If you want to change app language without restarting the app and also without any plugin, you can follow the bellow steps:

1. In main file of the application, change the default MyHomePage to a StatefullWidget, in StatefullWedget for example MyHomePage create a static method setLocal as follow

   class MyHomePage extends StatefulWidget {
     MyHomePage({Key key}) : super(key: key);
   
      static void setLocale(BuildContext context, Locale newLocale) async {
         _MyHomePageState state = context.findAncestorStateOfType<_MyHomePageState>();
           state.changeLanguage(newLocale);
        }
   
     @override
    _MyHomePageState createState() => _MyHomePageState();
   }
   

where _MyHomePageState is the state of your MyHomePage widget

2. In your state create a static method changeLanguage:

    class _MyHomePageState extends State<MyHomePage> {
     Locale _locale;
   
      changeLanguage(Locale locale) {
        setState(() {
         _locale = locale;
        });
       }
   
     @override
     Widget build(BuildContext context) {
         return MaterialApp(
           debugShowCheckedModeBanner: false,
           title: 'Afghanistan',
           theme: ThemeData(primaryColor: Colors.blue[800]),
           supportedLocales: [
             Locale('fa', 'IR'),
             Locale('en', 'US'),
             Locale('ps', 'AFG'),
           ],
           locale: _locale,
           localizationsDelegates: [
             AppLocalizationsDelegate(),
             GlobalMaterialLocalizations.delegate,
             GlobalWidgetsLocalizations.delegate
           ],
           localeResolutionCallback: (locale, supportedLocales) {
             for (var supportedLocale in supportedLocales) {
               if (supportedLocale.languageCode == locale.languageCode &&
                   supportedLocale.countryCode == locale.countryCode) {
                 return supportedLocale;
               }
             }
             return supportedLocales.first;
           },
           initialRoute: splashRoute,
           onGenerateRoute: Router.generatedRoute,
         );
      }
     }
   

3. Now from pages of your application you can change the language by calling the setLocal method and pass a new Locale as follow:

   Locale newLocale = Locale('ps', 'AFG');
   MyHomePage.setLocale(context, newLocale);
   

4. Please remember you need to create a LocalizationDelegate,

5. Here is the link to the Written Tutorial and Demo Application