Skip to main content

Alice

Alice is a comprehensive HTTP Inspector for Flutter. It catches and stores all HTTP requests and responses, allowing you to view and debug network traffic directly within your application via a simple and intuitive UI.

Key Features​

  • Detailed Logging: Inspect full request/response headers, body, query parameters, and error details.
  • Inspector UI: Dedicated interface to search, filter, and share HTTP logs.
  • Shake to Open: Open the inspector instantly by shaking your device.
  • Multi-Client Support: Seamless integration with Dio, Chopper, Http package, and native HttpClient.
  • Statistics & Search: View network activity stats and search through captured logs easily.
  • Notifications: Get real-time notifications for each outgoing request.

Installation​

Add Alice to your pubspec.yaml:

dependencies:
  alice: ^latest_version

Then run:

flutter pub get

Configuration​

To use Alice, create an instance and provide its navigatorKey to your MaterialApp. This key is required for Alice to navigate to the inspector UI.

Alice alice = Alice(
  showNotification: true, 
  showInspectorOnShake: true, 
  darkTheme: true,
);

MaterialApp(
  navigatorKey: alice.getNavigatorKey(),
  home: HomePage(),
);

Usage​

Using with Dio​

Dio integration is the most common use case. Simply add Alice's interceptor to your Dio instance.

import 'package:dio/dio.dart';

final dio = Dio();
dio.interceptors.add(alice.getDioInterceptor());

// Requests will now automatically appear in Alice
await dio.get("https://api.example.com/data");

Using with Http package​

For the standard http package, you can use Alice's extension methods or manually log responses.

import 'package:http/http.dart' as http;

// Using extension method
final response = await http
    .get(Uri.parse('https://api.example.com/data'))
    .interceptWithAlice(alice);

// Manual logging
final manualResponse = await http.get(Uri.parse('https://api.example.com/data'));
alice.onHttpResponse(manualResponse);

Using with Chopper​

Add Alice's interceptor during ChopperClient initialization.

import 'package:chopper/chopper.dart';

final chopper = ChopperClient(
  baseUrl: Uri.parse("https://api.example.com"),
  interceptors: [alice.getChopperInterceptor()],
  services: [/* your services */],
);

Advanced Features​

Manual UI Trigger​

You can open the Alice inspector UI manually (e.g., from a developer menu) using:

alice.showInspector();

Sharing Logs​

From the inspector UI, you can share the details of specific HTTP calls or entire log files with other team members via email or messaging apps.

Resources​