FunFlutter系列之国际化Intl方案

为何采用Intl方案

随着flutter_i18n组件的做者再也不维护,IDE中的插件已被做者从插件市场中下架.原先使用该方案的FunAndroid项目采用了新的Flutter Intl方案

该方案没有flutter_i18n方案成熟,在开发中,IDE的插件也尚未开源.在使用中还须要开发者跟随项目作一些适配,好比下边会提到的对简繁体和supportedLocales的一些特殊处理

配置Flutter Intl

1.安装插件

确保Android Studio 或 VScode安装有Flutter Intl插件

目前AS安装Flutter插件会自动捆绑安装该插件

2.初始化项目

1. 在pubspec.yaml中添加flutter_localizations依赖并执行packages get

   # 国际化
   flutter_localizations:
       sdk: flutter
   复制代码

   

2. 在菜单中找到Tools,选择Flutter Intl,点击Init for the project

   

3. init结束后,pubspec.yaml中会自动增长如下字段

   flutter_intl:
       enabled: true
   复制代码

4. lib目录下会新增generated和l10n两个目录.

   • l10n目录下为arb文件
   • generated目录下为根据arb文件自动生成如下dart代码

     

5. 新增语言(好比中文)

   • 经过插件添加arb文件

     

   • 填入local code 如zh,en,生成arb文件

     若是存在地区,相似汉语下有大陆的简体zh_CN,港台的繁体zh_HK和zh_TW

   • 在lib/generated/intl/目录下会生成新的messages_xx.dart

     

6. MaterialApp中配置supportedLocales和localizationsDelegates

   • localizationsDelegates,加入由Intl插件生成的S.delegate和SDK组件库的delegate
   • supportedLocales须要手动将en设置为第一项,保证无适配对应locale时,en为默认选项.(此到处理并不优雅)
   • 目前插件在简繁体不完善须要作部分适配
     • 在localeResolutionCallback回调中手动处理简繁体

如下为示例

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: const [
        S.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate
      ],
      // 讲en设置为第一项,没有适配语言时,英语为首选项
      supportedLocales: [const Locale('en', ''), ...S.delegate.supportedLocales],
      // 插件目前不完善手动处理简繁体
      localeResolutionCallback: (locale, supportLocales) {
        // 中文 简繁体处理
        if (locale?.languageCode == 'zh') {
          if (locale?.scriptCode == 'Hant') {
            return const Locale('zh', 'HK'); //繁体
          } else {
            return const Locale('zh', 'CN'); //简体
          }
        }
        return null;
      },
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
复制代码

7. iOS须要在xcode中添加Localizations

   

使用Flutter Intl

1. 普通使用

   {"content": "内容"}
   S.of(context).content
   复制代码

2. 占位

   {"welcome": "welcome {name}"}
   S.of(context).welcome("phoenixsky")
   复制代码

3. 重复占位

   {"goodStudy": "{good}{good}学习,{day}{day}向上"}
   S.of(context).goodStudy("好", "天")
   复制代码

   

4. 复数形式

   {"getMessageTips": "{howMany, plural, zero{You have no message} one{You have 1 message} other{You have {howMany} messages}}"}
   S.of(context).getMessageTips(2)
   复制代码

   

5. 更多使用方式见intl | Dart Package

相关项目

玩Android客户端Flutter版

感谢

localizely/flutter-intl-plugin-sample-app

intl | Dart Package