auto_route_devtools 0.1.0

Flutter DevTools extension for auto_route — inspect the live backstack, full router tree, route args, and navigate interactively.

auto_route_devtools

A real Flutter DevTools panel extension for auto_route.

It adds an Auto Route tab to Flutter DevTools that shows, live, while your app runs:

• Live backstack — every entry currently on the stack, with the active route highlighted, across nested routers.
• Router inspector, two ways — a Tree view of the full static route configuration, and a Graph view (Android-Studio-Navigation-Editor style) that lays routes out as cards connected by arrows.
• Route args & params — path params, query params, and route argument previews for each entry.
• Interactive navigation — trigger navigate/pop on the running app straight from the panel:
  • Confirm-gated so you never fire a navigation by accident.
  • Parameter entry — tapping a parameterized route (e.g. /details/:id) opens a dialog to fill in the params before navigating, with a live path preview.
  • Nested-aware — nested routes navigate by their absolute path (e.g. /dashboard/profile).
  • Clear failures — if a navigation is rejected, the target and reason are shown in a dismissible banner.

Install

dev_dependencies:
  auto_route_devtools: ^0.1.0

Setup

Initialize the companion with your router and register the navigation observer:

// main.dart
void main() {
  WidgetsFlutterBinding.ensureInitialized();

  final router = AppRouter();
  AutoRouteDevTools.init(router);

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

That's it. Run your app in debug mode, open DevTools, and select the Auto Route tab.

AutoRouteDevTools.init and the observer are inert in release builds (kReleaseMode), so it's safe to leave the setup in place. init registers dart:developer service extensions that the panel reads over the VM service; nothing is exposed in a release binary.

Using the panel

The panel has three regions:

Region	What it shows
Left — Backstack	The live navigation stack, indented by router depth. The active route is highlighted; tap an entry to inspect it.
Right — Router (Tree / Graph)	Toggle between the Tree (nested list) and Graph (node-graph) of your full route config. In the Graph, the initial route is marked, guards show as badges, and redirects render as dashed arrows. The current backstack path is highlighted live.
Bottom — Details	Path params, query params, and the args-type/preview of the selected route.

Navigating from the panel

• Tap a route (in Tree or Graph) to navigate the running app to it. A confirmation step runs first.
• Parameterized routes (/details/:id) open a dialog to enter each param; the resulting path is previewed before you confirm.
• The path field at the top navigates to any path you type.
• Pop (↑) pops the top route.

If navigation fails (for example an invalid or unmatched path), the reason is shown in a banner at the top of the panel.

Prior art

There is a genuine gap here:

• auto_route itself ships no DevTools extension — it has no extension/devtools/ folder and registers no DevTools panel.
• The only related package, developer_tools_auto_route, is an in-app debug overlay rendered inside your running app — it is not a DevTools panel.

auto_route_devtools is, to our knowledge, the first package to expose auto_route's routing state as a proper DevTools panel.

Known limitations

• Route args are shown as their runtimeType plus a toString() preview, not fully structured fields. Path and query params serialize cleanly as maps.
• Redirect edges in the graph are matched to a target node by exact path.
• Parameter entry covers path params (:id); query parameters can be appended manually via the path field.

License

MIT