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 demo uses React Native Jotai data. Flutter records providers observed by the scope you configure below; it does not discover every provider declared in the project.

Installation

Setup

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

import 'package:flutter/widgets.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
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:flutter/widgets.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:buoy_riverpod/buoy_riverpod.dart';

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

Use your existing MyApp with BuoyDevTools mounted in debug mode. Change an observed provider and confirm its value and event appear. Use provider APIs compatible with your installed Riverpod version.

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 — Inspect supported HTTP requests
• 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.