Flutter开发Web应用时AppLocalizations.of(context)返回null如何解决

问题原因 #

• 核心为context层级错误：你当前调用AppLocalizations.of(context)使用的是MyApp的build方法传入的context，该context处于MaterialApp的上层节点，而localizationsDelegates配置的本地化资源仅对MaterialApp的子树生效，上层context无法访问到本地化实例，因此返回null。
• 其他可能排查点：若调整层级后仍有问题，可检查arb文件是否正确配置了appTitle字段、l10n.yaml配置是否正常生成了对应的代理方法。

解决方案 #

方案1：拆分独立子组件（推荐） #

将Scaffold部分抽为独立的Widget，使用子组件的context访问本地化资源：

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 如需生成本地化的应用标题，可使用onGenerateTitle回调
      onGenerateTitle: (context) => AppLocalizations.of(context)!.appTitle,
      localizationsDelegates: [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [
        Locale('de', ''),
        Locale('en', ''),
      ],
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: const MyHomePage(),
    );
  }
}

// 独立抽离的首页组件，context处于MaterialApp子树内
class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context)!.appTitle),
      ),
      body: Text(AppLocalizations.of(context)!.appTitle)
    );
  }
}

方案2：使用Builder包裹 #

不想拆分组件的话，用Builder包裹Scaffold，拿到MaterialApp子树的context：

home: Builder(
  builder: (context) => Scaffold(
    appBar: AppBar(
      title: Text(AppLocalizations.of(context)!.appTitle),
    ),
    body: Text(AppLocalizations.of(context)!.appTitle)
  ),
)

其他注意事项 #

• Web端部署后出现该问题的话，可检查web/index.html中的lang属性是否配置正确，也可在MaterialApp中添加localeResolutionCallback手动处理locale fallback逻辑，避免系统locale不在支持列表中导致加载失败。
• 确保arb文件无语法错误，调用的字段名和arb内配置的appTitle完全一致。

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