Flutter如何实现国际化

在Flutter项目中如何实现多语言国际化？希望能提供一个详细的步骤，包括如何添加依赖、配置语言文件、切换语言以及处理动态文本的本地化。目前使用的是flutter_localizations和intl包，但不太清楚如何高效管理多语言资源文件以及如何在运行时动态切换语言。

2 回复

Flutter 使用 flutter_localizations 和 intl 包实现国际化。步骤如下：

  1. 添加依赖；
  2. 创建 ARB 文件存储多语言文本；
  3. 配置 MaterialApp 的 localizationsDelegates 和 supportedLocales；
  4. 使用 AppLocalizations.of(context) 获取本地化文本。

更多关于Flutter如何实现国际化的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


Flutter 中实现国际化主要通过以下步骤完成，使用官方 flutter_localizations 包：

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: any

2. 创建本地化资源文件

在项目根目录创建 l10n 文件夹，添加 app_localizations.dart 和 intl_messages.arb 文件。

示例 app_en.arb（英文）：

{
  "helloWorld": "Hello World!",
  "@helloWorld": {
    "description": "简单的欢迎语"
  }
}

示例 app_zh.arb（中文）：

{
  "helloWorld": "你好，世界！"
}

3. 生成本地化类

在 pubspec.yaml 中配置生成脚本：

flutter:
  generate:
    - source: l10n
      template: app_localizations.dart
      output-dir: lib/l10n

运行命令生成代码：

flutter gen-l10n

4. 配置 MaterialApp

在 main.dart 中设置支持的语言和代理：

return MaterialApp(
  localizationsDelegates: AppLocalizations.localizationsDelegates,
  supportedLocales: AppLocalizations.supportedLocales,
  home: MyHomePage(),
);

5. 使用本地化文本

在组件中调用：

Text(AppLocalizations.of(context)!.helloWorld)

完整示例

// main.dart
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      supportedLocales: AppLocalizations.supportedLocales,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(AppLocalizations.of(context)!.helloWorld),
      ),
    );
  }
}

关键点：

  • 使用 .arb 文件管理翻译文本
  • 通过 flutter gen-l10n 自动生成代码
  • 在 MaterialApp 中配置代理和语言支持
  • 通过 AppLocalizations.of(context) 获取本地化文本

这样即可实现多语言支持，系统语言切换时界面会自动更新。

回到顶部