使用rflutter_alert的Alert框点击按钮跳转后不消失如何解决

问题原因 #

你遇到的Alert框无法消失的核心原因是rflutter_alert的弹窗本质是一个新推入路由栈的路由层，你当前的代码直接执行了跳转到主页的逻辑，没有先将弹窗路由从栈中移除，导致弹窗路由一直残留。

解决方法 #

调整DialogButton的onPressed回调内的执行顺序，先调用Navigator.pop(context)关闭弹窗，再执行后续的状态重置和页面跳转逻辑即可。
如果你的主页面是当前第二个页面的上一级路由，更推荐关闭弹窗后直接返回上一级，不需要重新push新的主页面实例，避免路由栈冗余。

修正后的代码示例 #

setState(() {
  if (quizBrain.isFinished() == true) {
    var image = null;
    if (trueAns < 5) {
      image = AlertType.warning;
    } else {
      image = AlertType.success;
    }
    Alert(
      context: context,
      type: image,
      title: "RFLUTTER ALERT",
      desc: "Correct Answers: $trueAns \nFalse Answers: $falseAns.",
      buttons: [
        DialogButton(
          child: Text(
            "COOL",
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          onPressed: () {
            // 第一步：先关闭弹窗
            Navigator.pop(context);
            // 第二步：重置状态
            setState(() {
              quizBrain.reset();
              scoreKeeper.clear();
              trueAns = 0;
              falseAns = 0;
            });
            // 第三步：跳转到主页面，如果主页面是上一级路由，直接用Navigator.pop(context)返回即可，不需要push新页面
            // 方案1：回到已有的上一级主页面
            Navigator.pop(context);
            // 方案2：如果确实需要新开主页面，再用下面的push逻辑
            // Navigator.push(
            //   context,
            //   MaterialPageRoute(
            //     builder: (BuildContext context) => HomeRoute(),
            //   )
            // );
          },
          width: 120,
        )
      ],
    ).show();
  }
}

注意事项 #

• 路由操作必须遵循「先关闭弹窗、再操作页面路由」的顺序，否则弹窗路由会一直残留在栈中，回到当前页面时就会重新出现未关闭的弹窗
• 尽量避免在弹窗未关闭的情况下执行页面跳转，会导致路由栈层级混乱

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