What is the use of Network Inspector plugin in Flutter? Provide examples.

Overview

There is no single "Network Inspector plugin" in Flutter. The term refers to several tools that let you inspect HTTP requests/responses in your Flutter app — from the built-in Flutter DevTools Network tab to third-party in-app inspector packages.

1. Flutter DevTools Network Tab (Built-in, Official)

The Network View is a built-in tab in Flutter DevTools. It captures HTTP, HTTPS, and WebSocket traffic automatically — no package installation needed.

How to Use (Step by Step)

textCopy
1. Run your app: flutter run
2. Open DevTools:
   - VS Code: Ctrl+Shift+P > "Dart: Open DevTools"
   - Android Studio: DevTools button in toolbar
3. Navigate to the "Network" tab
4. Recording starts automatically
5. Interact with your app — all API calls appear in the list
6. Click any request to see details

What You Can Inspect

Filtering Requests

textCopy
m:get                    → Filter by GET method
s:404                    → Filter by status code 404
t:json                   → Filter by JSON response type
my-endpoint m:post s:200 → Combined filters

Capture Startup Traffic

bashCopy
flutter run --start-paused
# Open DevTools > Network tab > Resume app

2. Dio with LogInterceptor (Console Logging)

Dio's built-in

LogInterceptor

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

final dio = Dio();
dio.interceptors.add(LogInterceptor(
  request: true,
  requestHeader: true,
  requestBody: true,
  responseHeader: true,
  responseBody: true,
  error: true,
));

// All requests logged to console
final response = await dio.get(
  'https://jsonplaceholder.typicode.com/posts/1',
);

3.

textCopy

pretty_dio_logger

(Better Console Formatting)

dartCopy
import 'package:dio/dio.dart';
import 'package:pretty_dio_logger/pretty_dio_logger.dart';

final dio = Dio()
  ..interceptors.add(
    PrettyDioLogger(
      requestHeader: true,
      requestBody: true,
      responseBody: true,
      responseHeader: false,
      error: true,
      compact: true,
    ),
  );

4.

textCopy

alice

(Full In-App HTTP Inspector)

alice

dartCopy
import 'package:alice/alice.dart';
import 'package:dio/dio.dart';

// Create Alice instance
Alice alice = Alice(
  showNotification: true,      // Notification overlay
  showInspectorOnShake: true,  // Shake to open
);

// Set navigator key in MaterialApp
MaterialApp(
  navigatorKey: alice.getNavigatorKey(),
  home: const HomeScreen(),
);

// Add Alice interceptor to Dio
final dio = Dio();
dio.interceptors.add(alice.getDioInterceptor());

// Make requests — they appear in Alice UI
await dio.get('https://jsonplaceholder.typicode.com/users');
await dio.post('https://jsonplaceholder.typicode.com/posts',
  data: {'title': 'Hello', 'body': 'World'});

// Manually open inspector
alice.showInspector();

5.

textCopy

chucker_flutter

(Cross-Platform Inspector)

Inspired by Android's Chucker — shows in-app notifications with status codes and a JSON tree view.

dartCopy
import 'package:chucker_flutter/chucker_flutter.dart';
import 'package:dio/dio.dart';

// Add navigator observer
MaterialApp(
  navigatorObservers: [ChuckerFlutter.navigatorObserver],
  home: const HomeScreen(),
);

// Add interceptor to Dio
final dio = Dio();
dio.interceptors.add(ChuckerDioInterceptor());

// Requests appear as notifications in the app
await dio.get('https://api.example.com/users');

6. Custom Dio Interceptor (Write Your Own)

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

class NetworkLogInterceptor extends Interceptor {
  @override
  void onRequest(RequestOptions options, RequestInterceptorHandler handler) {
    print('→ REQUEST[${options.method}] ${options.path}');
    print('  Headers: ${options.headers}');
    if (options.data != null) print('  Body: ${options.data}');
    handler.next(options);
  }

  @override
  void onResponse(Response response, ResponseInterceptorHandler handler) {
    print('← RESPONSE[${response.statusCode}] ${response.requestOptions.path}');
    print('  Data: ${response.data}');
    handler.next(response);
  }

  @override
  void onError(DioException err, ErrorInterceptorHandler handler) {
    print('✖ ERROR[${err.response?.statusCode}] ${err.requestOptions.path}');
    print('  Message: ${err.message}');
    handler.next(err);
  }
}

// Usage
final dio = Dio();
dio.interceptors.add(NetworkLogInterceptor());

Comparison of Network Inspection Tools

alice

chucker_flutter

pretty_dio_logger

When to Use Which

• During development/debugging → Flutter DevTools Network tab (zero setup)
• QA/testing builds →
  textCopy

  alice

  or
  textCopy

  chucker_flutter

  (in-app UI, shareable)
• Quick console logging →
  textCopy

  pretty_dio_logger

  or
  textCopy

  LogInterceptor

• Custom logging needs → Write your own Dio interceptor

Important: DevTools Network tab only works in debug mode. For inspecting network calls in release/profile builds, use in-app tools like

textCopy

alice

or

textCopy

chucker_flutter

.

Learn more at Flutter DevTools Network View and alice package.