FlowScope FlowScope
Documentation Changelog GitHub
pub.dev v0.1.0 MIT License Flutter 3.x

Debug your Flutter app without leaving it

Real-time state inspection, network monitoring, and event timeline — all from an in-app overlay. Built for the real world.

$ flutter pub add flowscope
The Problem

You know your app broke. You just don't know where, when, or why.

layers

Did the state update?

Stop guessing if your providers triggered. Inspect the live state tree in real-time as you interact with the UI.

wifi

Did the API return?

No more proxy setup. Captured Dio requests directly in the app. Full bodies, headers, and timing at your fingertips.

visibility_off

Why didn't the UI change?

Track events chronologically. See exactly what happened before that unexpected UI behavior occurred.

The Solution

Three answers. One overlay.

01 / State database

Riverpod-First Inspection

See every Riverpod provider. Current value, previous value, what changed and when. Full deep-diffing available on every state change.

02 / Timeline history

Unified Event Stream

Everything that happened, in order. STATE, NETWORK, LOG, ERROR — all tagged and color coded for rapid scanning and retrieval.

03 / Network sync_alt

Dio Interceptor Capture

Every Dio request captured. Method, status, duration, request and response body. Inspect JSON payloads without leaving your mobile device.

Three steps. Then you're done.

Integration takes less than 2 minutes.

01

Wrap your app

Initialize the FlowScope overlay at the root of your widget tree.

void main() {
  runApp(
    FlowScope(
      child: ProviderScope(
        observers: [FlowScopeObserver()],
        child: MyApp(),
      ),
    ),
  );
}
02

Add Dio Interceptor

Automatically pipe all network traffic into the inspector timeline.

final dio = Dio();
dio.interceptors.add(
  FlowScopeDioInterceptor(),
);
03

Log events

Manually log important events or errors to the global stream.

FlowLogger.log('User tapped login');

FlowLogger.log(
  'Something failed',
  level: FlowLogLevel.error,
  data: {'code': 'ERR_001'},
);
precision_manufacturing

Built for Flutter developers who debug in the real world.

Riverpod-first

Deeply integrated with ProviderObserver to ensure you see every state mutation exactly when it happens.

Zero friction

No external tools required. No browser tabs. No physical cables. Just your app and the FlowScope overlay.

Dev only

Disable in production with one flag. Zero performance impact for your users.

FlowScope(
  enabled: kDebugMode,
  child: myApp,
)