Push a transparent page with go_router?

Question

In order show a drawer that covers my shellroute, i need to push a semi-transparent page on top of my page stack. So far the background remain opaque when i use the

GoRouter.of(rootNavigatorKey.currentContext!).pushNamed('myDrawer');

I have found a ruse using the traditional Navigator and PageRouteBuilder :

 Navigator.of(rootNavigatorKey.currentContext!).push(
                    PageRouteBuilder(
                      fullscreenDialog: true,
                      opaque: false,
                      pageBuilder: (_, __, ___) => MyDrawer(),
                    ),
                  );

Is there a way to use an option like the opaque parameter, with go_router, when pushing routes ?

score 2 · Answer 1 · answered Apr 10 '23 at 11:18

You can use CustomTransitionPage for that. You'll have to go to where the GoRouter instance of your app is defined and add it like below to list of routes:

GoRoute(
       path: '/myDrawer',
       name: 'myDrawer',
       pageBuilder: (context, state) => CustomTransitionPage(
           fullscreenDialog: true,
           opaque: false,
           transitionsBuilder: (_, __, ___, child) => child,
           child: const MyDrawer(),
       ),
)

Push a transparent page with go_router?

1 Answers1