简介

对于跨境电商来说，多语言是一个常见的需求。多语言的实现方式有两种方式，这里分别来阐述。多语言也叫国际化，在这里就当做是一个意思。

1. flutter 框架的国际化

不知道什么原因，flutter框架是支持多语言的，但是默认却没有打开。只要涉及多语言或者国际化，这些工作都是要做的。有些插件，比如时间，弹窗等也需要这些。

• step1: 在 pubspec.yaml 文件添加多语言库

flutter_localizations:
   sdk: flutter

Flutter SDK中已经有多语言库，但是默认不加载，需要加上面那就话才能加载

• step2：在程序启动的地方添加支持的语言

GetMaterialApp(
 localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,  // 为 Material 组件库提供本地化的字符串和其他值。
    GlobalWidgetsLocalizations.delegate, // 为 Cupertino 组件库提供本地化的字符串和其他值。
    GlobalCupertinoLocalizations.delegate, // 定义了默认的文本排列方向，由左到右或者由右到左。
 ],
 supportedLocales: [
    const Locale('en', 'US'), // 美国英语
    const Locale('zh', 'CN'), // 中文简体
    const Locale('es', 'ES'), // 西班牙语
    const Locale('ko', 'KR'), // 韩语
  ],
  // ...
)

方案1： GetX方案

• 每种语言一个文件，然后加一个Translations子类就可以了。我们支持4中语言

  
  文件

• 语言文件其实就是一个Map，保持key一致就可以了。

/// 英语
const Map<String, String> en_language = {
  /// 公共部分
  'OK': 'OK',
  'Cancel': 'Cancel',
  'Submit': 'Submit',
  'Confirm': 'Confirm',
  'Reminder': 'Reminder',
// 其余的key和value
}

/// 中文
const Map<String, String> en_language = {
  /// 公共部分
  'OK': '确定',
  'Cancel': '取消',
  'Submit': '提交',
  'Confirm': '确认',
  'Reminder': '提醒',
// 其余的key和value
}

/// 西班牙语
const Map<String, String> en_language = {
  /// 公共部分
  'OK': 'Sí',
  'Cancel': 'Cancelar',
  'Submit': 'Submitir',
  'Confirm': 'Confirmar',
  'Reminder': 'Recordatorio',
// 其余的key和value
}

/// 韩语
const Map<String, String> en_language = {
  /// 公共部分
  'OK': '확인',
  'Cancel': '취소',
  'Submit': '배송제출',
  'Confirm': '확인',
  'Reminder': '주의',
// 其余的key和value
}

• Translations子类其实就是用来切换语言用的：

class TranslationService extends Translations {
  // static Locale? get locale => Get.deviceLocale;
  static Locale? get locale => const Locale('en', 'US');
  static const fallbackLocale = Locale('en', 'US');
  @override
  Map<String, Map<String, String>> get keys => {
        'en': en_language,
        'es': es_language,
        'zh': zh_language,
        'ko': ko_language,
      };
}

• 在程序启动的地方要配置一下

GetMaterialApp(
      locale: Locale('en', 'US'),              // 默认语言
      translations: TranslationService(),  // 语言文件切换
      fallbackLocale: const Locale('en', 'US'),  // 默认语言
  // ...
)

• 在使用的地方，用key就可以了，比如：

 'OK'.tr;
 'Cancel'.tr;
 'Submit'.tr;
 'Confirm'.tr;
 'Reminder'.tr;

• 再往前走一步，就是把这几个语言文件，其实就是Map通过接口从后端取；然后做个网页，让翻译来录入，实现使用和编辑分离。

方案2：使用插件intl

• 插件的点赞数还是很多的

  
  多语言插件

• Android Studio也可以装一个多语言的插件：

  
  多语言工具插件

• Android Studio装了那个工具之后，在Tools菜单下就有一个栏目：Flutter Intl

  
  菜单

• 执行完命令后在pubspec.yaml 中多了一个配置

flutter_intl:
  enabled: true

• lib 文件夹中多了两个文件夹 generated 和 i10n。generated 我们不用管,i10n就是多语言文件

  
  自动生成的文件夹

• rb 文件扩展名为：Application Resource Bundle 缩写，意为应用程序资源包，其实就是个Map

{
  "title":"IAM17"
}

• 使用的话需要4步

1. 引用 import generated/l10n.dart
2. 添加 S.delegate
3. 添加 supportedLocales: S.delegate.supportedLocales
4. S.of(context).title 获得 title

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
// 1
import 'generated/l10n.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        localizationsDelegates: const [
          // 2
          S.delegate,
          GlobalMaterialLocalizations.delegate,
          GlobalCupertinoLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate
        ],
        // 3
        supportedLocales: S.delegate.supportedLocales,
        home: Scaffold(body: Builder(
          builder: (context) {
            return Center(
              // 4
              child: Text(S.of(context).title),
            );
          },
        )));
  }
}

如何选择？

两个方案都行，我们选择的是方案1，就是使用GetX自带的多语言方案，因为简单。

参考文章

2023了，如何快速实现 Flutter 国际化