Why I open this showDialog and after press one of the button, it can't auto close？

Question

When I open this Dialog and after press one of the button, it can't auto close. Is my navigator wrong? ? How to fix this problem ? Please help me, thanks.

I can’t understand why this pop-up window still stays on the page and my page jumped one page forward, shouldn’t it be popped by the Navigator?

this is my code first widget is the Delete function&UI, second widget is show main List widget, it use ListTile.


    Widget _checkDelete({String title, String detail, String uid}) {
        ThemeData themeData = Theme.of(context);
        return Dialog(
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(8.0))),
          child: Container(
            padding: EdgeInsets.all(16),
            decoration: new BoxDecoration(
              color: themeData.backgroundColor,
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.circular(8),
              boxShadow: [
                BoxShadow(
                  color: Colors.black26,
                  blurRadius: 10.0,
                  offset: const Offset(0.0, 10.0),
                ),
              ],
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text("$title",
                    style: AppTheme.getTextStyle(
                      themeData.textTheme.headline6,
                      fontWeight: FontWeight.w600,
                    )),
                Text("$detail",
                    style: AppTheme.getTextStyle(
                      themeData.textTheme.subtitle1,
                      fontWeight: FontWeight.w400,
                    )),
                Container(
                  alignment: AlignmentDirectional.centerEnd,
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      FlatButton(
                          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                          padding: EdgeInsets.all(0),
                          splashColor: themeData.colorScheme.primary.withAlpha(150),
                          onPressed: () {
                            Navigator.pop(context);
                          },
                          child: Text(
                            "取消",
                            style: AppTheme.getTextStyle(
                                themeData.textTheme.bodyText2,
                                fontWeight: FontWeight.w500,
                                color: themeData.colorScheme.primary),
                          )),
                      FlatButton(
                          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                          padding: EdgeInsets.all(0),
                          splashColor: themeData.colorScheme.primary.withAlpha(150),
                          onPressed: () async {
                            final db = Firestore.instance;
                            db
                                .collection('users')
                                .document(uid)
                                .updateData({'staff': false}).then((value) =>
                                    showDialog(
                                        context: context,
                                        builder: (BuildContext context) =>
                                            _simpleDialog(
                                                title: '刪除成功',
                                                detail: '已經成功移除客服')));
                            Navigator.pop(context);
                            initList();
                          },
                          child: Text(
                            "刪除",
                            style: AppTheme.getTextStyle(
                                themeData.textTheme.bodyText2,
                                fontWeight: FontWeight.w500,
                                color: Colors.red),
                          )),
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      }
    
      ThemeData themeData;
      ListView _staffList = ListView(
        padding: EdgeInsets.all(16),
        children: <Widget>[],
      );
    
      Future<Null> _onRefresh() async {
        await Future.delayed(Duration(milliseconds: 2000));
        initList();
        return null;
      }
    
      initList() async {
        final db = Firestore.instance;
        db
            .collection('users')
            .where('staff', isEqualTo: true)
            .getDocuments()
            .then((datas) {
          setState(() {
            _staffList = ListView(
              padding: EdgeInsets.all(16),
              children: <Widget>[
                for (var data in datas.documents)
                  ListTile(
                    leading: CircleAvatar(
                      child: Text(data.data['name'][0]),
                    ),
                    trailing: IconButton(
                        icon: Icon(Icons.delete),
                          onPressed: () async{
                          showDialog(
                              context: context,
                              builder: (BuildContext context) => _checkDelete(
                                  title: '確定要移除 ${data.data['name']} 的權限嗎?',
                                  detail: '這個帳號將恢復為一般帳號，不會被刪除。',
                                  uid: data.documentID));
                        }), //this showDialog can't close when I pressed button
                    subtitle: Text(data.documentID),
                    title: Text(data.data['name']),
                  ),
              ],
            );
          });
        });
      }
    
      @override
      initState() {
        super.initState();
        initList();
      }

Does this answer your question? [How to dismiss flutter dialog?](https://stackoverflow.com/questions/50683524/how-to-dismiss-flutter-dialog) — ToraCode, Jan 15 '21 at 04:09
can you pass and use the `BuildContext` introduced by show dialog builder to the function `_checkDelete` — Yadu, Jan 15 '21 at 04:11
@ToraCode tried, but my showDialog have no announce new one object name, I can't realize what is the result — 張孝睿, Jan 15 '21 at 06:16
@Yadu your mean is building a new "BuidContext" to add in the page? — 張孝睿, Jan 15 '21 at 06:22
@ToraCode I tried successfully, but I still have confused, can you tell me why the reason for this problem, thanks . — 張孝睿, Jan 15 '21 at 06:29
@張孝睿 I've added my answer for the explanation. Please check — Bach, Jan 15 '21 at 08:16

Bach · Accepted Answer · 2021-01-15T08:15:49.697

There can be multiple Navigator exist in your widget tree. The first one is the root Navigator, and under it there are other nested Navigators.

When you display a dialog, you need to call the showDialog function. This method has a property useRootNavigator that is default to true, which means the dialog route created by this method is pushed to the root Navigator. This is from the documentation:

The useRootNavigator argument is used to determine whether to push the dialog to the [Navigator] furthest from or nearest to the given context. By default, useRootNavigator is true and the dialog route created by this method is pushed to the root navigator. It can not be null`.

In order to pop the Dialog, you need to use the context of the root Navigator as well. Because you are using the context of the nested Navigator, the Dialog is not going away. That's why you need to include the rootNavigator: true in your method calling:

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

You can read more about the showDialog method from the documentation here.

I sole this prolem, thank you for your help – 張孝睿 Jan 18 '21 at 02:37 — 張孝睿, Jan 18 '21 at 02:37

Yadu · Answer 2 · 2021-01-15T06:38:00.763

0

do this

showDialog(...,builder:(theContextYouNeedToUse)=>_checkDelete(...,theContextYouNeedToUse));

and in the pop call

_checkDelete(...,BuildContext theContextYouNeedToUse){
 ...
 Navigator.pop(theContextYouNeedToUse);
}

this is happening because, wrong context was used to pop, call to showDialog gives you a new BuildContext to use through the builder function, they have given the builder param for the sole purpose of providing you with the new BuildContext to use further down the tree

see this amazing answer https://stackoverflow.com/a/49100439/12341099

edited Jan 15 '21 at 06:38

answered Jan 15 '21 at 06:27

Yadu

2,979
2
12
27

Thank you for your explanation, I have benefited a lot. – 張孝睿 Jan 18 '21 at 02:38

Why I open this showDialog and after press one of the button, it can't auto close？

2 Answers2