https://github.com/7wilightxdev/dio_spy
A lightweight HTTP inspector for Dio with a clean minimal UI. Monitor and debug your HTTP calls with ease!
https://github.com/7wilightxdev/dio_spy
Last synced: 4 months ago
JSON representation
A lightweight HTTP inspector for Dio with a clean minimal UI. Monitor and debug your HTTP calls with ease!
- Host: GitHub
- URL: https://github.com/7wilightxdev/dio_spy
- Owner: 7wilightxdev
- License: mit
- Created: 2026-02-12T04:19:12.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2026-02-12T10:54:41.000Z (4 months ago)
- Last Synced: 2026-02-12T14:23:11.409Z (4 months ago)
- Language: Dart
- Size: 2.14 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# DioSpy
A lightweight HTTP inspector for Dio with a clean minimal UI. Monitor and debug your HTTP calls with ease!
## Features
- ✨ **Automatic Request Capture** - Intercepts all Dio HTTP calls automatically
- 📱 **Shake to Inspect** - Open the inspector by shaking your device/simulator
- 🎨 **Clean Minimal UI** - Beautiful, easy-to-use interface
- 📋 **Copy as cURL** - Copy any request as a cURL command
- ⚡ **Request Timing** - See how long each request takes
- 🎯 **Quick Filter** - Quickly find your requests by URL, HTTP method and status code
- 💾 **In-Memory Storage** - Configurable circular buffer (default: 1000 calls)
- 🌳 **JSON Visualizer** - Interactive JSON tree viewer
## Screenshots
Call List Screen
Request Details
Response Details
Error Handling
## Installation
Add this to your `pubspec.yaml`:
```yaml
dependencies:
dio_spy: ^0.0.5
```
Then run:
```bash
flutter pub get
```
## Quick Start
### 1. Initialize DioSpy
```dart
import 'package:dio/dio.dart';
import 'package:dio_spy/dio_spy.dart';
// Create DioSpy instance
final dioSpy = DioSpy(
showOnShake: true, // Enable shake gesture
maxCalls: 1000, // Max number of calls to store
);
```
### 2. Add Interceptor to Dio
```dart
final dio = Dio();
// Add DioSpy interceptor
dio.interceptors.add(dioSpy.interceptor);
```
### 3. Connect the Inspector UI
You have two options to display the inspector:
#### Option A: DioSpyWrapper (Recommended)
Use `DioSpyWrapper` in your `MaterialApp.builder`. No navigator key needed.
```dart
MaterialApp(
builder: (context, child) => DioSpyWrapper(
dioSpy: dioSpy,
child: child!,
),
home: MyHomePage(),
);
```
#### Option B: Navigator Key
Pass a `GlobalKey` so DioSpy can push the inspector as a route.
```dart
final navigatorKey = GlobalKey();
MaterialApp(
navigatorKey: navigatorKey,
home: MyHomePage(),
);
dioSpy.setNavigatorKey(navigatorKey);
```
### 4. Make HTTP Requests
All requests made through your Dio instance will be automatically captured!
```dart
final response = await dio.get('https://api.example.com/users');
```
### 5. Open the Inspector
- **Shake your device** - The inspector will open automatically
- **Open it programmatically** - `dioSpy.showInspector()`
- **Close it programmatically** - `dioSpy.hideInspector()`
## Complete Example
See the [example](example/) folder for a complete working app that demonstrates:
- GET, POST, PUT, DELETE requests
- Error handling
- Different response types
- Using the FakeRESTApi for testing
## Requirements
- Dart SDK: `^3.0.0`
- Flutter: `>=3.10.0`
- Dio: `>=5.2.0 <6.0.0`
## Limitations
- **In-Memory Only** - Calls are not persisted between app restarts
- **No Network Modification** - This is a monitoring tool only, it doesn't modify requests
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## Credits
Inspired by other HTTP debugging tools like Chuck (Android) and Network Inspector (iOS).