Flutter - Can only pop AlertDialog OR execute passed function - need to do both

Question

TL;DR: Trying to pass a function call to a custom AlertDialog. AlertDialog needs to be popped after the function -> can't make it work.

I've created a custom AlertDialog to use throughout my app. It looks something like this:

 customAlertDialog({required context, buttonAction}){
 showDialog(context: context, builder: (context) => AlertDialog(
 title: Text("example title", style: TextStyle(color: AppTheme.colors.white),),
 content: const Text("some content"),
 actions: [
 TextButton(onPressed: () {Navigator.of(context).pop();}, child: Text(
 "Abbrechen",
 style: TextStyle(
 color: AppTheme.colors.white),
 ),),
 TextButton(
 child: Text("do something",
 style: TextStyle(
 color: AppTheme.colors.lightRed),
 ),
 onPressed: buttonAction)
 ],
 ),);
}

The customAlertDialog takes a function call as an argument (here named buttonAction) for the last TextButtons onPressed action. It works fine when I pass:

buttonAction: () => deleteUser(context)

The problem is that this does not work in combination with a pop method. In the following only deleteUser will be called:

buttonAction: () => [deleteUser(context), Navigator.of(context).pop()]

the same if written like this:

buttonAction: () {deleteUser(context), Navigator.of(context).pop()}

I guess that the context of the customAlertDialog itself needs to be popped. So I've tried the following in the customAlertDialog (buttonAction contains () => deleteUser(context):

onPressed: () => [buttonAction, Navigator.of(context).pop()]

Now it only pops the dialog, probably because dart cannot interpret the buttonAction. So I've searched to find a way to pass only the function that should be called but wasn't successful doing so.

So my question is: How can I pass a function and still pop the dialog?

EDIT: As @SlowDeepCoder mentioned the problem could have been that the Navigator.pop() method throws the context from the stack before deleteUser() has finished and therefore it doesn't work. It was tried to be fixed with the following but it did not work:

buttonAction: () async{ await deleteUser(context); Navigator.of(context).pop(); }

• SlowDeepCoder: Could it be that the deleteUser method is asynchronous and when you pop the dialog before awaiting the result the context is thrown from the stack?
• Niklas: Yes, it is asynchronous. I tried placing the Navigator.pop() inside the deleteUser()-method but it doesn't work either.
• SlowDeepCoder: Try this: buttonAction: () async{ await deleteUser(context); Navigator.of(context).pop(); }
• Niklas: @SlowDeepCoder sadly still not working. Is it possible that the context gets passed with the method from my initial screen to the AlertDialog() and therefore cannot pop it. Is there some way to get the context of the current view?

Answer 1

This is because you call pop() on a Navigator from an incorrect BuildContext. So instead of

buttonAction: () {
 deleteUser(context);
 Navigator.of(context).pop();
}

you have to do something like this:

buttonAction: (innerContext) {
 deleteUser(innerContext); // not sure if you need the innerContext here. Depends on your other app code
 // deleteUser(context); // use this line if the above does not work
 Navigator.of(innerContext).pop();
}

together with

TextButton(
 child: Text("do something"),
 onPressed: () => buttonAction(context),
)

I also would recommend you to give both of your BuildContexts (customAlertDialog and showDialog) different names.

Answer 2

You do not always have to use arrow function to pass a custom function.

You can simply pass the function as

buttonAction: (){
 deleteUser(context);
 Navigator.of(context).pop();
}

• Niklas: Hi, also tried this -> it also only calls the function deleteUser() but doesn't pop.
• Sujan Gainju: do you get any issue or message doing that?
• Niklas: Yes: "The following _CastError was thrown while handling a gesture: Null check operator used on a null value". I couldn't find a reference to my code in the stack. I do not get this error when using only deleteUser()