Need help with alice?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

jhomlala
357 Stars 73 Forks Apache License 2.0 269 Commits 7 Opened issues

Description

HTTP Inspector for Flutter. Allows checking HTTP connections with UI inspector.

Services available

!
?

Need anything else?

Contributors list

# 11,060
Dart
Flutter
dart-li...
iOS
192 commits
# 98,748
Dart
Flutter
epidemi...
Firebas...
4 commits
# 224,260
Dart
Flutter
dart-li...
GraphQL
3 commits
# 475,650
Dart
Flutter
Kotlin
inspect...
2 commits
# 458,375
Dart
Flutter
inspect...
dart-li...
2 commits
# 499,161
Dart
Flutter
Kotlin
inspect...
2 commits
# 275
Dart
Objecti...
iOS
test-fr...
1 commit
# 57,802
Kotlin
runtime...
Dart
materia...
1 commit
# 135,772
Dart
Flutter
flutter...
dart-li...
1 commit
# 85,555
Clojure
Clojure...
cljs
Dart
1 commit
# 569,733
Dart
Flutter
Kotlin
inspect...
1 commit
# 251,057
Dart
Flutter
barchar...
C++
1 commit
# 395,799
Dart
Flutter
Kotlin
Shell
1 commit
# 569,734
Dart
Flutter
Kotlin
inspect...
1 commit

Alice

pub package pub package pub package

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 and Chucker.

Supported Dart http client plugins:

  • Dio
  • HttpClient from dart:io package
  • Http from http/http package
  • Chopper
  • Generic HTTP client

Features:
✔️ 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
✔️ Shake to open inspector
✔️ HTTP calls search

Install

  1. Add this to your pubspec.yaml file:
dependencies:
  alice: ^0.2.4
  1. Install it
$ flutter packages get
  1. Import it
import 'package:alice/alice.dart';

Usage

Alice configuration

  1. Create Alice instance:
Alice alice = Alice();
  1. 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(showNotification: true, navigatorKey: yourNavigatorKeyHere);

If you need to pass navigatorKey lazily, you can use:

dart
alice.setNavigatorKey(yourNavigatorKeyHere);
This is minimal configuration required to run Alice. Can set optional settings in Alice constructor, which are presented below. If you don't want to change anything, you can move to Http clients configuration.

Additional settings

You can set

showNotification
in Alice constructor to show notification. Clicking on this notification will open inspector.
dart
Alice alice = Alice(..., showNotification: true);

You can set

showInspectorOnShake
in Alice constructor to open inspector by shaking your device (default disabled):
Alice alice = Alice(..., showInspectorOnShake: true);

If you want to use dark mode just add

darkTheme
flag:
Alice alice = Alice(..., darkTheme: true);

If you want to pass another notification icon, you can use

notificationIcon
parameter. Default value is @mipmap/ic_launcher.
dart
Alice alice = Alice(..., notificationIcon: "myNotificationIconResourceName");

If you want to limit max numbers of HTTP calls saved in memory, you may use

maxCallsCount
parameter.
Alice alice = Alice(..., maxCallsCount: 1000));

If you want to change the Directionality of Alice, you can use the

directionality
parameter. If the parameter is set to null, the Directionality of the app will be used.
dart
Alice alice = Alice(..., directionality: TextDirection.ltr);

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);
});

If you're using Chopper. you need to add interceptor:

chopper = ChopperClient(
    interceptors: alice.getChopperInterceptor(),
);

If you have other HTTP client you can use generic http call interface:

dart
AliceHttpCall aliceHttpCall = AliceHttpCall(id);
alice.addHttpCall(aliceHttpCall);

Show inspector manually

You may need that if you won't use shake or notification:

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:


Extensions

You can use extensions to shorten your http and http client code. This is optional, but may improve your codebase. Example: 1. Import:

dart
import 'package:alice/core/alice_http_client_extensions.dart';
import 'package:alice/core/alice_http_extensions.dart';
  1. Use extensions:
    dart
    http
    .post('https://jsonplaceholder.typicode.com/posts', body: body)
    .interceptWithAlice(alice, body: body);
    
httpClient
    .postUrl(Uri.parse("https://jsonplaceholder.typicode.com/posts"))
    .interceptWithAlice(alice, body: body, headers: Map());

Example

See complete example here: https://github.com/jhomlala/alice/blob/master/example/lib/main.dart To run project, you need to call this command in your terminal:

bash
flutter pub run build_runner build --delete-conflicting-outputs
You need to run this command to build Chopper generated classes. You should run this command only once, you don't need to run this command each time before running project (unless you modify something in Chopper endpoints).

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.