Alert Dialog stays open through back button push

Question

I'm having a little error I can't seem to figure out, and I believe it's due to my Alert Dialog implementation. I'm using the flutter Provider package, and opening my Dialog like this:

  _openSearchHistory(
      BuildContext context, TextEditingController searchController) {
    final searchModel = Provider.of<SearchModel>(context, listen: false);
    showDialog(
        context: context,
        builder: (_) => ChangeNotifierProvider<SearchModel>.value(
              value: searchModel,
              child: DialogSearchHistory(
                searchHistory: searchModel.searchHistory,
                searchController: searchController,
              ),
            ));
  }

The problem is when on android and the user presses the back button, the Dialog does not close, but the page behind the Dialog pops back a page. I have a close button on the Dialog that successfully closes the dialog, but I want users to be able to use the back button for a better experience. The Dialog does close if the user clicks outside of it as well. I've tried wrapping the Dialog with WillPopScope, but it does not get called on a back button press.

Could anyone shed some light on what I'm doing wrong here?

I have tried wrapping the Widget in the calling method with WillPopScope

showDialog(
    context: context,
    builder: (_) => ChangeNotifierProvider<SearchModel>.value(
          value: searchModel,
          child: WillPopScope(
            onWillPop: () {
              Navigator.of(context).pop();
              return Future.value(false);
            },
            child: DialogSearchHistory(
              searchHistory: searchModel.searchHistory,
              searchController: searchController,
            ),
          ),
        ));

As well as wrapping the Alert Dialog itself in the build function

 @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () {
        Navigator.of(context).pop();
        return Future.value(false);
      },
      child: AlertDialog(
        backgroundColor: kCardColor,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(20.0)),
        ),...

Neither have worked. The page behind the Dialog pops back, but the Dialog stays put. onWillPop is never hit by the debugger

Answer 1

If the application has multiple Navigator objects, it may be necessary to call Navigator.of(context, rootNavigator: true).pop(result) to close the dialog rather than just Navigator.pop(context, result).

I hope this will close the alert dialog If you have multiple navigator objects. Give it a try

onWillPop: (){
  Navigator.of(context, rootNavigator: true).pop();
  return  Future.value(false);
},

OR

Try Navigator.pop(context);, this will call internally Navigator.of(context).pop() method.

Official Implementation of Navigator.pop() method.

static void pop<T extends Object>(BuildContext context, [ T result ]) {
  Navigator.of(context).pop<T>(result);
}

Doc - https://api.flutter.dev/flutter/widgets/Navigator/pop.html