时光闹钟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),
          ),
        ),
      ),
    );
  }
}

结果验证

打开模拟器，启动服务。

默认英文语言显示

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

玖叶教程网

前端编程开发入门

Flutter App国际化实现（flutter 中国）

概述

IDE 插件集成

新增语言支持

代码实现

结果验证