Riverpod Inspector

Full Riverpod provider inspection for Flutter. Monitor provider state changes, explore value diffs, and browse live provider values in real-time — directly on your device. It's the same inspector UI as the React Native atom inspector, reading your Riverpod providers.

The React Native Jotai inspector, running here on a mock session. Riverpod's inspector is the Flutter port of this same panel set — provider values and state changes in place of atoms. Walk the tour, or skip it and start tapping.

Installation

Setup

Add the Buoy observer to your ProviderScope — no wrappers, no middleware, no modifications to existing providers:

import 'package:buoy_riverpod/buoy_riverpod.dart';

void main() {
  registerBuoyRiverpod(); // or use the `buoy` umbrella widget
  runApp(
    ProviderScope(
      observers: const [buoyRiverpodObserver],
      child: const MyApp(),
    ),
  );
}

import 'package:buoy_riverpod/buoy_riverpod.dart';

void main() {
  registerBuoyRiverpod(); // or use the `buoy` umbrella widget
  runApp(
    ProviderScope(
      observers: const [buoyRiverpodObserver],
      child: const MyApp(),
    ),
  );
}

Name your providers (StateProvider(..., name: 'counter')) so the list reads well — unnamed providers fall back to their runtime type.

Providers Tab

Browse all observed providers and their live current value:

• Provider Name — Color-coded for easy identification across both tabs
• Value Type — number, boolean, object, array · N, null, etc. at a glance
• Live Value — Tap any provider to expand and see the full value tree, updated in real-time
• Change Count — How many times this provider has changed this session
• View History — Jump straight to the filtered event history for a single provider

Events Tab

Every state change is captured with rich metadata:

• Provider Name — Which provider changed, color-coded for quick identification
• Value Transition — prev → next at a glance (e.g. 0 → 5, null → {name, email})
• Timestamp — When the change occurred with relative time

Tap any event for the detail view: full value trees and a split-screen diff — additions in green, removals in red — so you see exactly what changed in complex state.

What's Next

• Events Timeline — Provider changes alongside network and route events
• Network Monitor — See every API call your app makes
• Storage Explorer — Browse and edit persisted data

FAQ

How do I inspect Riverpod provider state on a device?

Add buoy_riverpod, call registerBuoyRiverpod(), and add buoyRiverpodObserver to your ProviderScope observers — every provider's live value, its change history, and before/after value diffs are browsable on the device. No wrappers, no middleware, no changes to existing providers.

Why do some providers show a type instead of a name?

Unnamed providers fall back to their runtime type. Pass a name — StateProvider(..., name: 'counter') — so the list reads well.