Flutter中如何根据设备语言切换Map中的字符串文本？

1. 依赖配置 #

首先在pubspec.yaml中添加官方本地化依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.18.1

flutter:
  generate: true

执行flutter pub get安装依赖。

2. 创建多语言资源文件 #

在项目根目录下创建lib/l10n文件夹，添加对应语言的ARB文件：

• 英文资源intl_en.arb：

{
  "image_001_desc": "A cute orange cat lying on the sofa",
  "image_002_desc": "A golden retriever playing with a ball",
  // 其他数百条图片描述按此格式添加
}

• 中文资源intl_zh.arb：

{
  "image_001_desc": "一只可爱的橘猫趴在沙发上",
  "image_002_desc": "一只金毛寻回犬在玩球",
  // 对应英文的翻译内容
}

注意：所有语言文件的key必须完全一致，value是对应语言的翻译文本。

3. 生成本地化代码 #

执行命令：

flutter gen-l10n

这会自动生成lib/generated/l10n.dart文件，包含所有本地化字符串的访问类。

4. 配置App本地化代理 #

在main.dart的MaterialApp中添加本地化配置：

import 'package:flutter_localizations/flutter_localizations.dart';
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 [
        S.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: S.delegate.supportedLocales,
      home: const HomePage(),
    );
  }
}

5. 页面改造实现多语言切换 #

• 首页（卡片列表）：点击卡片时传递图片对应的本地化key（比如image_001_desc）到详情页：

// 示例卡片点击逻辑
GestureDetector(
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => DetailsPage(descKey: 'image_001_desc'),
      ),
    );
  },
  child: ImageCard(...),
)

• 详情页：通过上下文获取本地化实例，根据key获取对应语言的描述：

class DetailsPage extends StatelessWidget {
  final String descKey;
  const DetailsPage({super.key, required this.descKey});

  @override
  Widget build(BuildContext context) {
    final loc = S.of(context);
    // 提前维护key到本地化方法的映射，避免反射
    final Map<String, String Function()> descMap = {
      'image_001_desc': () => loc.image_001_desc,
      'image_002_desc': () => loc.image_002_desc,
      // 所有图片key对应添加
    };
    String dynamicDesc = descMap[descKey]!();

    return Scaffold(
      appBar: AppBar(title: const Text('详情')),
      body: Center(child: Text(dynamicDesc)),
    );
  }
}

为什么之前的JSON方案失效？ #

直接用JSON文件无法自动监听系统语言变化，也没有和Flutter的本地化生命周期绑定。官方的intl方案会自动监听系统语言切换，触发UI重建，实现文本自动更新。

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