Flutter 国际化(i18n)全指南:一键切换中/英/日多语言

一、为什么需要国际化?

如果你的应用面向全球用户,多语言支持 是基本要求。Flutter 官方提供了强大的 flutter_localizations 包,配合 intl 工具,可轻松实现多语言切换。


二、快速上手:三步实现中英文切换

步骤 1:添加依赖

复制代码

yaml

编辑

复制代码
# pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.19.0

步骤 2:配置 MaterialApp

复制代码

dart

编辑

复制代码
import 'package:flutter_localizations/flutter_localizations.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale('en', ''), // 英语
        Locale('zh', ''), // 中文
        Locale('ja', ''), // 日语
      ],
      home: HomePage(),
    );
  }
}

步骤 3:使用 AppLocalizations

复制代码

dart

编辑

复制代码
// 获取当前语言文本
Text(AppLocalizations.of(context)!.helloWorld)

⚠️ 但此时会报错:缺少 AppLocalizations 类!


三、生成多语言资源文件(关键步骤)

1. 创建 l10n.yaml 文件(项目根目录)

复制代码

yaml

编辑

复制代码
arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart

2. 创建语言文件

  • lib/l10n/app_en.arb

    复制代码

    json

    编辑

    复制代码
    {
      "helloWorld": "Hello World",
      "welcomeMessage": "Welcome, {name}!"
    }
  • lib/l10n/app_zh.arb

    复制代码

    json

    编辑

    复制代码
    {
      "helloWorld": "你好,世界",
      "welcomeMessage": "欢迎,{name}!"
    }
  • lib/l10n/app_ja.arb

    复制代码

    json

    编辑

    复制代码
    {
      "helloWorld": "こんにちは、世界",
      "welcomeMessage": "ようこそ、{name}さん!"
    }

3. 生成代码

复制代码

bash

编辑

复制代码
flutter gen-l10n

✅ 自动生成 app_localizations.dart,无需手动编写!


四、动态切换语言(带保存)

复制代码

dart

编辑

复制代码
// 切换语言并重启应用
void changeLanguage(BuildContext context, String locale) {
  final MyAppState? state = context.findAncestorStateOfType<MyAppState>();
  if (state != null) {
    state.setLocale(Locale(locale));
  }
}

// 在 MyApp 中管理状态
class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  late Locale _locale;

  @override
  void initState() {
    super.initState();
    _locale = const Locale('zh'); // 默认中文
  }

  void setLocale(Locale locale) {
    setState(() {
      _locale = locale;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      locale: _locale,
      // ...其他配置同上
    );
  }
}

💡 可结合 shared_preferences 保存用户选择。


五、实际效果展示

语言 截图
中文
English
日本語

📌 支持参数化文本:AppLocalizations.of(context)!.welcomeMessage('张三')


六、高级技巧

  1. 复数形式(如 "1 item" vs "2 items"):

    复制代码

    arb

    编辑

    复制代码
    "itemCount": "{count, plural, =0{无项目} =1{1个项目} other{{count}个项目}}"
  2. 日期/数字本地化

    复制代码

    dart

    编辑

    复制代码
    DateFormat.yMMMd().format(DateTime.now()); // 自动适配语言格式
  3. RTL 语言支持(如阿拉伯语):

    复制代码

    dart

    编辑

    复制代码
    MaterialApp(
      supportedLocales: [Locale('ar')],
      localizationsDelegates: [...],
      theme: ThemeData(useMaterial3: true),
    )

    Flutter 会自动镜像布局!


七、结语

国际化不再是"附加功能",而是产品出海的必备能力 。Flutter 的 gen-l10n 工具链让多语言开发变得简单高效。

完整示例代码github.com/yourname/flutter-i18n-demo

如果你正在做全球化 App,不妨现在就集成 i18n!


相关推荐
天外天-亮13 分钟前
HBuilder X 使用 uview-plus 方式
开发语言·javascript·hbuilder x·uview-plus
huashengzsj20 分钟前
Shopify个人建站如何搭建独立站:从零开始的完整指南
前端·网络·人工智能
程序猿小泓31 分钟前
从 Claude Code 学 Agent Harness:一个前端工程师的 AI Agent 学习笔记
前端·人工智能·学习
柒和远方1 小时前
从审计日志到可下载证据包:事务型 Outbox、租约 fencing 与保留水位
前端·后端·架构
minglie12 小时前
npm ali-oss库依赖冲突
前端·npm
CryptoPP2 小时前
BSE股票K线数据接入实战:从接口调用到前端图表展示
大数据·前端·网络·人工智能·websocket·网络协议
Random_index3 小时前
#Vue3篇: Vue 项目发版后如何提示用户刷新?基于 package.json 版本号的前端更新检测方案
前端·vue.js·json
没落英雄4 小时前
5. 从零开始搭建一个 AI Agent —— 人机协作与中断恢复
前端·人工智能·架构
品尚公益团队4 小时前
C#在asp.net网页开发中的带cookie登录实现
前端·c#·asp.net
多加点辣也没关系5 小时前
JavaScript|第9章:对象 — 基础
开发语言·javascript·ecmascript