How to dismiss a flutter dialog automatically, and navigate back?

Question

I'm working on a website made in Flutter. I want that after some action is completed successfully, a dialog is displayed, it closes automatically, and it goes back to the previous page. My problem is that I can't make the following error disappear.

Error: Looking up a deactivated widget's ancestor is unsafe.

This is my code.

showDialog<void>(
        context: context,
        barrierDismissible: false, // user must tap button!
        builder: (BuildContext buildContext) {
          Timer(const Duration(milliseconds: 2000), () {
            Navigator.of(buildContext).pop();
            context.router.navigateBack();
          });
          return AlertDialog(
            title: const Text(AppGlobals.invalidFieldsText),
            content: const SingleChildScrollView(
                child: Text(AppGlobals.invalidFieldsDescriptionText)),
          );
        },
      );

If instead of closing the dialog automatically, I use a button to trigger, the error disappears.

showDialog<void>(
        context: context,
        barrierDismissible: false, // user must tap button!
        builder: (BuildContext buildContext) {
          return AlertDialog(
            title: const Text(AppGlobals.invalidFieldsText),
            content: const SingleChildScrollView(
                child: Text(AppGlobals.invalidFieldsDescriptionText)),
            actions: <Widget>[
              TextButton(
                child: const Text(AppGlobals.closeText),
                onPressed: () {
                  Navigator.of(buildContext).pop();
                  context.navigateBack();
                },
              ),
            ],
          );
        },
      );

I tried to find the solution here, here, here, here, and here but I couldn't solve the problem. please help.

krishnaacharyaa · Accepted Answer · 2023-03-08 05:21:39Z

3

It is because the widget tree has already been disposed of when the dialogue is supposed to be closed automatically after a predetermined length of time, which prevents Flutter from going back to the previous page.

Hence you can consider using a StatefulWidget to display the dialog and use the dispose function to stop the timer when the widget is removed.

Example:

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  Timer? _timer;

  void _showDialog() {
    showDialog<void>(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        _timer = Timer(const Duration(seconds: 2), () {
          Navigator.of(context).pop();
          Navigator.of(context).pop(); // navigate back
        });
        return AlertDialog(
          title: const Text('Dialog'),
          content: const Text('Dialog content'),
        );
      },
    );
  }

  @override
  void dispose() {
    _timer?.cancel(); // cancel timer when widget is removed
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: ElevatedButton(
          onPressed: _showDialog,
          child: const Text('Show Dialog'),
        ),
      ),
    );
  }
}

answered Mar 8, 2023 at 5:21

krishnaacharyaa

26.1k9 gold badges102 silver badges138 bronze badges

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

1 Comment

l.diazborg Over a year ago

I found the solution to my problem with the help of your answer. I was already calling the showDialog method inside a StatefulWidget. Instead of using the .pop method twice, the second time I replace it with the navigateBack method, because I'm using Nested Navigation. The main change was to declare the Timer variable separately, and dispose it when the view is removed. Thank you so much!!!.

greetal · Accepted Answer · 2023-03-08 01:38:01Z

0

You might use Future.delayed() method to close the dialog automatically and Navigator.of(context).pop() to go back to the previous page.

// Show dialog
showDialog(
  context: context,
  barrierDismissible: false,
  builder: (BuildContext buildContext) {
    Future.delayed(const Duration(seconds: 2), () {
      Navigator.of(buildContext).pop(); // close the dialog
      Navigator.of(context).pop(); // navigate back to the previous page
    });
    return AlertDialog(
      title: const Text(AppGlobals.invalidFieldsText),
      content: const SingleChildScrollView(
        child: Text(AppGlobals.invalidFieldsDescriptionText),
      ),
    );
  },
);

edited Mar 8, 2023 at 1:38

answered Mar 8, 2023 at 0:22

greetal

1,5659 silver badges16 bronze badges

5 Comments

l.diazborg Over a year ago

It does not work. Now i have the error "Error: This widget has been unmounted, so the State no longer has a context (and should be considered defunct)."

greetal Over a year ago

@Idiaz997 above code contains twice the Navigator.of(context).pop(); . Just use once Also make sure that you are calling showDialog() within a StatefulWidget .

l.diazborg Over a year ago

If I only use one, the error disappears, but I don't go back to the previous page, the page from which the dialog was displayed remains.

greetal Over a year ago

@Idiaz997 above code shoud work . If not, could you provide your stateful widget code?

l.diazborg Over a year ago

As you mentioned, the dialog is called within StatefulWidget. With the help of @BouncyBits's answer, I found the solution. it was to declare the Timer variable separately, and dispose it when the view is removed, as his answer shows.

flutterWithChris · Accepted Answer · 2023-03-08 01:53:57Z

0

You should use Navigator.popUntil(context, ModalRoute.withName('/')). Replace the '/' with your route name & voila!

Be careful, when you were calling this Navigator.of(buildContext).pop(), that passes the build context of the dialog builder; Not the root app context.

Key difference is using the default lowercase context which always refers to the app's main context. You were also trying to navigate again after your first .pop() which isn't possible because the widget (dialog) will close & will no longer be mounted.

answered Mar 8, 2023 at 1:53

flutterWithChris

464 bronze badges

1 Comment

l.diazborg Over a year ago

I can't use popUntil because the view from which the dialog is fired is built from different views. So I wouldn't know which route name to use.

Collectives™ on Stack Overflow

How to dismiss a flutter dialog automatically, and navigate back?

3 Answers 3

1 Comment

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related