How do you do localization in flutter?

The latest version Flutter 2.5 has added many features. But how do we do localization in the latest version of Flutter? All we know that Flutter 2.5 has made that process rather easy.

In this tutorial we will discuss that topic.

We have already discussed a few of them. In addition, in the previous post on the latest version of Flutter, we have seen that localization has been made easy with the Flutter 2.5 app template.

Firstly, we can get the full code snippet at our respective GitHub repository. We’ll use the part of code here for brevity.

Secondly, Flutter 2.5 app template skeleton has added a localization folder, where we get a file “app_en.arb” , like the following code snippet:

{
  "appTitle": "new_flutter_template",
  "@appTitle": {
    "description": "The title of the application"
  }
}

It has defined the app title: “new_flutter_template”. Similarly we can create another file “app_fr.arb”. And change the app title so that it displays French instead of English.

{
    "appTitle": "new_flutter_template_en_Francais",
    "@appTitle": {
      "description": "Le titre de la application"
    }
  }

However, our task is not finished with this only. We have to change this part in our “app.dart” file.

supportedLocales: const [
            Locale('en', ''), // English, no country code
            Locale('fr', ''), // French, no country code
          ],

          // Use AppLocalizations to configure the correct application title
          // depending on the user's locale.
          //
          // The appTitle is defined in .arb files found in the localization
          // directory.
          onGenerateTitle: (BuildContext context) =>
              AppLocalizations.of(context)!.appTitle,
...
// code is incomplete for brevity

In the comments section of on generate title named parameter, we see that it is clearly mentioned that app title is defined in .arb files found in the localization.

How do you change the localization in flutter?

Before we want to change the localization in Flutter, we need to run the file and see the default home page first.

The above image has been generated from the sample_item_list_view.dart file in lib/src/sample_feature folder.

As a result we need to change the App Bar title there like the following:

 Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context)!.appTitle),
...

However, it will throw error if we don’t import this file on the top of the file.

import 'package:flutter_gen/gen_l10n/app_localizations.dart';

Now, we need to change the language settings from English to French. And, as a result, the home page app title will change as the following screenshot.

The Flutter 2.5 latest version app template skeleton also shows us how to pass data through the class constructors.

In our next tutorial on Flutter 2.5 changes, we’ll discuss that.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter