With the App Store and Google Play, users in any country in the world can use our App. However, since the users of the App are from different countries, we need to support multiple languages before the App is officially released, which is the internationalization of the App. In the development of Flutter, the internationalization of the application mainly involves two aspects, language and regional difference configuration, which are part of the application. It is easy to understand the internationalization of language, while the regional differential configuration refers to the differential configuration carried out according to the differences in national customs. According to the official Adaptation of Flutter, the following steps are required to internationalize a language in a Flutter application.

  1. First, implement a translation agent LocalizationsDelegate that declares all the text to be translated as its properties.
  2. Then, in turn, add the translation adaptation files for the languages you want to support.
  3. Finally, this proxy class is initialized in the application’s MaterialApp, setting it up as the application’s translation callback. It can be found that if application adaptation is carried out directly in accordance with the official internationalization scheme, it is not only heavy workload but also prone to error. To achieve quick adaptation and reduce coding errors, you can use the Internationalization plugin for Flutter I18n provided by Android Studio. If you have not already installed the Flutter i18n plugin, open Android Studio and search for the Flutter i18n plugin by selecting Preference → Plugins → Marketplace, as shown below.

After the installation is complete, restart Android Studio and you can use it for international adaptation of Flutter. Note that the latest version of Android Studio does not support the install of the Flutter i18N plugin using the app Marketplace method. Therefore, you need to download the Flutter plugin from Jetbrains and install it locally, as shown below.

dependencies:
  flutter_localizations:
    sdk: flutter

Copy the code

Pull dependencies using the flutter Packages get command on the command line. Then, an RES folder is automatically generated in the root directory of the project, which by default contains a strings_en.arb file in the following format.

{
  "app_name": "Flutter App internationalization"."main_title": "Flutter i18n"."main_content" : "You have click the button many times"
}

Copy the code

Arb files are JSON-formatted configuration files that can be used to store copywriting identifiers and key-value pairs for copywriting translations. In fact, this separation of string text into separate files makes it easier for developers and translators to work together, thus improving adaptation efficiency. By default, the system generates only the Strings_en. arb file in English. To support Chinese, you need to manually add a strings_en.arb file in the values directory. Right-click on the res/ Values folder and select [New] → [Arb File] → [Choose Language] to create an Arb File named strings_zh. Arb and add the following content.

{
  "app_name": "Internationalization of Flutter application"."main_title": Internationalization of Flutter."main_content" : "Button clicks:$count"
}

Copy the code

In practice, you only need to modify the contents of the ARB file in the RES/Values directory, and the I18N plug-in automatically generates the corresponding Dart conversion code, as shown in the following figure.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: const [         
        S.delegate,                       
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate
      ],
      supportedLocales: S.delegate.supportedLocales,
      home: MyHomePage(title: 'localize')); }}Copy the code

LocalizationsDelegates represents the translation callbacks of the application, supportedLocales represents the language region properties of the application, s.sellgate is a class automatically generated by the Flutter I18N plug-in, Contains the locale properties supported by Flutter and the corresponding text translation mapping. In the code above, in addition to join s.d. elegate, also joined the GlobalMaterialLocalizations. Delegate and GlobalWidgetsLocalizations delegate the two callback.

The former provides localized strings and other values for the Material component library, which enables the component to support multiple languages, while the latter is used to define the default text orientation of the component, left-to-right or right-to-left. These callbacks were added because the components that Flutter provides already support internationalization, so there is no need to adapt them again. The supportedLocales parameter indicates the language locale supported by the application in the following format.

const Locale('zh'.'CN') // Simplified ChineseCopy the code

The Locale class is used to identify the user’s Locale, which consists of two attributes: language and country. In the code above, we set it into s.d. elegate. SupportedLocales, namely the current language of the equipment. After the internationalization configuration of the application is complete, you can then retrieve the contents of the ARB file in the application using s.f (Context). The following is an example of using s.f (context) to get the title name of an ARB file, as shown below.

S.O.F (context).main_title // Get the titleCopy the code

It should be noted that obtaining the content of the translation copy in the above way can only take effect on the premise that the context can be obtained, that is, it can only take effect on the sub-components of the MaterialApp. Therefore, if you want to internationalize the title of the application, it is not possible to use the above method directly, but you can use the onGenerateTitle callback provided by the MaterialApp, as shown below.

onGenerateTitle: (context) {
   return S.of(context).app_name;
 },

Copy the code

For the internationalization of the application interface copy, it is relatively simple. You can directly use S.f (Context) to get the translation copy from the ARB file, and then set it in the interface. The following is the international treatment of the official Flutter project. The code is as follows.

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(S.of(context).main_title),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(S.of(context).main_content),
            Text('$_counter', style: Theme.of(context).textTheme.display1),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), 
    );
  }

Copy the code

Next, switch between English and Chinese in the system, and run the code above. You can see that the content of the application will switch with the language of the system, as shown below.

However, since iOS applications have a built-in locale management mechanism, adapting internationalization in this way is not effective for iOS applications. In order for iOS applications to also support internationalization, additional configuration is required in the native iOS project. Open the iOS native project of the Flutter project with Xcode, switch to the Project panel, and add Chinese support to Localization configuration, as shown in the following figure.

After completing the iOS native engineering configuration, go back to the Flutter project and select the iOS emulator to run the application. You can see that internationalization is supported normally, as shown below.