Flutter 多语言支持(Flutter Intl Plugin)

最新推荐文章于 2025-06-25 09:13:02 发布

Mocaris

最新推荐文章于 2025-06-25 09:13:02 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Flutter

本文链接：https://blog.youkuaiyun.com/ZP313689969/article/details/113315218

Flutter 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何在Flutter应用中实现国际化，包括安装FlutterIntl插件、配置国际化依赖、创建和编辑arb文件、配置本地化 delegates 和使用S.of(context)动态切换语言。通过添加中文支持，展示了如何管理不同语言的资源并实现实时切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Flutter 国际化多语言支持

① 第一种方式官方

② 第一种方式 Flutter Intl

下面介绍 Flutter Intl 插件方式

1.安装插件

在vscode 或者idea 中搜索并安装 Flutter Intl 插件

2.添加依赖

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

如下：

dependencies:
  #  国际化
  flutter_localizations:
    sdk: flutter

3.初始化Intl

选择Tools -> Flutter Intl -> Initialize for the Project 会对项目进行初始化

初始化结束会自动在 pubspec.yaml 后新增

# 已开启国际化
flutter_intl:
  enabled: true

同时，lib目录下会新增generated和l10n两个目录。

l10n目录下为arb文件
generated目录下为根据arb文件自动生成以下dart代码
intl_en.arb 为英文默认缺省语言

3.新增语言

ARB文件扩展名为：Application Resource Bundle 意为应用程序资源包，并得到Google的支持，每个.arb文件都包含一个JSON表，该表从资源ID映射到本地化值，文件名包含已为其转换值的语言环境。

新增中文 'zh_CN’语言

然后会在I10n 文件夹下生成 itnl_zh_CN.arb文件

4.添加需要的语言json配置

简单的arb文件内包含如下字段
前面为 ‘@’ 符号的可不添加，供开发适配人员阅读

@@last_modified 为该json 编辑时间
@@locale 表示该json 配置的语言
“title”: “Flutter应用” 为添加的语言字符串
“@title”: {
“description”: “Title for the Demo application”,
“type”: “text”,
“placeholders”: {}
} 对添加的title 字符串的注释等

{
  "@@last_modified": "2018-12-10T15:46:20.897228",
  "@@locale":"zh_CH",
  "title": "Flutter应用",
  "@title": {
    "description": "Title for the Demo application",
    "type": "text",
    "placeholders": {}
  }
}

5.配置及使用语言

配置

import ‘package:flutter_localizations/flutter_localizations.dart’;

 MaterialApp(
      localizationsDelegates: const [
        GlobalCupertinoLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        S.delegate
      ],
      supportedLocales: S.delegate.supportedLocales,
      ……
      )

使用

将  Text("Flutter应用") 替换
Text(S.of(context).title)

6.切换语言

S.load(Locale.fromSubtags(languageCode: "zh"));
//或
S.load(Locale('zh', 'CN');

然后SharedPreference保存，再每次App启动时切换保存的语言即可