Flutter调用showDialog时出现No MaterialLocalizations found错误排查

问题原因 #

出现No MaterialLocalizations found错误的核心原因有两个：

• 传入showDialog的context不属于MaterialApp（或WidgetsApp）的子树上下文，无法获取到Material组件库提供的本地化资源；
• 自定义的CustomDialog内部没有用Material组件包裹，导致对话框缺少必要的Material环境支撑。

另外，注释里直接用navigatorKey导航正常，是因为navigatorKey关联的是MaterialApp内部的导航器上下文，天然具备Material环境。

解决方法 #

方法1：使用导航器的上下文调用showDialog #

替换传入showDialog的context为navigatorKey对应的上下文，确保对话框在Material环境中弹出：

void navToHomePage(BuildContext context) {
  log("Navigation to home page called");
  showDialog(
    context: navigatorKey.currentContext!, // 使用导航器的上下文
    builder: (context) {
      return CustomDialog(
        svgAssetPath: ImageConstants.warning,
        title: "Session Timeout",
        message: "Your session has timed out.\nPlease login again.",
        actionWidget: GradientButton(
          onTap: () {
            navigatorKey.currentState?.pushNamedAndRemoveUntil(
              Routes.onboarding,
              (Route<dynamic> route) => false,
              arguments: OnboardingArgumentModel(isInitial: true).toMap(),
            );
          },
          text: "Login",
        ),
      );
    },
  );  
}

方法2：给CustomDialog添加Material包裹 #

如果CustomDialog是自定义组件，修改其内部结构，用Material组件包裹内容，保证对话框具备Material环境：

// 示例CustomDialog的build方法修改
class CustomDialog extends StatelessWidget {
  // 你的属性定义...

  @override
  Widget build(BuildContext context) {
    return Material(
      type: MaterialType.transparency, // 保持对话框背景透明，不影响原有样式
      child: Container(
        // 原有对话框的布局内容，比如标题、消息、按钮等
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // ... 你的原有组件
          ],
        ),
      ),
    );
  }
}

方法3：用Builder组件获取正确上下文 #

如果必须保留原有的context，可以在showDialog的builder中嵌套Builder组件，获取能访问MaterialLocalizations的上下文：

showDialog(
  context: context,
  builder: (context) {
    return Builder(
      builder: (materialContext) {
        return CustomDialog(
          // ... 原有代码
        );
      },
    );
  },
);

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