If you want your APP to go overseas, then you need to consider supporting different locales when writing code, and set some “localized” values, such as text/layout. Flutter itself is international and easy to adapt. Today I will introduce a plugin called Flutter Intl to quickly internationalize Flutter.

Flutter Intl

The plugin flutter_i18n was stopped for some reason when I learned to adapt internationalization. A plugin named Flutter Intl was accidentally found. We just need to install it in VSCode/Android Studio.

Add the dependent

By default, Flutter only provides American English localization. To add support for other languages, the application must specify additional MaterialApp properties and include a separate package called “Flutter_localIzations”.

Add the Flutter_localizations dependency and perform Packages GET in pubspec.yaml

# internationalize Flutter_localIzations: SDK: flutterCopy the code

As shown below:

Initialize the project

Tools -> Flutter Intl -> Initialize for the Project

After initialization, the following fields are automatically added to pubspec.yaml

flutter_intl:
    enabled: true
Copy the code

Indicates that internationalization is enabled. At the same time, the generated and l10n directories are added in the lib directory.

  • l10nArb files are stored in the directory
  • generatedThe following DART code is automatically generated from the ARB file in the directory

ARB file

The ARB file extension: Application Resource Bundle stands for Application Resource Bundle and is supported by Google. Each. ARB file contains a JSON table that maps from the Resource ID to the localized value, and the file name contains the locale for which the value has been converted.

So, if we want to add a new language support, we just need to add the corresponding ARB file through the plug-in.

The new language

  • Add arB files through plug-ins

Then fill in the local value to generate the ARB file. For example, zh indicates Chinese.

A new messages_xx.dart file will be generated in lib/generated/intl/

Configuration language

After the ARB file is successfully generated, the best thing left is to configure the supportedLocales and localized localization delegates in the MaterialApp

MaterialApp (.....................// Set the language
    localizationsDelegates: const [
    S.delegate,
    GlobalMaterialLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate
    ],
    // Speak zh as the first option. If no language is adapted, English is the first optionSupportedLocales: spyware doctor elegate supportedLocales,.....................)Copy the code

Let’s explain the variables present in the above code

  • The element in the localizationsDelegates list is a factory that generates a localized set of values.

  • S.delegate is the localization delegate class of our project, which is automatically generated by plug-ins. It will automatically generate corresponding functions according to your ARB files.

  • GlobalMaterialLocalizations. Delegate for Material Components library provides a localized string and other values.

  • GlobalCupertinoLocalizations. Delegate to Cupertino Components library provides a localized string and other values.

  • GlobalWidgetsLocalizations. Delegate to define widget default text direction, from left to right or from right to left.

  • supportedLocalesSupported localization.
  • S.delegate.supportedLocalesThe localization that our program supports,Automatic plug-in generation, it will add before youarbFiles automatically update when you support localization.

For more information about these application properties, the types they depend on, and how to internationalize Flutter applications, see the official documentation 👉 internationalization in Flutter Applications.

use

As mentioned above, once the plug-in is configured, all we need to do is edit the corresponding fields in the ARB file, as shown here.

If you have other languages, you just need to add another ARB file.

Then we just need to replace the part of the string.

Then save the file, and the plugin automatically adds a function to message_xx.adart to retrieve the string.

Of course, arBS also support other syntaxes. Here’s the most common placeholder syntax:

  • Arb file
{"welcome": "welcome {name}"}
Copy the code
  • use
S.of(context).welcome("phoenixsky")
Copy the code

See more use intl | Dart Package

To switch between languages

The above said so much is just to tell us how to adapt to a variety of languages, the above operations are following the system to automatically adjust the language, so what is the way to allow users to customize the language switch? Nature is ok.

We just need to call the following code where appropriate.

S.load(Locale('zh'.'CN');
Copy the code

The zh/CN here can be replaced with other language code.

Then we save the selected language in SharedPreference and check the language set by the user every time we start the App. The effect is shown below:

The last

That’s all for this article. All in all, with the Flutter Intl tool, developers can save on cumbersome code configuration and focus on text adaptation.

The code has been uploaded to Github, feel helpful to the star👇

Github.com/YueYongDev/…

reference

  • intl | Dart Package
  • Flutter- International fit terminator
  • International Intl solution of FunFlutter series
  • Internationalization of Flutter application

Years ago to set a small goal, if the public number of readers more than 2000 will pull a reader exchange group, interested in the qr code can scan below the public number “01 binary” back to “add group”, we communicate together, progress together, grow together!