Flutter中Dialog与BottomSheet同时弹出问题排查与解决

问题原因 #

你调用content函数时，直接传入了dialog(context)和bottomSheet(context)的执行结果。这会导致两个弹窗的触发逻辑在参数传递阶段就已执行，完全跳过了content函数里的条件判断，所以无论屏幕是横屏还是竖屏，Dialog和BottomSheet都会同时弹出。

解决方法 #

核心是推迟弹窗函数的执行时机，只在条件满足时才调用对应的函数：

1. 修改content函数 #

让它接收函数类型的参数，根据屏幕方向执行对应函数：

content(BuildContext context, Function showDialog, Function showBottomSheet) {
  MediaQuery.of(context).orientation == Orientation.landscape
      ? showDialog()
      : showBottomSheet();
}

2. 调整按钮的onPressed回调 #

传递未执行的函数引用，而不是直接执行后的结果：

ElevatedButton(
  child: const Text('Button'),
  onPressed: () {
    content(
      context,
      () => dialog(context),
      () => bottomSheet(context),
    );
  },
)

这样只有当content函数里的条件判断成立时，对应的弹窗函数才会被调用，不会再出现两者同时弹出的问题。

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