NetPeek Flutter

NetPeek Flutter is a professional network logging tool designed for Flutter applications. It provides a real-time log of network requests, allowing developers to inspect headers, bodies, and status codes directly within the application using a draggable overlay.

Screenshots

Features

• Real-Time Logging: Capture and display network activity as it happens.
• Dio Integration: Seamless support for the Dio HTTP client via a dedicated interceptor.
• Interactive Overlay: Access logs through a draggable floating action button that remains accessible throughout the app.
• Detailed Inspection: View comprehensive details for every request and response, including headers and payload bodies.
• Built-in JSON Viewer: Navigate complex JSON responses with an integrated tree-style viewer.
• Search and Filter: Quickly find specific requests by URL path or HTTP method.

Installation

Add netpeek_flutter to your pubspec.yaml file:

dependencies:
  netpeek_flutter: ^1.0.0

Then run:

flutter pub get

Usage

1. Register the Interceptor

Add the NetPeekInterceptor to your Dio instance to begin capturing network traffic:

import 'package:dio/dio.dart';
import 'package:netpeek_flutter/netpeek_flutter.dart';

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

2. Attach the Overlay

Inject the NetPeek overlay into your application. This is typically done in the builder of your MaterialApp or once your app's main screen has loaded:

import 'package:flutter/material.dart';
import 'package:netpeek_flutter/netpeek_flutter.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) {
        return Stack(
          children: [
            if (child != null) child,
            Builder(
              builder: (innerContext) {
                // Attach the FAB overlay after the first frame
                WidgetsBinding.instance.addPostFrameCallback((_) {
                  NetPeek.attach(innerContext);
                });
                return const SizedBox.shrink();
              },
            ),
          ],
        );
      },
      home: const HomeScreen(),
    );
  }
}

Customization

NetPeek is designed to stay out of your way until needed. The floating action button can be dragged to any position on the screen, and its state is persisted during the session.

Additional Information

Contributing

Contributions are welcome. If you encounter bugs or have feature requests, please open an issue on the GitHub repository.

Issues

Please report any issues or suggest improvements through the official GitHub Issue Tracker.

License

This project is licensed under the MIT License - see the LICENSE file for details.