moyu-corax/alice

HTTP Inspector for Flutter

Alice

Alice is an HTTP Inspector tool for Flutter which helps debugging http requests. It catches and stores http requests and responses, which can be viewed via simple UI. It is inspired from Chuck ( https://github.com/jgilfelt/chuck ).

Suported Dart http client plugins:

• HttpClient from dart:io package
• Http from http/http package

Features:
✔️ Automatic dark theme
✔️ Detailed logs for each HTTP calls (HTTP Request, HTTP Response)
✔️ Inspector UI for viewing HTTP calls
✔️ Save HTTP calls to file
✔️ Statistics
✔️ Notification on HTTP call
✔️ Support for top used HTTP clients in Dart
✔️ Error handling
✔️ No useless functions

Install

1. Add this to your pubspec.yaml file:

dependencies:
  alice:
    git:
      url: https://github.com/CustedNG/alice.git
      ref: master

2. Install it

$ flutter packages get

3. Import it

import 'package:alice/alice.dart';

Usage

Alice configuration

Create Alice instance:

Alice alice = Alice();

Add navigator key to your application:

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

You need to add this navigator key in order to show inspector UI. You can use also your navigator key in Alice:

Alice alice = Alice(navigatorKey: yourNavigatorKeyHere);

HTTP Client configuration

If you're using Dio, you just need to add interceptor.

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

If you're using HttpClient from dart:io package:

httpClient
	.getUrl(Uri.parse("https://jsonplaceholder.typicode.com/posts"))
	.then((request) async {
		alice.onHttpClientRequest(request);
		var httpResponse = await request.close();
		var responseBody = await httpResponse.transform(utf8.decoder).join();
		alice.onHttpClientResponse(httpResponse, request, body: responseBody);
 });

If you're using http from http/http package:

http.get('https://jsonplaceholder.typicode.com/posts').then((response) {
    alice.onHttpResponse(response);
});

To show inspector manually:

alice.showInspector();

Saving calls

Alice supports saving logs to your mobile device storage. In order to make save feature works, you need to add in your Android application manifest:

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Example

See complete example here: https://github.com/jhomlala/alice/blob/master/example/lib/main.dart