1

I am working on a Flutter web app using go_router. I need to display a dialog outside the ShellRoute view.

I have the following code:

      ShellRoute(
        builder: (context, state, child) {
          return HomePage(
              child: child,
            ),
          );
        },
        routes: [
          GoRoute(
            path: '/home',
            name: 'home',
            pageBuilder: (_, state) => NoTransitionPage(
              child: const SplashScreen(),
            ),
          ),
          GoRoute(
            path: '/dashboard',
            name: 'dashboard-parent',
            pageBuilder: (_, state) => NoTransitionPage(
              child: DashboardPage.show(
                key: ValueKey(state.params['id'] ?? ''),
              ),
            ),
            routes: [
              GoRoute(
                path: 'details',
                name: 'details',
                pageBuilder: (_, state) => AlertDialog(),
              ),
            ],
          ),
        ],
      ),

class AlertDialog extends Page {
  @override
  Route createRoute(BuildContext context) => RawDialogRoute(
        pageBuilder: (BuildContext context, Animation<double> animation,
                Animation<double> secondaryAnimation) =>
            Text('TEST'),
        settings: this,
      );
}

It works quite well, but I have a problem with the position of the dialog. I need to render it outside of the main container. Please take a look at this picture.

desired result

Do you have any idea on how can I achieve that result?

Alain C. Jiménez
  • 169
  • 1
  • 13
Fi3rce
  • 9
  • 3

1 Answers1

-1

Problem solved. I had to add a parentNavigatorKey

Fi3rce
  • 9
  • 3
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 26 '23 at 14:26