使用easy_localization的Flutter多语言应用如何翻译API返回动态数据

首先明确：动态返回的业务内容（商品标题、详情等）无法通过easy_localization的本地静态资源实现翻译，需要前后端配合完成适配，以下是具体落地步骤：

• 所有需要返回多语言动态内容的接口，必须支持接收语言标识参数，参数值和前端easy_localization配置的Locale编码完全一致，比如zh-CN、en-US，避免编码不匹配问题。
• 后端可以二选一采用以下两种返回方案：
  • 方案A（省流量，推荐）：根据接口传入的语言标识，直接返回对应语言的单值内容
  • 方案B（无需二次请求）：返回所有支持语言的结构化键值对内容

2.1 配合后端方案A的实现逻辑 #

这种方案是绝大多数业务的首选，适配逻辑如下：

• 封装全局网络请求工具，每次发请求时自动读取当前Locale拼入请求参数/请求头，示例基于Dio实现：

import 'package:easy_localization/easy_localization.dart';
import 'package:dio/dio.dart';

class HttpUtil {
  static final Dio _dio = Dio();

  static Future<Response> request(String url, {required String method, Map<String, dynamic>? params}) async {
    // 读取当前Locale，和后端约定格式完全匹配
    final currentLocale = context.locale.toStringWithSeparator();
    // 可根据需求放到query参数、body参数或者请求头的Accept-Language字段
    final headers = {'Accept-Language': currentLocale};
    return _dio.request(
      url,
      options: Options(method: method, headers: headers),
      queryParameters: params,
    );
  }
}

• 监听Locale切换事件，切换后重新拉取当前页面的业务数据即可自动更新为对应语言内容：

@override
void initState() {
  super.initState();
  // 监听Locale变更，触发数据刷新
  EasyLocalization.of(context)?.addListener(() {
    fetchPageData();
  });
  fetchPageData();
}

// 页面销毁时移除监听，避免内存泄漏
@override
void dispose() {
  EasyLocalization.of(context)?.removeListener(fetchPageData);
  super.dispose();
}

2.2 配合后端方案B的实现逻辑 #

如果你的业务切换语言时不需要重新请求接口，可以采用这种方案：

• 封装通用动态翻译工具方法，自动根据当前Locale匹配对应内容：

import 'package:easy_localization/easy_localization.dart';

// 传入后端返回的多语言键值对，自动返回当前语言的内容
String translateDynamic(Map<String, String> multiLangMap, {String defaultLang = 'zh-CN'}) {
  final currentLang = context.locale.toStringWithSeparator();
  // 优先匹配当前语言，不存在则兜底返回默认语言，仍为空返回空字符串
  return multiLangMap[currentLang] ?? multiLangMap[defaultLang] ?? '';
}

• 页面渲染时直接调用方法取值即可，Locale切换时easy_localization会触发页面重绘，自动匹配新语言内容：

// 假设goodsModel.title是后端返回的多语言Map
Text(translateDynamic(goodsModel.title))

• 前后端必须提前对齐Locale编码格式，避免出现下划线、中划线、大小写不匹配的问题
• 必须添加兜底逻辑，防止某语言内容缺失时出现空白展示
• 如果业务有本地缓存数据的需求，缓存时需要对不同语言的内容做区分，避免切换语言后读取到旧语言的缓存数据

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