Flutter Web国际化出现'unexpected null value'问题求助

问题原因 #

• Context作用域错误：直接在MaterialApp的home参数中调用AppLocalizations.of(context)时，此处的context属于MaterialApp的父级上下文，未包含MaterialApp注入的国际化实例，导致调用返回null触发空值错误。
• 缺失对应Locale的资源文件：L10n类声明支持韩语（kr），但未提供app_kr.arb文件，虽当前显式设置locale为en，但属于潜在配置不完整问题。
• Web环境Locale初始化特性：Flutter Web会优先读取浏览器Locale，若浏览器Locale不在supportedLocales中且无降级逻辑，可能导致国际化实例初始化失败（当前显式指定locale为en，此为次要因素）。

解决方法 #

1. 修正Context作用域（推荐） #

将home的内容抽为独立组件，子组件的上下文属于MaterialApp子树，可正确获取国际化实例：

// main.dart中修改MaterialApp的home参数
return MaterialApp(
  // 其他配置不变
  home: const HomePage(),
);

// 新增独立组件
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const Text("F FLUTTERRRRR"),
        Text(AppLocalizations.of(context).helloWorld)
      ],
    );
  }
}

2. 使用Builder临时提供子Context #

若不想拆分组件，用Builder包裹home内容以获取正确上下文：

return MaterialApp(
  // 其他配置不变
  home: Builder(
    builder: (context) {
      return Column(
        children: [
          const Text("F FLUTTERRRRR"),
          Text(AppLocalizations.of(context).helloWorld)
        ],
      );
    },
  ),
);

3. 补全缺失的Locale资源文件 #

在lib/l10n目录下创建app_kr.arb文件，补全韩语翻译：

{
  "helloWorld": "안녕하세요, 세상!",
  "@helloWorld": {
    "description": "초보 프로그래머의 전통적인 인사말"
  }
}

4. 确保Flutter Gen正确生成代码 #

执行以下命令确保国际化代码生成完成：

flutter pub get
flutter pub run build_runner build

国际化替代方案 #

• intl官方包：传统国际化方案，手动管理本地化字符串与格式化，适合需要精细控制的场景，通过Intl.message调用翻译内容。
• easy_localization第三方库：支持JSON/YAML/CSV等多种资源格式，提供tr('key')简化调用，支持动态切换Locale，内置多语言格式化工具。
• 优化官方ARB方案：开启l10n.yaml中的nullable-getter: true，或在调用时添加空值兜底：AppLocalizations.of(context)?.helloWorld ?? 'Hello World!'，避免直接抛出空值错误。

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