How to use go_router and Drawer

[morhi]

Hello!

I have an issue using a Drawer along with the go_router. My Question is:

How to use the go_router along with a Drawer so that it can be closed?

In this example the Drawer won't close when tapping theListTile inside the Drawer:

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

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

final router = GoRouter(
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => Text('Body'),
      ),
    ],
    navigatorBuilder: (context, state, child) => Scaffold(
          drawer: AppDrawer(),
          body: child,
        ));

class MyApp extends StatefulWidget {
  static BuildContext? navigationContext;

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      debugShowCheckedModeBanner: false,
      routeInformationParser: router.routeInformationParser,
      routerDelegate: router.routerDelegate,
    );
  }
}

class AppDrawer extends StatelessWidget {
  Widget build(BuildContext context) {
    return Drawer(
      backgroundColor: Theme.of(context).backgroundColor,
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          ListTile(
            title: Text('Close me'),
            onTap: () {
              GoRouter.of(context).pop();
            },
          ),
        ],
      ),
    );
  }
}

[csells]

I believe you'll be able to close your Drawer with a call to Navigator.pop(context) in the onTap handler.

[esDotDev]

Since your AppDrawer is actually above the Navigator here, I think you probably need to wrap an outer navigator to handle it:

navigatorBuilder: (_, child) => Navigator( onGenerateRoute: (_) {
    return PageRouteBuilder(
      transitionDuration: Duration.zero,
      pageBuilder: (_, __, ___){
          return Scaffold(
            drawer: AppDrawer(),
            body: child, // <- this is actually the navigator the router controls
          ));
      },
    );
  })

This root navigator can handle dialogs, sheets, overlays as well.

[morhi]

Thanks, Shawn! Yeah, I was and am still confused about how context works. I actually ended up using some code of the Shared Scaffold Example, which fixed my issue. For anyone interested in this solution it looks like this:

final router = GoRouter(
  // use the navigatorBuilder to keep the SharedScaffold from being animated
  // as new pages as shown
  navigatorBuilder: (context, state, child) {
    return Navigator(
      onPopPage: (route, dynamic result) {
        route.didPop(result);
        return false; // don't pop the single page on the root navigator
      },
      pages: [
        MaterialPage<void>(
          child: Scaffold(
            drawer: Drawer( ... ),
            body: child
          )
        ),
      ],
    );
  },
);