Flutter开发中如何正确关闭NetworkGiffyDialog弹窗

NetworkGiffyDialog是通过showDialog压入Flutter导航栈的独立路由，关闭这类弹窗的核心逻辑就是把这个弹窗路由从导航栈中弹出。你当前的代码点击确认按钮时没有先关闭弹窗，直接执行页面跳转，会导致弹窗残留在导航栈中。

标准实现方式 #

在弹窗按钮的回调逻辑中，先执行弹窗关闭操作，再运行后续的业务逻辑即可，修正后的代码如下：

showDialog(
  context: context,
  // 如需禁止点击弹窗外部蒙层关闭，可将下面参数设为false
  // barrierDismissible: false,
  builder: (_) => NetworkGiffyDialog(
    image: Image.asset('asset/gif/send.gif'),
    title: const Text('Send Money',
        textAlign: TextAlign.center,
        style: TextStyle(
            fontSize: 22.0,
            fontWeight: FontWeight.w600)),
    description:const Text('Are you sure you want to Send this Amount?',
      textAlign: TextAlign.center,
    ),
    entryAnimation: EntryAnimation.BOTTOM,
      onOkButtonPressed: () {
          // 核心操作：弹出当前弹窗路由，完成弹窗关闭
          Navigator.pop(context);
          // 后续执行页面跳转、Toast提示等业务逻辑
          Navigator.push(context, MaterialPageRoute(builder: (context) => const HomePage()));
          Fluttertoast.showToast(msg: "Sent with Success");
      },
  ),
);

其他场景说明 #

• 如果配置了取消按钮onCancelButtonPressed回调，只需要在回调里单独写Navigator.pop(context)，就能实现点击取消关闭弹窗、回到原页面的效果。
• 默认情况下showDialog支持点击弹窗外部的半透明蒙层关闭弹窗，这个逻辑底层也是自动调用Navigator.pop(context)实现的，不需要额外编写代码。如果要禁用这个交互，把showDialog的barrierDismissible参数设为false即可。
• 如果需要在非按钮点击的逻辑里（比如网络请求完成、倒计时结束）主动关闭弹窗，只需要在持有弹窗对应的context时调用Navigator.pop(context)就能触发关闭。

内容的提问来源于stack exchange，提问作者Hamza hamza.elaloui12345