Flutter 国际化完整指南

Flutter 国际化完整指南：使用 VS Code Flutter Intl 插件快速实现多语言

本文将手把手教你如何在 Flutter 项目中快速实现国际化，使用 VS Code 的 Flutter Intl 插件简化多语言配置流程。

🚀 快速开始

步骤 1：创建 Flutter 项目

bash 复制代码

flutter create intl_demo
cd intl_demo

步骤 2：配置 pubspec.yaml

在 pubspec.yaml 中添加必要的依赖：

yaml 复制代码

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:    # 添加 Flutter 本地化支持
    sdk: flutter
  intl: ^0.18.1            # 添加 intl 包

dev_dependencies:
  flutter_test:
    sdk: flutter

保存后运行：

bash 复制代码

flutter pub get

步骤 3：安装 VS Code 插件

在 VS Code 扩展商店中搜索并安装 Flutter Intl 插件。

步骤 4：初始化国际化

按下 Shift + Ctrl + P (Windows) 或 Shift + Cmd + P (Mac)
输入 Flutter Intl: Initialize 并执行
添加更多语言按下 Shift + Ctrl + P，输入 Flutter Intl: Add locale，然后输入语言代码（如 zh 添加中文）。这会自动生成以下目录结构：

bash 复制代码

lib/
├── l10n/
│   ├── intl_en.arb        # 英文翻译文件
│   ├── intl_zh.arb        # 中文翻译文件
│   ├── messages_all.dart
│   └── ...
└── generated/
    └── l10n.dart          # 自动生成的本地化类

⚙️ 配置 MaterialApp

在 main.dart 中配置本地化支持：

dart 复制代码

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'generated/l10n.dart';  // 引入生成的本地化类

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      // 配置本地化代理
      localizationsDelegates: const [
        S.delegate,  // 生成的本地化代理
        GlobalMaterialLocalizations.delegate,  // Material 组件本地化
        GlobalWidgetsLocalizations.delegate,   // 基础 Widget 本地化
        GlobalCupertinoLocalizations.delegate, // Cupertino 组件本地化
      ],
      // 支持的语言列表
      supportedLocales: S.delegate.supportedLocales,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

📝 管理翻译文件

编辑 ARB 文件

在 lib/l10n/ 目录下编辑对应的语言文件：

intl_en.arb (英文)

json 复制代码

{
  "helloWorld": "Hello World!",
  "welcome": "Welcome {name}!",
  "settings": "Settings",
  "language": "Language",
  "@welcome": {
    "description": "Welcome message with name parameter",
    "placeholders": {
      "name": {}
    }
  }
}

intl_zh.arb (中文)

json 复制代码

{
  "helloWorld": "你好世界！",
  "welcome": "欢迎 {name}！",
  "settings": "设置",
  "language": "语言"
}

💡 在代码中使用

基础用法

dart 复制代码

import 'generated/l10n.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(S.of(context).helloWorld),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(S.of(context).welcome('Flutter')), // 带参数的翻译
            Text(S.of(context).settings),
          ],
        ),
      ),
    );
  }
}

动态语言切换

dart 复制代码

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

  @override
  Widget build(BuildContext context) {
    return DropdownButton<Locale>(
      value: Localizations.localeOf(context),
      items: [
        DropdownMenuItem(
          value: const Locale('en'),
          child: Text(S.of(context).english),
        ),
        DropdownMenuItem(
          value: const Locale('zh'),
          child: Text(S.of(context).chinese),
        ),
      ],
      onChanged: (Locale? newLocale) {
        if (newLocale != null) {
          // 使用 GetX 或 Provider 等状态管理来切换语言
          // 或者重建 MaterialApp 时传入新的 locale
        }
      },
    );
  }
}

🎯 高级功能

复数处理

json 复制代码

{
  "itemCount": "{count,plural, =0{No items}=1{One item}other{{count} items}}"
}

使用：

dart 复制代码

Text(S.of(context).itemCount(5)) // 显示 "5 items"

📱 在开发过程中快捷操作方法

通过这个完整的指南，你可以快速在 Flutter 项目中实现国际化支持，为用户提供更好的多语言体验！