Flutter: ShowDialog not working with the OnTap() method of a ListTile

Question

I am using a drawer to create a menu that houses ListTiles for the options. I want to create a popup when the tiles are tapped by the user. Currently, the code displays nothing when the tiles are tapped even though after the showDialog there is a Navigator.pop().

// Drawer that includes the ListTiles in question
 Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              DrawerHeader(
                child: Text('Smash Tracker'),
                ),
              ),
              ListTile(
                title: Text(
                    'About',
                  style: TextStyle(
                    fontFamily: 'Smash',
                    fontSize: 15.0,
                    color: Color.fromRGBO(77, 114, 152, 1.0),
                  ),
                ),
                onTap: () {
                  // Show PopUp
                  showDialog(context: context, child:
                    new AlertDialog(
                      title: new Text(
                        'About',
                        style: TextStyle(fontFamily: "Smash"),
                      ),
                      content: new Text(
                        'This is a placeholder. This is a placeholder. This is a placeholder. This is a placeholder.',
                        style: TextStyle(fontFamily: "Smash"),
                      ),
                    )
                  );

                  // Doesn't run
                  Navigator.pop(context);
                },
              ),

Here is a demo:

via GIPHY

The other ListTiles have the only have Navigator.pop() inside of their onTap() method.

Solution

The dialog isn't showing because you are popping it immediately with the Navigator.pop(context). You can await the Dialog since it returns a Future<T> before popping.

I added a demo using your widget tree as an example:

Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text('Smash Tracker'),
            ),
            ListTile(
              title: Text(
                'About',
                style: TextStyle(
                  fontFamily: 'Smash',
                  fontSize: 15.0,
                  color: Color.fromRGBO(77, 114, 152, 1.0),
                ),
              ),
              onTap: () async { // mark the function as async
                print('tap');
                // Show PopUp

                // await the dialog
                 await showDialog(
                    context: context,
                    child: new AlertDialog(
                      title: new Text(
                        'About',
                        style: TextStyle(fontFamily: "Smash"),
                      ),
                      content: new Text(
                        'This is a placeholder. This is a placeholder. This is a placeholder. This is a placeholder.',
                        style: TextStyle(fontFamily: "Smash"),
                      ),
                    ));

                // Doesn't run
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),

OUTPUT:

Comments

[Navaneeth P]

Why are you using Navigator.pop() after showdialog?

[Ayren King]

It was used in answer to a question I thought was similar to my issue.

[Navaneeth P]

First do Navigator.pop() to close the drawer and then call showDialog

[Ayren King]

I moved the Navigator.pop() above the showDialog and it only closes the drawer with no pop up.