Flutter中如何通过Android系统返回键关闭自定义弹窗？

问题原因 #

你设置了barrierDismissible: false，这会禁用点击遮罩层关闭弹窗的功能，同时也会导致系统返回键默认不触发弹窗关闭逻辑，需要手动拦截返回键事件并处理关闭操作。

解决方案 #

通过WillPopScope组件拦截返回键事件，在回调中执行弹窗关闭逻辑。以下两种方案任选其一即可：

方案1：直接修改弹窗展示方法的builder部分 #

在showDialog的builder里用WillPopScope包裹弹窗组件，处理返回键逻辑：

Future<dynamic> showFlexibleBorderDialog({
    required BuildContext context,
    required Widget child,
    Function()? onPositivePressed,
    Function()? onNegativePressed,
    Color borderColor = constants.Colors.purpleMain,
    EdgeInsets margin = const EdgeInsets.symmetric(horizontal: 24),
    EdgeInsets padding =
        const EdgeInsets.symmetric(horizontal: 18, vertical: 34),
    bool barrierDismissible = true,
  }) async {
    dynamic isSelected;
    return await showDialog(
        context: context,
        useRootNavigator: false,
        barrierDismissible: barrierDismissible,
        builder: (context) {
          // 用WillPopScope拦截返回键
          return WillPopScope(
            onWillPop: () async {
              // 执行弹窗关闭操作
              Navigator.of(context).pop();
              return Future.value(false); // 表示自行处理返回逻辑，不交给系统默认行为
            },
            child: FlexibleBorderDialog(
              borderColor: borderColor,
              margin: margin,
              padding: padding,
              child: child,
            ),
          );
        });
  }

方案2：修改FlexibleBorderDialog组件内部 #

如果希望所有使用该弹窗的场景都支持返回键关闭，可以在组件内部集成WillPopScope：

class FlexibleBorderDialog extends StatelessWidget {
  final Color borderColor;
  final EdgeInsets margin;
  final EdgeInsets padding;
  final Widget child;

  const FlexibleBorderDialog({
    super.key,
    required this.borderColor,
    required this.margin,
    required this.padding,
    required this.child,
  });

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        Navigator.of(context).pop();
        return Future.value(false);
      },
      child: Container(
        margin: margin,
        padding: padding,
        // 你的原有弹窗装饰代码，示例如下
        decoration: BoxDecoration(
          border: Border.all(color: borderColor),
          borderRadius: BorderRadius.circular(12),
          color: Colors.white,
        ),
        child: child,
      ),
    );
  }
}

额外说明 #

如果需要在返回时添加二次确认逻辑（比如提示用户是否确定关闭），可以在onWillPop回调中嵌套展示确认弹窗，根据用户选择决定是否关闭当前弹窗。

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