How to Create MultiLingual Application In Flutter?

The internalization tutorial on flutter’s website teaches us how to set up our app in a way to supports multiple locales. Something along those lines. So in this article, we will go through How to Create Multilingual Application In Flutter.

How to Create a MultiLingual Application In Flutter?

This can be accomplished by

creating a new LocalizationsDelegate that either translates to a single locale or defers completely depending on a parameter
converting the base app (MyApp) to a stateful widget and inserting the new delegate above into the localizationsDelegates list
managing the base app (MyApp) state with a new delegate targeting a specific locale based on some event

So a simple implementation for 1) might be:

class SpecifiedLocalizationDelegate
    extends LocalizationsDelegate<Translations> {
  final Locale overriddenLocale;

  const SpecifiedLocalizationDelegate(this.overriddenLocale);

  @override
  bool isSupported(Locale locale) => overriddenLocale != null;

  @override
  Future<Translations> load(Locale locale) =>
      Translations.load(overriddenLocale);

  @override
  bool shouldReload(SpecifiedLocalizationDelegate old) => true;
}

Next for 2) and 3), convert the MyApp to stateful and include the new delegate (initially just deferring everything), plus some event handlers to change the state with a new delegate that specifies a new Locale.

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  SpecifiedLocalizationDelegate _localeOverrideDelegate;

  @override
  void initState() {
    super.initState();
    _localeOverrideDelegate = new SpecifiedLocalizationDelegate(null);
  }

  onLocaleChange(Locale l) {
    setState(() {
      _localeOverrideDelegate = new SpecifiedLocalizationDelegate(l);
    });
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      localizationsDelegates: [
        _localeOverrideDelegate,
        const TranslationsDelegate(),
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', ''), // English
        const Locale('fr', ''), // French
      ],
      home: new LandingPage(onLocaleSwitch: onLocaleChange),
    );
  }
}

So with these changes, in children’s widgets, you could now use Translations. of(context).myLocalizedString to retrieve the translations.

To control the locale of the app, you can use the locale property of the MaterialApp:

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

using one of the Providers should do the job, I am not really familiar with providers but this got me working easily.

Wrap your material app using ChangeNotifierProvider

return ChangeNotifierProvider(
        create: (_) => new LocaleModel(),
        child: Consumer<LocaleModel>(
            builder: (context, provider, child) => MaterialApp(
                title: 'myapp',
                locale: Provider.of<LocaleModel>(context).locale
                 ...
                 ...
                 ...

Create a model class with getters and setters to get & set the locale as

import 'package:iborganic/const/page_exports.dart';

class LocaleModel with ChangeNotifier {
  Locale locale = Locale('en');
  Locale get getlocale => locale;
  void changelocale(Locale l) {
    locale = l;
    notifyListeners();
  }
}

Change the locale on some event (button click) as
```
Provider.of<LocaleModel>(context).changelocale(Locale("kn"));
```
So the benefit of wrapping the material app within Provider is you can have access to the locale value from any part of your app.

The easiest way, which weirdly enough is not mentioned in the internationalization tutorial, is using the locale property.

So this property of the MaterialApp class allows us to immediately specify what locale we want our app to use.
```
return MaterialApp(
  locale: Locale('ar', ''),
  localizationsDelegates: [
    MyLocalizationsDelegate,
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('en', ''), // English
    const Locale('ar', ''), // Arabic
  ],
  home: HomeScreen()
);
```
This tutorial explained it better. It also explained how to load the locale preference from shared preferences.

Conclusion:

Thanks for being with us on a Flutter Journey !!!

So in this article, We have been through How to Create a MultiLingual Application In Flutter.

Keep Learning !!! Keep Fluttering !!!

Do not forget to drop your feedback in the comments. It keeps the enthusiasm going. Also, let us know if have any doubts about flutter development!! we are here to help 🙂

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.