CODEWITHSUNDEEP
flutterdartpopup
Simran Aswani
Simran Aswani

Reputation: 1316

How do I dismiss an Alert Dialog in Flutter?

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: enter image description here

Upvotes: 6

Views: 11864

Answers (3)

Sai Krishna
Sai Krishna

Reputation: 21

Try to use this

onTap: () => Navigator.of(context).pop(false),

Upvotes: 1

ranul
ranul

Reputation: 141

Try this inside your onTap():

Navigator.of(context, rootNavigator: true).pop();

Upvotes: 8

dumazy
dumazy

Reputation: 14445

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

Upvotes: 5

Related Questions