Flutter Missing DevTools

One Flutter DevTools panel for every kind of Flutter navigation. Inspect the live backstack, browse the declared route tree (as a list or an interactive graph), view per-route args/params, and drive confirm-gated navigation from the panel — whether your app uses Navigator 1.0, a hand-written Navigator 2.0 RouterDelegate, go_router, or auto_route.

New here? The 30-second per-router setup lives in USAGE.md.

Packages

Package	What it is	Use it when
navigation_devtools	Core: adapter API, DevTools panel bundle, Navigator 1.0 + generic RouterDelegate adapters, adapter conformance test kit	MaterialApp(routes:), imperative push/pop, or a custom RouterDelegate
go_router_devtools	go_router adapter	MaterialApp.router(routerConfig: GoRouter(...))
auto_route_devtools	auto_route v11 adapter	MaterialApp.router(routerConfig: appRouter.config())

The DevTools panel ships once, inside navigation_devtools; the adapter packages depend on it, so depending on any one of them gets you the panel. Every affordance in the panel is capability-aware — a router that can't enumerate its routes simply shows no tree pane; one that can't deep-link shows no path field.

Quick start

Pick the adapter matching your navigation setup (each snippet is mirrored by a runnable app under examples/):

Navigator 1.0 (example):

final adapter = Navigator1Adapter(routes: appRoutes);
NavigationDevTools.register(adapter);
runApp(MaterialApp(routes: appRoutes, navigatorObservers: [adapter.observer]));

Custom RouterDelegate (example):

NavigationDevTools.register(RouterDelegateAdapter(delegate, parser: parser));
runApp(MaterialApp.router(routerDelegate: delegate, routeInformationParser: parser));

go_router (example):

NavigationDevTools.register(GoRouterAdapter(router));
runApp(MaterialApp.router(routerConfig: router));

auto_route (example):

AutoRouteDevTools.init(router);
runApp(MaterialApp.router(
  routerConfig: router.config(
    navigatorObservers: () => [AutoRouteDevTools.navigationObserver()],
  ),
));

Then run your app and open the navigation_devtools tab in Flutter DevTools.

Capability matrix

Capability	Navigator 1.0	RouterDelegate	go_router	auto_route
Static route tree	✅ with routes: map	❌	✅ incl. shells	✅
Guard / redirect badges	❌	❌	✅ redirect flag	✅ guard names
Navigate by path	✅	✅ with parser	✅ go()	✅
Push by name	✅	❌	✅	❌
Pop	✅	✅	✅	✅
Nested routers	one adapter per Navigator	❌	✅ shells	✅

Writing your own adapter

Implement NavigationAdapter (see packages/navigation_devtools) and validate it with the bundled conformance kit:

import 'package:navigation_devtools_test/navigation_devtools_test.dart';

runAdapterConformanceTests('MyAdapter', AdapterHarness(...));

Dialogs & bottom sheets

showDialog, showModalBottomSheet, and friends push pageless routes on the raw Navigator — router packages (go_router, auto_route) never see them in their own state.

• Navigator 1.0 apps: nothing to do — dialogs and sheets appear on the backstack automatically, badged pageless (e.g. DialogRoute<void>), and can be popped from the panel.
• go_router / auto_route / custom delegates: pair your adapter with a Navigator1Adapter observer on the same navigator; it shows up as a second router in the panel's selector, carrying the raw stack including dialogs:

// go_router
final pageless = Navigator1Adapter(label: 'Pageless routes');
final router = GoRouter(observers: [pageless.observer], routes: [...]);
NavigationDevTools.register(GoRouterAdapter(router));
NavigationDevTools.register(pageless);

// auto_route
navigatorObservers: () => [adapter.observer, pageless.observer]

Both recipes are regression-tested (dialogs_with_nav1_observer_test.dart in each adapter package).

Prior art

• Flutter DevTools ships no navigation/backstack inspector.
• auto_route and go_router ship no DevTools extension (go_router only offers debugLogDiagnostics console logging; developer_tools_auto_route is an in-app overlay, not a DevTools panel).

Repository layout

Design docs and implementation plans live in docs/superpowers/. The DevTools panel source is packages/navigation_devtools_extension/ (unpublished; prebuilt into the core package — rebuild with dart run devtools_extensions build_and_copy --source=. --dest=../navigation_devtools/extension/devtools).