Flutter国际化，实时切换app内的本地语言

前言：

        Flutter项目需要支持国际化，就是在app内实时切换不同的语言，满足不同用户的需求。Flutter默认支持英文的文本和组件，如果需要添加本地的支持，直接在Plugins引入插件Flutter Intl，就可以初始化intl和添加添加我们想添加的每一种语言。 接下来我简单总结一下在Flutter项目中如何实现国际化，有需要的话可以参考。

思路：

     1.在Plugins引入插件Flutter Intl
     2.在pubspec.yaml 文件中添加依赖flutter_localizations
     3.初始化intl和添加语言
     4.设置MaterialApp语言环境
     5.在App内实现语言切换

实现的步骤：

1.在Plugins引入插件Flutter Intl

    

2.在pubspec.yaml文件中添加依赖flutter_localizations

 dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter cupertino_icons: ^1.0.0 provider: ^4.3.1 #用于实时切换语言的状态管理

3.初始化intl和添加语言

3.1 初始化intl (Tools->Flutter Intl-> Initialize for the Project)

在pubspec.yaml中自动增加字段：

 flutter_intl: enabled: true

在lib目录下增加 generated 和 l10n一个包( intl_en.arb,添加英文语言) 

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

3.2添加语言( intl_zh.arb，添加中文语言)

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

4.设置MaterialApp语言环境

 MaterialApp( localizationsDelegates: [ GlobalMaterialLocalizations.delegate, GlobalCupertinoLocalizations.delegate, GlobalWidgetsLocalizations.delegate, S.delegate ], supportedLocales: [ const Locale('zh', 'CN'), const Locale('en', 'US'), ], )

5.在App内实现语言切换

5.1封装CurrentLocale方法

 import 'package:flutter/material.dart'; class CurrentLocale with ChangeNotifier { Locale _locale = const Locale('zh','CN'); Locale get value => _locale; void setLocale(locale) { _locale = locale; notifyListeners(); } }

5.2设置实时切换语言的状态管理

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

5.3在MaterialApp添加状态管理

 Consumer<CurrentLocale>( builder: (context, currentLocale, child) { return MaterialApp( localizationsDelegates: [ GlobalMaterialLocalizations.delegate, GlobalCupertinoLocalizations.delegate, GlobalWidgetsLocalizations.delegate, S.delegate ], locale: currentLocale.value,//设置首要支持的语言 supportedLocales: [ const Locale('zh', 'CN'), const Locale('en', 'US'), ], ... ); }, )

5.4弹出语言切换的对话框

 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), ), ), ], )

5.5语言切换的方法

 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")); } }

6.总结

在Flutter上已经实现国际化的功能啦，欢迎大家围观。源码地址: https://github.com/wupeilinloveu/flutter_language ，如果有什么疑问的话，欢迎留言！