Skip to main content

Alice

Alice hooks into your Flutter HTTP client and catches every request and response your app makes: headers, payloads, status codes, and timing. Debug API issues directly on your phone without setting up a desktop proxy.

Why Alice 1.x?​

  • Gantt Chart Timeline: Inspect concurrent and staggered HTTP calls visually to spot startup bottlenecks.
  • One-Tap Request Replay: Resend any captured request directly from the inspector UI to test token refreshes or flaky endpoints without opening Postman.
  • Actionable Stats Dashboard: Track total calls, average duration, error ratios, top 3 slowest endpoints, and largest payloads.
  • Advanced Query Search: Slice through hundreds of logs using filters like status:500, method:POST, host:api.example.com, or duration:200.
  • N+1 & Anomaly Detection: Automatically flags duplicate parallel calls and slow responses.
  • Multi-Client Adapters: Works with Dio, Retrofit, http, Chopper, GraphQL (graphql_flutter), and Dart's native HttpClient.
  • HAR & Log Sharing: Export full HAR files or share formatted request logs with your backend team from the device.

Installation​

Add alice and the adapter package for your HTTP client:

flutter pub add alice alice_dio
# Other adapters: alice_http, alice_chopper, alice_http_client, alice_graphql_client

Configuration​

Create an Alice instance with AliceConfiguration, attach your client adapters, and pass alice.getNavigatorKey() to MaterialApp so Alice can open the inspector overlay from anywhere:

import 'package:alice/alice.dart';
import 'package:alice_dio/alice_dio_adapter.dart';

final aliceDioAdapter = AliceDioAdapter();

final alice = Alice(
  configuration: AliceConfiguration(
    showNotification: true,
    showInspectorOnShake: true,
  ),
)..addAdapter(aliceDioAdapter);

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

Usage​

Dio Integration (alice_dio)​

Add AliceDioAdapter to your Dio interceptors:

import 'package:dio/dio.dart';

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

await dio.get('https://api.example.com/orders');

Standard http Package (alice_http)​

Register AliceHttpAdapter and chain .interceptWithAlice(aliceHttpAdapter):

import 'package:alice_http/alice_http_adapter.dart';
import 'package:alice_http/alice_http_extensions.dart';
import 'package:http/http.dart' as http;

final aliceHttpAdapter = AliceHttpAdapter();
alice.addAdapter(aliceHttpAdapter);

final response = await http
    .get(Uri.parse('https://api.example.com/orders'))
    .interceptWithAlice(aliceHttpAdapter);

Chopper Integration (alice_chopper)​

Register AliceChopperAdapter inside ChopperClient:

import 'package:alice_chopper/alice_chopper_adapter.dart';
import 'package:chopper/chopper.dart';

final aliceChopperAdapter = AliceChopperAdapter();
alice.addAdapter(aliceChopperAdapter);

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

GraphQL Integration (alice_graphql_client)​

Add AliceGraphQLLink to your graphql_flutter link chain:

import 'package:alice_graphql_client/alice_graphql_client.dart';
import 'package:graphql_flutter/graphql_flutter.dart';

const url = 'https://api.example.com/graphql';

final link = Link.from([
  AliceGraphQLLink(alice: alice, url: url),
  HttpLink(url),
]);

final client = GraphQLClient(
  cache: GraphQLCache(),
  link: link,
);

Tagging Requests & Opening the Inspector​

Group related calls by tag or open the inspector manually from your debug menu:

alice.tag(tag: 'checkout-flow');
await dio.post('https://api.example.com/checkout');
alice.clearTag();

// Open the inspector overlay on demand:
alice.showInspector();

Resources​