如何在Flutter中配置国际化

我正在学习Flutter的国际化配置，但在实现过程中遇到了一些问题。我已经按照官方文档添加了flutter_localizations依赖和intl包，但在配置MaterialApp的localizationsDelegates和supportedLocales时总是报错。具体问题是：1. 如何正确生成arb文件？2. 如何为不同语言创建对应的翻译文件？3. 在MaterialApp中应该包含哪些必要的localizationDelegates？4. 运行时切换语言后界面没有立即刷新，该如何解决？希望能得到详细的配置步骤指导。

2 回复

在Flutter中配置国际化：

  1. 添加依赖：flutter_localizations和intl
  2. 创建arb文件（如app_en.arb）存放翻译
  3. 在pubspec.yaml中配置本地化支持
  4. 在MaterialApp中设置localizationsDelegates和supportedLocales
  5. 使用AppLocalizations.of(context)调用翻译

示例代码：

MaterialApp(
  localizationsDelegates: AppLocalizations.localizationsDelegates,
  supportedLocales: AppLocalizations.supportedLocales,
)

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


在 Flutter 中配置国际化可以通过以下步骤实现，使用 flutter_localizations 包支持多语言：

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations: # 添加此依赖
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_gen: ^5.4.0 # 可选，用于自动生成代码

2. 创建本地化资源

在项目根目录创建 l10n.yaml 文件（用于 flutter gen-l10n）：

arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart

在 lib/l10n 目录下创建 ARB 文件（例如 app_en.arb 和 app_zh.arb）：

  • app_en.arb:
{
  "helloWorld": "Hello World!",
  "@helloWorld": {
    "description": "Hello world message"
  }
}
  • app_zh.arb:
{
  "helloWorld": "你好世界！"
}

3. 生成本地化代码

运行命令生成本地化类：

flutter gen-l10n

4. 配置 MaterialApp

在 main.dart 中配置 MaterialApp：

import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart'; // 自动生成的文件

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      supportedLocales: AppLocalizations.supportedLocales,
      home: const MyHomePage(),
    );
  }
}

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

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

5. 测试切换语言

可通过以下方式动态切换语言（需使用状态管理）：

// 在 MaterialApp 中添加 locale
locale: const Locale('zh'), // 强制使用中文

注意事项：

  • 默认支持的语言在 supportedLocales 中定义。
  • 使用 AppLocalizations.of(context) 获取当前语言的文本。
  • 若需动态切换语言，建议结合 Provider 或 Bloc 管理状态。

完成以上步骤后，应用即可根据系统语言或手动设置显示对应文本。

回到顶部