Autoclose dialog in Flutter

Question

I want to autoclose dialog a few seconds after opening. The solution that I found is to call Navigator.of(context).pop(); delayed and it works. But the problem occurs if I closed it manually (by clicking outside) before the execution of the Navigator.pop command. Then Navigator.pop just closes the app and I see just a black screen. I need a way to destroy this delay on closing the dialog or to find another workaround.

showDialog(
  context: context,
  builder: (BuildContext builderContext) {
    Future.delayed(Duration(seconds: 5), () {
      Navigator.of(context).pop();
    });

    return AlertDialog(
      backgroundColor: Colors.red,
      title: Text('Title'),
      content: SingleChildScrollView(
        child: Text('Content'),
      ),
    );
  }
);

score 16 · Accepted Answer · answered Apr 19 '20 at 16:14

You can use a Timer to achieve this. You can cancel the timer whenever you want.

Declare a timer property in your class:

Timer _timer;

And change your showDialog code like:

showDialog(
  context: context,
  builder: (BuildContext builderContext) {
    _timer = Timer(Duration(seconds: 5), () {
      Navigator.of(context).pop();
    });

    return AlertDialog(
      backgroundColor: Colors.red,
      title: Text('Title'),
      content: SingleChildScrollView(
        child: Text('Content'),
      ),
   );
  }
).then((val){
  if (_timer.isActive) {
    _timer.cancel();
  }
});

encubos · Answer 2 · 2020-04-19T16:48:02.163

3

In this case, you are using the wrong context.

Try to change the context you are using in the "pop"

You have this BuildContext builderContext, use that builderContext like:

Navigator.of(builderContext).pop();

edited Apr 19 '20 at 16:48

answered Apr 19 '20 at 16:17

encubos

2,915
10
19

Can you tell me what's the difference? Thanks in advance... – user10033434 Jan 11 '22 at 15:20

Aleksandar · Answer 3 · 2020-04-21T20:36:48.037

1

You can use different way of executing pop() request using Timer

_timer = Timer(Duration(seconds: _timerTimeoutInterval), () {
    Navigator.of(context).pop();
});

And in case you want to cancel the timer you can call this:

if (_timer != null && _timer.isActive) {
  _timer.cancel();
}

edited Apr 21 '20 at 20:36

answered Apr 19 '20 at 15:56

Aleksandar

1,457
13
30

You can close it manually by creating button and executing Navigator pop method in that button's onPress callback. – Aleksandar Apr 20 '20 at 10:37
Yes, but I want to close it by clicking outside. – micobg Apr 20 '20 at 19:13
Ahhhh sorry, I read the question wrong. In order to close the dialog and cancel that execution of a pop, you need to use timer, that can be cancelled on demand. I will edit my initial answer. – Aleksandar Apr 21 '20 at 20:34

Autoclose dialog in Flutter

3 Answers3

Linked