dio_console

An in-app network debugging console built on a Dio interceptor. It shows a draggable floating entry on top of your app; tap it to inspect the list and details of every request that goes through Dio, and copy any request as a cURL command for easy debugging.

Features

• Automatically records request method, URL, request/response headers, request/response body, status code, duration and error info via a Dio interceptor.
• Draggable floating entry button to open/close the console at any time.
• Three display modes, switchable inside the page:
  • Page mode (page): tapping a list item opens a standalone detail page.
  • Top-bottom mode (topBottom): list on top, details below.
  • Left-right mode (leftRight): list on the left, details on the right.
• Details are split into Info / Request / Response tabs; JSON is rendered as a collapsible tree view, and leaf nodes can be selected and copied.
• One-click copy of a request as a cURL command.
• Compatible with older dio versions (>=4.0.0 <6.0.0).

Installation

Add the dependency to your pubspec.yaml:

dependencies:
  dio_console: ^1.0.0

Then run:

flutter pub get

Usage

Enable the console

1. Add the interceptor to your dio instance:

import 'package:dio_console/dio_console.dart';

final dio = Dio();
dio.interceptors.add(DioConsoleInterceptor());

2. Insert the floating entry where a BuildContext is available:

DioConsoleOverlay.insertOverlay(context, mode: DioConsoleDisplayMode.page);

Disable the console

1. Remove the interceptor from your dio instance:

dio.interceptors.remove(DioConsoleInterceptor());

2. Remove the floating entry:

DioConsoleOverlay.removeOverlay();

It is recommended to enable this only in debug builds (e.g. behind kDebugMode) to avoid exposing request information in production releases.

Public API

Name	Description
DioConsoleInterceptor	Dio interceptor (singleton) that records request logs.
DioConsoleOverlay	Floating entry controller: insertOverlay / removeOverlay / setOverlayVisible.
DioConsoleDisplayMode	Display mode enum: page / topBottom / leftRight.
DioConsoleRecord	Data model for a single request record.

DioConsoleInterceptor is a singleton, so the interceptor and the floating console share the same log data. You can read records via DioConsoleInterceptor().logs, clear them with clearLogs(), or adjust maxLogs to control the maximum number of records kept in memory (default 500).

Example

See the full example in the example/ directory.

License

MIT