[go_router] Allow nested navigation inside of a Dialog or BottomSheet

[kamami]

In the past I used a Navigator widget to accomplish nested navigation inside of my BottomSheet widget:

@override
  Widget build(BuildContext context) {
    return  Navigator(
        initialRoute: home,
        onGenerateRoute: onGenerateRoute,
    );
  }

But since GoRouter is not a widget, I can not return it inside my build function.
Beamer has support for this, but I would like to stick to go_router.

Any plans to support this in the near future?

[huycozy]

@kamami It seems using ShellRoute can solve this. Please take a look at #113496 (comment) and try implementing it.

[kamami]

@huycozy I already tried this, but shellRouteNavigatorKey.currentContext is always null.

                        onPressed: () {
                          if (shellRouteNavigatorKey.currentContext != null) {
                            showDialog(
                              useRootNavigator: false,
                              context: shellRouteNavigatorKey.currentContext!,
                              builder: (context) {
                                return const LoginScreen();
                              },
                            );
                          }
                        },

This is my routerConfig btw:

    final GoRouter _router = GoRouter(
    initialLocation: '/map',
    navigatorKey: _rootNavigatorKey,
    routes: <RouteBase>[
      ShellRoute(
          builder: (BuildContext context, GoRouterState state, Widget child) {
            return Home(child: child);
          },
          routes: [
              GoRoute(
                path: '/map',
                builder: (BuildContext context, GoRouterState state) {
                  return const MapView();
                },
              ),
            
          ]),
      ShellRoute(
          navigatorKey: shellRouteNavigatorKey,
          builder: (BuildContext context, GoRouterState state, Widget child) {
            return child;
          },
          routes: [
            GoRoute(
                path: '/login',
                builder: (BuildContext context, GoRouterState state) {
                  return const LoginScreen();
                },
                routes: [
                  GoRoute(
                    path: 'sms',
                    builder: (BuildContext context, GoRouterState state) {
                      return const SMSScreen();
                    },
                  ),
                  GoRoute(
                    path: 'success',
                    builder: (BuildContext context, GoRouterState state) {
                      return const SuccessScreen();
                    },
                  ),
                ]),
          ]),
    ],
  );

[huycozy]

@kamami Can you provide a completed and minimal reproducible code sample so that we may verify this?

[kamami]

@huycozy To break it down, I just want to have nested navigation inside of my BottomSheet.
Here is a minimal reproducible code sample:

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

void main() async {
  runApp(MyApp());
}

final GlobalKey<NavigatorState> rootNavigatorKey =
    GlobalKey<NavigatorState>(debugLabel: 'root');
GlobalKey<NavigatorState> shellRouteNavigatorKey =
    GlobalKey<NavigatorState>(debugLabel: 'shell');

class MyApp extends StatelessWidget {
  MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _router,
    );
  }

  final GoRouter _router = GoRouter(
      initialLocation: '/',
      navigatorKey: rootNavigatorKey,
      routes: <RouteBase>[
        GoRoute(
          path: '/',
          builder: (BuildContext context, GoRouterState state) {
            return const Screen1();
          },
        ),
        ShellRoute(
            navigatorKey: shellRouteNavigatorKey,
            builder: (BuildContext context, GoRouterState state, Widget child) {
              return child;
            },
            routes: [
              GoRoute(
                path: '/sheet',
                builder: (BuildContext context, GoRouterState state) {
                  return const BottomSheetRoot();
                },
              ),
              GoRoute(
                path: '/content',
                builder: (BuildContext context, GoRouterState state) {
                  return const BottomSheetContent();
                },
              ),
            ]),
      ]);
}

class Screen1 extends StatefulWidget {
  const Screen1({Key? key}) : super(key: key);

  @override
  State<Screen1> createState() => _Screen1State();
}

class _Screen1State extends State<Screen1> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: TextButton(
        child: const Text("Open BottomSheet"),
        onPressed: () {
          showBottomSheet(
            context: shellRouteNavigatorKey.currentContext!,
            builder: (context) {
              return const BottomSheetRoot();
            },
          );
        },
      )),
    );
  }
}

class BottomSheetRoot extends StatelessWidget {
  const BottomSheetRoot({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(child: Text("BottomSheetRoot")),
    );
  }
}

class BottomSheetContent extends StatelessWidget {
  const BottomSheetContent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(child: Text("BottomSheetContent")),
    );
  }
}

[huycozy]

@kamami Is this your expected result?

Record_2023-02-02-09-51-45.mp4

Sample code

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

void main() async {
  runApp(MyApp());
}

final GlobalKey<NavigatorState> rootNavigatorKey =
GlobalKey<NavigatorState>(debugLabel: 'root');
GlobalKey<NavigatorState> shellRouteNavigatorKey =
GlobalKey<NavigatorState>(debugLabel: 'shell');

class MyApp extends StatelessWidget {
  MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _router,
    );
  }

  final GoRouter _router = GoRouter(
      initialLocation: '/',
      navigatorKey: rootNavigatorKey,
      routes: <RouteBase>[
        GoRoute(
          path: '/',
          builder: (BuildContext context, GoRouterState state) {
            return const Screen1();
          },
        ),
        ShellRoute(
            navigatorKey: shellRouteNavigatorKey,
            builder: (BuildContext context, GoRouterState state, Widget child) {
              return child;
            },
            routes: [
              GoRoute(
                path: '/sheet',
                builder: (BuildContext context, GoRouterState state) {
                  return const BottomSheetRoot();
                },
              ),
              GoRoute(
                path: '/content',
                builder: (BuildContext context, GoRouterState state) {
                  return const BottomSheetContent();
                },
              ),
            ]),
      ]);
}

class Screen1 extends StatefulWidget {
  const Screen1({Key? key}) : super(key: key);

  @override
  State<Screen1> createState() => _Screen1State();
}

class _Screen1State extends State<Screen1> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: TextButton(
            child: const Text("Open BottomSheet"),
            onPressed: () {
              showModalBottomSheet(
                context: context,
                builder: (context) {
                  return const BottomSheetRoot();
                },
              );
            },
          )),
    );
  }
}

class BottomSheetRoot extends StatelessWidget {
  const BottomSheetRoot({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(child: GestureDetector(
        onTap: () {
          context.push('/content');
        },
          child: Text("BottomSheetRoot"))),
    );
  }
}

class BottomSheetContent extends StatelessWidget {
  const BottomSheetContent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(child: Text("BottomSheetContent")),
    );
  }
}

[kamami]

@huycozy Unfortunately not, the BottomSheetContent should appear inside the BottomSheet on to top of the BottomSheetRoot. In your video the BottomSheetContent is on top of the whole screen.

[huycozy]

@kamami I think you need to add your own implementation for that part. It only relates to go_router if the navigation issue occurs, not the display issue.