Flutter：AlertDialog弹出后应用背景变黑，需保留原背景

问题根源很明确：你现在是用Navigator.push(MaterialPageRoute)把DeviceNotRecognizedDialog当作新页面推入路由栈，这会触发新页面的默认黑色背景，而不是让对话框悬浮在原页面之上。

正确的做法是用Flutter自带的showDialog方法弹出对话框，这样就能保留原页面背景。修改步骤如下：

1. 你的DeviceNotRecognizedDialog组件可以完全保留不变。
2. 调整ScanResultTile的onTap逻辑，当需要弹出未识别提示时，调用showDialog替代push路由操作。

修改后的完整代码片段：

StreamBuilder<List<ScanResult>>(
  stream: FlutterBlue.instance.scanResults,
  initialData: [],
  builder: (c, snapshot) => Column(
    children: snapshot.data!
        .where((r) => DeepCollectionEquality().equals(r.advertisementData.manufacturerData, oakTecManufacturer))
        .map(
          (r) => ScanResultTile(
            result: r,
            onTap: () {
              if(r.advertisementData.serviceData.length == 1){
                r.device.connect();
                Navigator.of(context).push(
                  MaterialPageRoute(builder: (context) {
                    return DeviceScreen(device: r.device,program: PROGRAM_SELECTED);
                  })
                );
              } else {
                // 改用showDialog弹出对话框，保留原页面背景
                showDialog(
                  context: context,
                  builder: (context) => DeviceNotRecognizedDialog(),
                );
              }
            },
          ),
        )
        .toList(),
  ),
)

修改后点击按钮，对话框会悬浮在原页面上方，背景保持和弹窗前一致，完全符合你想要的效果。

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