使用flutter_localization时，如何本地化远程API返回的动态数据？

方案1：后端返回本地化Key，前端匹配本地arb文件 #

适合前后端统一管理文案的场景，后端返回与本地arb文件对应的key，前端通过translate方法映射为对应语言的内容。

• 操作步骤：
  1. 前后端约定文案key（如welcome_user、operation_failed）
  2. 在各语言arb文件中添加对应翻译：
     • en.arb: "welcome_user": "Welcome, {username}"
     • zh.arb: "welcome_user": "欢迎你，{username}"
  3. 前端处理API数据：

     // 模拟API返回数据
     final responseData = {"greeting_key": "welcome_user", "username": "Alice"};
     final localizations = AppLocalizations.of(context)!;
     // 带参数的翻译
     final greeting = localizations.translate(
       responseData['greeting_key'],
       args: [responseData['username']],
     );
     

方案2：后端返回多语言包，前端动态加载 #

若需后端完全控制动态内容翻译，可让后端返回对应语言的翻译包，通过自定义LocalizationsDelegate动态加载并合并到本地翻译。

• 自定义Delegate示例：

  class RemoteLocalizationsDelegate extends LocalizationsDelegate<AppLocalizations> {
    final Map<String, String> remoteTranslations;
  
    RemoteLocalizationsDelegate(this.remoteTranslations);
  
    @override
    bool isSupported(Locale locale) => ['en', 'zh'].contains(locale.languageCode);
  
    @override
    Future<AppLocalizations> load(Locale locale) async {
      // 先加载本地翻译
      final localLocalizations = await AppLocalizations.delegate.load(locale);
      // 合并远程翻译（远程内容覆盖本地同key项）
      localLocalizations.translations.addAll(remoteTranslations);
      return localLocalizations;
    }
  
    @override
    bool shouldReload(covariant LocalizationsDelegate<AppLocalizations> old) => true;
  }
  

• 在MaterialApp中配置：

  // 先请求后端获取当前语言的翻译包
  final remoteTranslations = await fetchRemoteTranslations(Localizations.localeOf(context).languageCode);
  
  return MaterialApp(
    localizationsDelegates: [
      AppLocalizations.delegate,
      GlobalMaterialLocalizations.delegate,
      GlobalWidgetsLocalizations.delegate,
      GlobalCupertinoLocalizations.delegate,
      RemoteLocalizationsDelegate(remoteTranslations), // 添加自定义Delegate
    ],
    // ...其他配置
  );
  

• 注意：缓存远程翻译包减少重复请求，离线时 fallback 到本地翻译。

方案3：前端维护动态标识的本地翻译映射 #

若API返回状态码、类型标识等固定枚举值，前端可在arb文件中维护这些标识的翻译，通过拼接key匹配。

• 示例：
  1. arb文件添加状态翻译：
     • en.arb: "status_success": "Operation succeeded", "status_error": "Operation failed"
     • zh.arb: "status_success": "操作成功", "status_error": "操作失败"
  2. 前端处理API返回：

     final apiStatus = data['status']; // 示例返回"success"或"error"
     final localizedStatus = AppLocalizations.of(context)!.translate('status_$apiStatus');
     

方案4：集成第三方翻译服务（针对用户生成内容） #

若API返回用户生成的动态文本（如评论、帖子），无法提前在arb中配置，可集成第三方翻译API实时翻译。

• 伪代码示例：

  // 调用第三方翻译接口
  Future<String> translateDynamicText(String text, String targetLang) async {
    final response = await http.post(
      Uri.parse('translation_api_url'),
      body: {'text': text, 'target': targetLang},
    );
    return jsonDecode(response.body)['translated_text'];
  }
  
  // 使用翻译
  final userComment = data['comment'];
  final translatedComment = await translateDynamicText(
    userComment,
    Localizations.localeOf(context).languageCode,
  );
  

• 注意：考虑翻译成本与API调用限制，实现本地缓存避免重复翻译，离线时展示原始文本或提示。

内容的提问来源于stack exchange，提问作者Rozan Shrestha