时光闹钟app开发者，请关注我，后续分享更精彩！

坚持原创，共同进步！

概述

当开发的Flutter App涉及多个国家用户使用时，实现App的多语言支持成为一个必不可少的基础能力，Flutter框架语言原生支持多语言特性。本文将向大家介绍在Flutter App开发中如何通过Flutter Intl插件快速实现多语言版本能力。

IDE 插件集成

本文基于IntelliJ IDEA开发工具，插件集成基于该平台介绍，其他平台(VS code)可以自行度娘，集成方式大同小异。

打开IDEA开发工具，选择菜单 File - Settings...，在打开窗口中选中Plugins，右侧面板输入框写入"intl"，搜索对应Flutter Intl插件，点击Install安装，完成后重启IDEA。

安装成功后，在Tools菜单下会显示新增的Flutter Intl菜单。

点击子菜单"Initialize for the Project"，开始初始化项目Flutter国际化配置。

初始化成功后，在项目pubspec.yaml文件中会自动添加以下国际化相关配置。

新增语言支持

Flutter Intl插件安装成功后，新增一个中文语言支持。

选择菜单 Tools - Flutter Intl - Add Locale 。

在弹出框输入 中文代码"zh"确认，插件将项目lib目录下自动生成以下文件。

其中I10n目录下的intl_zh.arb文件为语言国际化命名的相关key:value配置，可根据业务需求增减相应信息。

intl_zh.arb

{  "home": "首页",  "settingLanguage": "设置语言",  "settingLanguageEnglish": "英文",  "settingLanguageChinese": "中文"}

intl_en.arb

{  "home": "Home",  "settingLanguage": "Set Language",  "settingLanguageEnglish": "English",  "settingLanguageChinese": "Chinese"}

代码实现

要实现语言选择的联动，还需要代码中实现监听逻辑。

项目添加provider: ^5.0.0场景，如下图，添加完成flutter pub get更新集成库。

新增CurrentLocale类

/* * 封装Locale */class CurrentLocale with ChangeNotifier {  // 默认支持语言  Locale _locale = LocaleAssistant.localeMap.values.first;  Locale get value => _locale;  void setLocale(locale)  {    _locale = locale;    notifyListeners();  }}

入口类Main中runApp添加provider初始化。

  runApp(MultiProvider(    providers: [ChangeNotifierProvider(create: (context) => CurrentLocale())],    child: MyApp(),  ));

MyApp类实现如下

class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Consumer<CurrentLocale>(      builder: (context, currentLocale, child) {        return MaterialApp(          debugShowCheckedModeBanner: false,          theme: ThemeData(            primarySwatch: Colors.blue,            visualDensity: VisualDensity.adaptivePlatformDensity,          ),          localizationsDelegates: [            GlobalMaterialLocalizations.delegate,            GlobalCupertinoLocalizations.delegate,            GlobalWidgetsLocalizations.delegate,            S.delegate          ],          locale: currentLocale.value,          supportedLocales: [            const Locale('zh', 'CN'),            const Locale('en', 'US'),          ],          home: MyHomePage(),        );      },    );  }}

MyHomePage类

class MyHomePage extends StatefulWidget {  @override  _MyHomePageState createState() => _MyHomePageState();}class _MyHomePageState extends State<MyHomePage> {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        centerTitle: true,        title: Text(S.of(context).home),      ),      body: Center(        child: MaterialButton(          color: Colors.black12,          onPressed: () async {            int i = await showDialog<int>(                context: context,                builder: (BuildContext context) {                  return SimpleDialog(                    title: Text(S.of(context).settingLanguage),                    children: <Widget>[                      SimpleDialogOption(                        onPressed: () {                          Navigator.pop(context, 1);                        },                        child: Padding(                          padding: const EdgeInsets.symmetric(vertical: 6),                          child: Text(S.of(context).settingLanguageChinese),                        ),                      ),                      SimpleDialogOption(                        onPressed: () {                          Navigator.pop(context, 2);                        },                        child: Padding(                          padding: const EdgeInsets.symmetric(vertical: 6),                          child: Text(S.of(context).settingLanguageEnglish),                        ),                      ),                    ],                  );                });            if (i != null) {              if (i == 1) {                Provider.of<CurrentLocale>(context, listen: false)                    .setLocale(const Locale('zh', "CH"));              } else {                Provider.of<CurrentLocale>(context, listen: false)                    .setLocale(const Locale('en', "US"));              }            }          },          child: new Padding(            padding: const EdgeInsets.fromLTRB(                10.0, 20.0, 0.0, 20.0),            child: new Text(S.of(context).settingLanguage),          ),        ),      ),    );  }}

结果验证

打开模拟器，启动服务。

默认英文语言显示

点击按钮，选择中文语言。