flutter本地化l10n（多语言i18n）的支持

flutter

首先说一下要用到的库

主要用到3个库flutter_localizations intl intl_translation

1
2
3
4
5
6
dependencies:
  flutter_localizations:
    sdk: flutter
  intl: 0.15.7
dev_dependencies:
  intl_translation: 0.17.4

设置App

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
return MaterialApp(
  onGenerateTitle: (BuildContext context) =>
      AppLocalizations.of(context).title,
  debugShowCheckedModeBanner: false,
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: routes.buildPage('login', null),
  localizationsDelegates: [
    // ... app-specific localization delegate[s] her
    AppLocalizationsDelegate(),
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
  supportedLocales: [
    // 支持语言设置
    const Locale('en', 'US'), // English
    const Locale('zh', 'CH'), // Chinese
    // ... other locales the app supports
  ],
  onGenerateRoute: (RouteSettings settings) {
    return MaterialPageRoute<Object>(builder: (BuildContext context) {
      return routes.buildPage(settings.name, settings.arguments);
    });
  },
);

编写本地化类

Lib/localizations.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import 'package:flutter/material.dart';
// import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:intl/intl.dart';

import 'l10n/messages_all.dart';

class AppLocalizations {
  static Future<AppLocalizations> load(Locale locale) {
    final String name =
        locale.countryCode.isEmpty ? locale.languageCode : locale.toString();
    final String localeName = Intl.canonicalizedLocale(name);
    return initializeMessages(localeName).then((_) {
      Intl.defaultLocale = localeName;
      print(
          'the local code of $localeName ${locale.countryCode.isEmpty} ${locale}');
      return AppLocalizations();
    });
  }

  static AppLocalizations of(BuildContext context) {
    return Localizations.of<AppLocalizations>(context, AppLocalizations);
  }

  String get title {
    return Intl.message(
      'Hello World',
      name: 'title',
      desc: 'Title for the Demo application',
    );
  }
}

class AppLocalizationsDelegate extends LocalizationsDelegate<AppLocalizations> {
  const AppLocalizationsDelegate();

  @override
  bool isSupported(Locale locale) => ['en', 'zh'].contains(locale.languageCode);

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

  @override
  bool shouldReload(AppLocalizationsDelegate old) => false;
}

导出intl_messages.arb

导出命令

1
flutter pub pub run intl_translation:extract_to_arb --output-dir=lib/l10n lib/localizations.dart

导出的文件 l10n/intl_messages.arb

1
2
3
4
5
6
7
8
9
{
  "@@last_modified": "2019-04-28T15:58:14.536252",
  "title": "Hello World",
  "@title": {
    "description": "Title for the Demo application",
    "type": "text",
    "placeholders": {}
  }
}

编写对应的 l10n/intl_[locale].arb

l10n/intl_en.arb

1
2
3
4
5
6
7
8
9
{
  "@@last_modified": "2019-04-28T15:58:14.536252",
  "title": "Hello World",
  "@title": {
    "description": "Title for the application",
    "type": "text",
    "placeholders": {}
  }
}

l10n/intl_zh.arb

1
2
3
4
5
6
7
8
9
{
  "@@last_modified": "2019-04-28T15:58:14.536252",
  "title": "你好世界",
  "@title": {
    "description": "Title for the application",
    "type": "text",
    "placeholders": {}
  }
}

arb 导出 dart 类

命令

1
2
flutter pub pub run intl_translation:generate_from_arb --output-dir=lib/l10n \
   --no-use-deferred-loading lib/localizations.dart lib/l10n/intl_*.arb

使用

1
2
3
4
import 'localizations.dart';

...
AppLocalizations.of(context).title

更新 iOS app bundle

打开ios/Runner.xcworkspace找到Runner的Info.plist

添加一个key为Localizationsvalue为你支持的语言

最后

good luck

欢迎多多交流 https://github.com/domliang/blog/issues/new