Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – prevent dialog from being above later pushed page

I am using typed routes with go_router in flutter.

I show a loading spinner like this:

showDialog<void>(
  context: context,
  barrierDismissible: false,
  builder: (BuildContext context) {
    return const Dialog(
      backgroundColor: Colors.transparent,
      elevation: 0,
      child: Center(
        child: CircularProgressIndicator(
          valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
        ),
      ),
    );
  },
);

Afterwards I push a page.

await goRouter.push(
  const RouteEditPage().location,
  extra: (
    ...
  ),
);

I want the new page to be above the loading spinner. Because in this page I add some values and get return values back or an error. And after the page is closed the spinner should still be going for a while until some process finished.

At the moment the loading dialog is always on top. Even though I push the page later the dialog seems to be at the topmost spot at the stack.

How can I change that?

Tags:

3

Answers


  1. 0

    call Navigator.pop() when you want to hide the dialog and show the dialog again when you need to

    Login or Signup to reply.
  2. 0

    In the case of showDialog you need a workaround to ensure that it gets called after navigating to the new screen.

    Here is a way to achieve it:

    Somewhere in your code, you call this:

    await goRouter.push(
  const RouteEditPage().location,
  extra: (
    ...
  ),
);

    And then call showDialog after navigating with delay:

    Future.delayed(
  const Duration(milliseconds: 500),
  () {
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return const Dialog(
          backgroundColor: Colors.transparent,
          elevation: 0,
          child: Center(
            child: CircularProgressIndicator(
              valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
            ),
          ),
        );
      },
    );
  },
);

    Using the Future.delayed schedules the showDialog to be executed after the navigation to the second screen, ensuring that the dialog appears behind the newly pushed screen based on the given context.

    For dismissing the dialog:

    Navigator.of(context).pop;
    Login or Signup to reply.
  3. 0

    showDialog has a property named useRootNavigator which is set to true by default and which will make the dialog to be the top most route. Try setting it to false to prevent it from being above the latest pushed route.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search