network_log_viewer 1.1.5

Flutter package to log REST APIs, GraphQL (queries, variables, responses), and SDK events (Insider, Adjust, Amplitude) with an in-app viewer.

network_log_viewer

A Flutter package that captures and displays REST API, GraphQL, analytics, notifications, and deeplink events in one in-app inspector.

Features

• REST logging – Logs URL, method, request/response body, headers, status code, and duration via a Dio interceptor.
• GraphQL logging – Logs endpoint URL, dynamic query/mutation text, variables, operation name, and full response (data + errors) via a graphql Link.
• SDK event logging – Generic API to log analytics events (e.g. Insider, Adjust, Amplitude) so they appear in the same viewer.
• In-app viewer – Scrollable list of log entries with expandable tiles; tap to see full request/response, GraphQL query, and payloads.
• Console output – Optional debugPrint of log summaries in debug mode.
• Configurable – Max entries, enable/disable, optional console printing.

Screenshots

Log list	Request details (GraphQL)	Light mode	Options menu
[Log list]	[GraphQL detail]	[Light mode]	[Options menu]

Getting started

1. Add the dependency

In your app’s pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  network_log_viewer: ^1.1.2
  dio: ^5.0.0   # required if you use REST logging
  graphql: ^5.0.0   # required if you use GraphQL logging

Then run:

flutter pub get

2. Wrap your app with RequestsInspector

Call RequestsInspector once around your app (e.g. in main()):

import 'package:network_log_viewer/requests_inspector.dart';

final navigatorKey = GlobalKey<NavigatorState>();

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(
    RequestsInspector(
      navigatorKey: navigatorKey,
      child: MaterialApp(
        navigatorKey: navigatorKey,
        home: MyApp(),
      ),
    ),
  );
}

3. Attach REST logging (Dio)

Add the interceptor to your Dio instance:

final dio = Dio(BaseOptions(baseUrl: 'https://api.example.com'));
dio.interceptors.add(RequestsInspectorInterceptor());

All requests and responses will be logged automatically.

4. Attach GraphQL logging

Prepend the logger link to your GraphQL link chain:

import 'package:graphql/graphql.dart';

final link = Link.concat(
  GraphQLInspectorLink(HttpLink('https://api.example.com/graphql')),
  HttpLink('https://api.example.com/graphql'),
);
final client = GraphQLClient(link: link, cache: GraphQLCache());

5. Log SDK / analytics events

Call extension helpers whenever you send custom events:

InspectorController().logAnalyticsEvent(
  tool: 'amplitude',
  eventName: 'screen_view',
  payload: {'screen': 'Home'},
);

Auto-log when your analytics call is hit:

await InspectorController().trackAnalyticsEvent(
  tool: 'amplitude',
  eventName: 'checkout_started',
  payload: {'cartSize': 3},
  onTrack: () => amplitude.logEvent('checkout_started'),
);

5.1 Log notifications and deeplinks

InspectorController().logNotificationEvent(
  action: 'notification_tapped',
  channel: 'fcm',
  payload: {'campaignId': 'abc123'},
);

InspectorController().logDeepLinkEvent(
  deepLink: Uri.parse('myapp://product/42?ref=push'),
  action: 'open',
);

Auto-log on received streams:

final notificationSub = InspectorController().autoLogNotificationStream(
  firebaseMessaging.onMessage.map((m) => m.data),
  channel: 'fcm',
);

final deeplinkSub = InspectorController().autoLogDeepLinkStream(
  uriLinkStream.whereType<Uri>(),
);

// dispose/cancel when no longer needed
await notificationSub.cancel();
await deeplinkSub.cancel();

No extra routes or debug buttons are required. RequestsInspector opens inspector on shake/long-press based on your config without blocking normal app usage.

Usage summary

What you want	What to do
Log REST calls	Add RequestsInspectorInterceptor() to your Dio instance.
Log GraphQL operations	Wrap link with GraphQLInspectorLink(...).
Log analytics	Call InspectorController().logAnalyticsEvent(...).
Auto-log analytics hits	Wrap calls with trackAnalyticsEvent(...).
Log notifications	Call InspectorController().logNotificationEvent(...).
Auto-log notifications	Use autoLogNotificationStream(...).
Log deeplinks	Call InspectorController().logDeepLinkEvent(...).
Auto-log deeplinks	Use autoLogDeepLinkStream(...).
Show logs in-app	Wrap app with RequestsInspector(...) and double shake device.
Clear logs	InspectorController().clearAllRequests().

Example app

The example/ folder contains a minimal Flutter app that:

• Wraps app with RequestsInspector
• Uses Dio with RequestsInspectorInterceptor
• Logs sample custom events
• Opens inspector via gesture

Run it to try the package and to capture screenshots for pub.dev:

cd example && flutter run

API overview

• RequestsInspector(...) – Wrap your app and open inspector by gesture.
• RequestsInspectorInterceptor – Dio interceptor for REST logging.
• GraphQLInspectorLink – GraphQL link for operation/response logging.
• InspectorController().logAnalyticsEvent(...) – Analytics logging helper.
• InspectorController().logNotificationEvent(...) – Notification logging helper.
• InspectorController().logDeepLinkEvent(...) – Deeplink logging helper.

Exported API includes: RequestsInspector, RequestsInspectorInterceptor, GraphQLInspectorLink, InspectorController, RequestDetails, ResponseDetails, RequestMethod, and ShowInspectorOn.

Requirements

• Flutter SDK (e.g. >=1.17.0)
• Dart ^3.10.7
• For REST logging: add dio to your dependencies.
• For GraphQL logging: add graphql (and typically gql_http_link) to your dependencies.

License

See the LICENSE file.

Publishing this package to pub.dev

See PUBLISHING.md for step-by-step instructions on taking screenshots, updating the README, and publishing to pub.dev.