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'),
      ),
    );
  }
);

Midhun MP · Accepted Answer · 2020-04-19 16:14:42Z

17

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();
  }
});

answered Apr 19, 2020 at 16:14

Midhun MP

108k31 gold badges157 silver badges207 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

encubos · Accepted Answer · 2020-04-19 16:48:02Z

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, 2020 at 16:48

answered Apr 19, 2020 at 16:17

encubos

3,34314 silver badges22 bronze badges

1 Comment

user10033434 Over a year ago

Can you tell me what's the difference? Thanks in advance...

Aleksandar · Accepted Answer · 2020-04-21 20:36:48Z

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, 2020 at 20:36

answered Apr 19, 2020 at 15:56

Aleksandar

1,59815 silver badges34 bronze badges

3 Comments

Aleksandar Over a year ago

You can close it manually by creating button and executing Navigator pop method in that button's onPress callback.

micobg Over a year ago

Yes, but I want to close it by clicking outside.

Aleksandar Over a year ago

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.

Tarish · Accepted Answer · 2025-02-23 17:25:00Z

0

await showDialog(
  context: context,
  builder: (BuildContext dialogContext) {
    Future.delayed(Duration(seconds: 5),() => Navigator.of(dialogContext).pop());
    return AlertDialog(
      backgroundColor: Colors.red,
      title: Text('Title'),
      content: SingleChildScrollView(
        child: Text('Content'),
      ),
   );
  }
);
// any code which will be executed after the dialog is closed
// either by the timer or by user action

Note: It is important to use the dialog context because if you use pop on other context it is likely that you are calling pop on the parent widget and not the dialog.

answered Feb 23 at 17:25

Tarish

6389 silver badges12 bronze badges

Collectives™ on Stack Overflow

Autoclose dialog in Flutter

4 Answers 4

Comments

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related