Photo by Anders Wideskott on Unsplash

Mobile application development comes often with HTTP requests. We must handle connection with external resources by doing HTTP calls and waiting for responses. When our application is getting bigger, we are using more and more requests. There is always chance that HTTP connection may fail, and we’ll want to know what was wrong.

If you’re using Flutter, there are many libraries which can handle HTTP requests: Dio, HttpClient from dart:io package, http package. You can use whatever you want in your code. But when we want to inspect these requests, we can only use console logs. Checking hundreds lines of console logs may be painful since HTTP requests/responses can be very long. The better approach to check HTTP calls can be some tool which will show HTTP request on demand, with great formatting. And here comes Alice.

Introducing Alice

Alice is a HTTP Inspector for Flutter. It’s heavily inspired from Chuck tool.

Alice overview.

Alice intercepts HTTP requests and stores them. Alice also exposes user interface for inspecting call details. Inspector can be opened from notification (which can be disabled) or manually.

Alice works best with Dio plugin, because Dio is most advanced HTTP client for Dart language. You can also use Alice with other http clients, which will be described later.

Alice Inspector refreshes when new requests come in, so list of HTTP calls will be refreshed automatically.

Installation

First, you need to add dependency to pubspec.yaml :

dependencies:

alice: ^<current alice version>

You can find current Alice version here: https://pub.dartlang.org/packages/alice

Second, run command:

$ flutter packages get

Third, add this import:

import 'package:alice/alice.dart';

Now you’re ready to use Alice plugin. Let’s create Alice instance:

Alice alice = Alice(showNotification: true);

If you don’t want to show notification when new request come in, you can set showNotification parameter to false.

Next thing is navigator key. You must include it in application to open inspector screen. What you need to do is just one line addition in MaterialApp widget ( MaterialApp is mostly root widget in your application):

navigatorKey: alice.getNavigatorKey()

Another example:

@override

Widget build(BuildContext context) {

return MaterialApp(

navigatorKey: alice.getNavigatorKey(),

...

);

}

When you’re using Dio, your configuration will be very simple:

Dio dio = Dio();

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

Dio has wonderful feature, which allows to add interceptor. Alice exposes special interceptor which must be passed to Dio instance.

Alice works best with Dio, but there is support for other http clients (not all features of Dio can be handled with these clients).

When you’re using HttpClient from dart:io package, you need to log every request and response manually:

httpClient

.postUrl(Uri.parse("https://jsonplaceholder.typicode.com/posts"))

.then((request) async {

alice.onHttpClientRequest(request, body: body);

request.write(body);

var httpResponse = await request.close();

var responseBody = await httpResponse.transform(utf8.decoder).join();

alice.onHttpClientResponse(httpResponse, request, body: responseBody);

});

You need to call alice.onHttpClientRequest and alice.onHttpClientResponse to process HTTP calls from HttpClient.

Lastly, when you’re using http package, you need to pass only response:

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

alice.onHttpResponse(response);

});

You can pass your response by calling alice.onHttpResponse .

As you can see usage of http package or HttpClient from dart:io package is little bit tricky, so i recommend using Dio for Alice

Complete example for Alice, can be find here: https://github.com/jhomlala/alice/blob/master/example/lib/main.dart

Usage

Once you’ve completed installation, you can use Alice to inspect logs. If you’ve enabled notifications, when Alice get first HTTP call, the notification will be displayed. You can click on it to start inspector.