The internationalization of Flutter on the web is complicated. Most of the solutions are quite complex and difficult to implement compared to the native internationalization of Android and iOS. Recently, the company tried to introduce Flutter into its project development. The editor also took time to explore some technical points. This article is the most convenient of several schemes that HAVE been tried in the international exploration of Flutter. I would like to share some of them here.

Internationalization of Flutter requires the reliance of flutter_localIzations library. The specific integration method will not be described. Xiaobian uses Intl for internationalization processing, which is also the official recommended internationalization plug-in. Xiaobian uses Android Studio for development, other IDE interested can try.

Android Studio -> Preferences -> Plugins -> MarketPlace search for Flutter Intl

After the installation is complete, restart Android Studio for the Plugin to take effect and then execute Intialize for the project

This will add the following fields to pubspec.yaml

flutter_intl:
  enabled: true
Copy the code

The IDE will generate the following files for us

Dart and messages_en.dart files generated -> intl generated -> intl messages_all.dart and messages_en.dart files generated -> intl Generated -> intl messages_all.dart and messages_en.dart files generated -> intl

Arb = intl_en.arb = intl_en.arb = intl_en.arb = intl_en.arb = intl_en.arb = intl_en.arb = intl_en.arb Dart file generated -> intl; dart file generated -> intl;

We can then add strings to the.arb file that we want to internationalize, for example

{
  "name": "Tom"."age": "10"
}
Copy the code

Each addition or deletion automatically generates or removes the corresponding GET method for us in the L10N.dart file, where the GET method is our external access to the internationalized string.

 /// `Tom`
  String get name {
    return Intl.message(
      'Tom',
      name: 'name',
      desc: ' ',
      args: [],
    );
  }

  /// ` 10 `
  String get age {
    return Intl.message(
      '10',
      name: 'age',
      desc: ' ',
      args: [],
    );
  }
Copy the code

To use internationalization, you need to configure it in the MaterialApp in main.dart

    / / set the locale
    locale: locale,
    / / set the delegate
    localizationsDelegates: [
    // Intl helped us generate an internationalization delegate
        S.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
    // Set the supported language. Every language added will automatically be added to the supportedLocales file
    supportedLocales: S.delegate.supportedLocales,
Copy the code

Description of the corresponding character string s.of.name.

Compared to the official solution, this solution does not require us to worry about anything except adding strings to the resource file that need to be internationalized, which is very close to the native internationalization solution.