本文学习和引用自《Flutter实战·第二版》：作者：杜文

1. 介绍

默认情况下，Flutter SDK中的组件仅提供美国英语本地化资源（主要是文本）。要添加对其他语言的支持，应用程序须添加一个名为“flutter_localizations”的包依赖，然后还需要在MaterialApp中进行一些配置。

2. 使用

首先安装flutter_localizations

flutter pub add flutter_localizations

然后修改main.dart，指定MaterialApp的localizationsDelegates和supportedLocales。

import 'package:flutter_localizations/flutter_localizations.dart';MaterialApp(localizationsDelegates: [// 本地化的代理类GlobalMaterialLocalizations.delegate,GlobalWidgetsLocalizations.delegate,],supportedLocales: [const Locale('en', 'US'), // 美国英语const Locale('zh', 'CN'), // 中文简体// 其他Locales],
)

3. 获取当前区域Locale

Locale类是用来标识用户的语言环境的，它包括语言和国家两个标志，如下：

const Locale('zh', 'CN')

可以通过以下方式来获取应用的当前区域Locale：

Locale myLocale = Localizations.localeOf(context);

4. 监听语言切换

当我们更改系统语言设置时，APP中的Localizations组件会重新构建，Localizations.localeOf(context) 获取的Locale就会更新，最终界面会重新build达到切换语言的效果。

class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(localizationsDelegates: [GlobalMaterialLocalizations.delegate,GlobalWidgetsLocalizations.delegate,],// 语言切换回调localeResolutionCallback: (locales, supportedLocales) {// 在这里自定义语言环境if(true) {return const Locale('zh', 'CN');} else {return const Locale('en', 'US');}},home: MyHomePage(),);}
}

5. 实现国际化

这里我们使用intl来实现国际化。

5-1. 添加依赖

在pubspec.yaml里添加intl，flutter_localizations依赖。以及开启生成器。

dependencies:flutter:sdk: flutter# 国际化intl: ^0.18.1 # addflutter_localizations: # addsdk: flutter # add
# The following section is specific to Flutter packages.
flutter:generate: true # add

5-2. 创建arb文件

在Android studio内直接搜索flutter Intl，添加插件，安装完成后，点击顶部工具栏，选择Tools =》 flutter intl =》 lnitalize for the project，初始化一下。插件会默认创建l10n文件夹，generated文件夹，里面包含messages_all.dart、messages_en.dart以及intl_en.arb文件。

如果要新建语言类型，点击顶部工具栏，选择Tools =》 flutter intl =》 add locale，输入语言类型，插件会自动创建对应语言的arb文件。

然后就是填写你的文案字段了。

• intl_zh.arb

{"appName": "例子","appTitle": "你好世界！"
}

• intl_en.arb

{"appName": "例子","appTitle": "你好世界！"
}

5-3. 添加provider状态管理

这里为什么要添加provider呢，因为我们切换语言后的当前语言环境，我们要保存住，然后通过provider通知到其他组件。这样才是一个完整的国际化。

在pubspec.yaml里添加provider依赖，然后pub get一下。

# 状态管理：https://pub.dev/packages/provider
provider: ^6.1.1

在lib文件夹下创建一个provider文件夹，在provider文件夹下创建language.dart文件用来管理语言，添加如下代码：

import 'package:flutter/material.dart';class LanguageProvider extends ChangeNotifier {/// 默认语言Locale currentLanguage = const Locale('zh', 'CN');/// 获取当前语言Locale get getCurrentLanguage => currentLanguage;/// 修改语言void changeLanguage(Locale newLanguage) {currentLanguage = newLanguage;notifyListeners();}
}

然后修改main.dart的代码，添加语言包和一些代理，以及provider的状态。如下：

import 'package:flutter/material.dart';
import 'views/home/view.dart';
import 'package:demo2/generated/l10n.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:demo2/provider/language.dart';
import 'package:provider/provider.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return MultiProvider(// 所有要使用的provider都放到这里providers: [ChangeNotifierProvider(create: (context) => LanguageProvider())],builder: (context, child) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),// 设置当前语言locale: Provider.of<LanguageProvider>(context).currentLanguage,// 设置语言类型有哪几种supportedLocales: S.delegate.supportedLocales,// 初始化指定语言localizationsDelegates: const [// 本地化的代理类S.delegate,// 指定本地化的字符串和一些其他的值GlobalMaterialLocalizations.delegate,// 对应的Cupertino风格GlobalCupertinoLocalizations.delegate,// 指定默认的文本排列方向, 由左到右或由右到左GlobalWidgetsLocalizations.delegate],home: const HomePage(),);},);}
}

5-4. 完成切换

然后在页面中使用语言切换

import 'package:flutter/material.dart';
import 'package:demo2/provider/language.dart';
import 'package:demo2/config/config.dart';
import 'package:demo2/generated/l10n.dart';
import 'package:provider/provider.dart';class HomePage extends StatefulWidget {const HomePage({super.key});@overrideState<HomePage> createState() => HomePageState();
}class HomePageState extends State<HomePage> {int self = 1;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(// 这样使用title: Text(S.of(context).appTitle),),body: Center(child: Text('${S.of(context).appName}：$self'),),floatingActionButton: FloatingActionButton(onPressed: () {setState(() {self++;});// 获取语言管理provider 并且不监听变化final languageProvider = Provider.of<LanguageProvider>(context, listen: false);late Locale newLanguage;if (self % 2 == 0) {newLanguage = const Locale('en', 'US');} else {newLanguage = const Locale('zh', 'CN');}languageProvider.changeLanguage(newLanguage);},child: const Icon(Icons.add),),);}
}

---

本次分享就到这儿啦，我是鹏多多，如果您看了觉得有帮助，欢迎评论，关注，点赞，转发，我们下次见~

往期文章

• flutter学习-day1-环境搭建和启动第一个项目
• flutter学习-day6-路由和传参和守卫
• Vue2全家桶+Element搭建的PC端在线音乐网站
• vue3+element-plus配置cdn
• 助你上手Vue3全家桶之Vue3教程
• 助你上手Vue3全家桶之VueX4教程
• 助你上手Vue3全家桶之Vue-Router4教程
• 超详细！Vue的九种通信方式
• 超详细！Vuex手把手教程
• 使用nvm管理node.js版本以及更换npm淘宝镜像源
• vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令
• 超详细！Vue-Router手把手教程

个人主页

• CSDN
• GitHub
• 简书
• 博客园
• 掘金