Flutter中StatefulWidget内showDialog失效问题排查

问题场景 #

点击FloatingActionButton调用showDialog时，第一段代码无响应并抛出No MaterialLocalizations found错误，第二段代码可正常运行。核心问题和上下文（context）的层级直接相关，并非Stateless/Stateful组件本身的问题。

错误原因 #

第一段代码里，_MyAppState中的context是MaterialApp组件的父级上下文。而MaterialApp是提供Material风格组件所需本地化资源（如MaterialLocalizations）的核心组件，父级上下文无法访问到MaterialApp内部的这些资源。showDialog依赖这些本地化资源来渲染对话框的默认按钮、文本样式等，因此会触发找不到资源的报错。

两段代码的核心差异 #

• 第一段代码：将Stateful的MyApp作为根组件，直接在其build方法中返回MaterialApp。FloatingActionButton虽在MaterialApp内部的Scaffold中，但调用showDialog时使用的是_MyAppState的context——这个context属于MaterialApp的上层，未包含MaterialLocalizations。
• 第二段代码：将MaterialApp放在Stateless的MyApp中，通过home属性指向Stateful的MyHomePage。MyHomePage的context是MaterialApp的子级上下文，已包含MaterialApp提供的所有Material相关资源，因此调用showDialog时可正常获取到所需的本地化资源。

第一段代码的修复方案 #

如果要保留原有结构，可通过两种方式修复：

1. 用Builder组件获取子级上下文：
   在FloatingActionButton外层包裹Builder，使用Builder提供的context调用showDialog：

   floatingActionButton: Builder(
     builder: (context) => FloatingActionButton(
       onPressed: () => showDialog(
         context: context,
         builder: (context) => AlertDialog(title: Text("alert")),
       ),
       elevation: 0,
       child: Icon(Icons.add),
     ),
   )
   

2. 将Stateful组件移到MaterialApp内部：
   参考第二段代码的结构，把需要状态管理的组件作为MaterialApp的home，确保其context处于MaterialApp的子树中。

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