How do I dismiss an Alert Dialog in Flutter? - flutter

Question

I am using an Alert Dialog for the popups in my app. When the onTap is triggered the popup gets called however when I press the 'Cancel' button the popup does not dismiss and the whole screen behind the popup goes black.
This is my code for the popup.
import 'package:flutter/material.dart';
class FancyAlertDialog {
static showFancyAlertDialog(
BuildContext context,
String title,
String message,
{
bool dismissable = true,
Icon icon,
#required String labelPositiveButton,
#required String labelNegativeButton,
#required VoidCallback onTapPositiveButton,
#required VoidCallback onTapNegativeButton,
}) {
assert(context != null, 'context is null!!!');
assert(title != null, 'title is null!!!');
assert(message != null, 'message is null!!!');
assert(labelPositiveButton != null, 'labelPositiveButton is null');
assert(labelNegativeButton != null, 'labelNegativeButton is null');
assert(onTapPositiveButton != null, 'onTapPositiveButton is null');
assert(onTapNegativeButton != null, 'onTapNegativeButton is null');
return showDialog(
context: context,
barrierDismissible: dismissable,
child: Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(4.0),
),
),
child: Wrap(
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4.0),
topRight: Radius.circular(4.0),
),
color:Colors.red,
),
padding: EdgeInsets.symmetric(vertical: 5.0),
child: Stack(
children: <Widget>[
Align(
child: icon ?? Container(height:0),
alignment: Alignment.topRight,
)
],
),
),
Padding(
padding: EdgeInsets.only(
left: 16.0,
top: 2.0,
right: 16.0,
bottom: 8.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Center(
child: Text(
title,
style: Theme.of(context).textTheme.subtitle,
),
),
SizedBox(height: 8.0),
Text(
message,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.caption,
),
SizedBox(height: 16.0),
Row(
children: <Widget>[
Expanded(
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(16.0),
),
),
color: Colors.grey,
child: Text(
labelNegativeButton.toUpperCase(),
style: TextStyle(
color: Colors.white,
),
),
onPressed: onTapNegativeButton,
),
),
SizedBox(width: 16.0),
Expanded(
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(16.0),
),
),
color: Colors.red,
child: Text(
labelPositiveButton.toUpperCase(),
style: TextStyle(
color: Colors.white,
),
),
onPressed: onTapPositiveButton,
),
),
],
)
],
),
),
],
),
),
);
}
}
And this is how I've called the popup.
FancyAlertDialog.showFancyAlertDialog(
context,
'Info Fancy Alert Dialog Box',
'This is a info alert dialog box. This plugin is used to help you easily create fancy dialog',
icon: Icon(
Icons.clear,
color: Colors.black,
),
labelPositiveButton: 'OKAY',
onTapPositiveButton: () {
Navigator.pop(context);
print('tap positive button');
},
labelNegativeButton: 'Cancel',
onTapNegativeButton: () {
Navigator.pop(context);
print('tap negative button');
},
);
This is what my screen looks like when I press the cancel button:

Answer 1

Try this inside your onTap():
Navigator.of(context, rootNavigator: true).pop();

Answer 2

I assume you are using the wrong context object when calling Navigator.pop(context).
At that point the Navigator isn't aware of the dialog yet.
First, provide a new BuildContext within showDialog. There are two ways to do that:
Create a new widget for the child parameter (now Dialog) in the showDialog function.
Wrap the child (Dialog) with a Builder that provides a new BuildContext
Then you should get that new context to the Navigator.pop(context) call. Again, there are two ways to do that:
Pop from within the dialog itself
Pass the context object along as a parameter to the onTapPositiveButton and onTapNegativeButton
More info on the Builder can be found here as well: https://www.youtube.com/watch?v=xXNOkIuSYuA

Answer 3

Try to use this
onTap: () => Navigator.of(context).pop(false),