Chuck

Need anything Flutter related? Reach out on LinkedIn

ChuckInterceptor 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

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
✔️ Enhanced error handling with comprehensive recovery
✔️ Shake to open inspector
✔️ HTTP calls search and filtering
✔️ Performance optimized with memory management
✔️ Comprehensive unit test coverage
✔️ Curl command generation for easy debugging

Install

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

Usage

Chuck configuration

  1. Create chuck instance:

Chuck chuck = Chuck();
  1. Add navigator key to your application:
MaterialApp
(
navigatorKey: chuck.getNavigatorKey(), home: ...)

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


Chuck chuck = Chuck(showNotification: true, navigatorKey: yourNavigatorKeyHere);

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

chuck.setNavigatorKey(yourNavigatorKeyHere);

This is minimal configuration required to run Chuck. Can set optional settings in Chuck constructor, which are presented below. If you don't want to change anything, you can move to Http clients configuration.

Additional settings

You can enable/disable Chuck dynamically (e.g. disable in production builds for zero overhead):

Chuck chuck = Chuck(
  enabled: kDebugMode, // Completely short-circuits in production
  showNotification: true,
  maxBodySize: 1024 * 1024, // 1 MB max payload body size
);

You can set showNotification in Chuck constructor to show notification. Clicking on this notification will open inspector.

Chuck chuck = Chuck(showNotification: true);

You can set showInspectorOnShake in Chuck constructor to open inspector by shaking your device (default disabled):

Chuck chuck = Chuck(showInspectorOnShake: true);

If you want to use dark mode just add darkTheme flag:

Chuck chuck = Chuck(darkTheme: true);

You can also customize the entire palette using ChuckThemeExtension:

MaterialApp(
  theme: ThemeData.light().copyWith(
    extensions: [
      ChuckThemeExtension.light.copyWith(
        accent: Colors.deepPurple,
        methodGet: Colors.teal,
      ),
    ],
  ),
  navigatorKey: chuck.getNavigatorKey(),
  ...
);

If you want to pass another notification icon, you can use notificationIcon parameter. Default value is @mipmap/ic_launcher.

Chuck chuck = Chuck(notificationIcon: "myNotificationIconResourceName");

If you want to limit max numbers of HTTP calls saved in memory, you may use maxCallsCount parameter (default is 1000).

Chuck chuck = Chuck(maxCallsCount: 500);

If you want to change the Directionality of Chuck, you can use the directionality parameter. If the parameter is set to null, the Directionality of the app will be used.

Chuck chuck = Chuck(directionality: TextDirection.ltr);

HTTP Client configuration

Dio

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

Dio dio = Dio();
dio.interceptors.add(chuck.dioInterceptor);

HttpClient (dart:io)

If you're using HttpClient from dart:io:

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

http package

If you're using http from package:http:

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

Generic HTTP Client / Chopper

If you have other HTTP clients, you can use the generic HTTP call interface:

ChuckHttpCall chuckHttpCall = ChuckHttpCall(id);
chuckHttpCall.request = ChuckHttpRequest();
chuckHttpCall.response = ChuckHttpResponse();
chuck.addHttpCall(chuckHttpCall);

Show inspector manually

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

chuck.showInspector();

Saving and Sharing calls

Chuck supports saving and sharing HTTP call logs directly via the system share sheet (share_plus). No storage permissions (WRITE_EXTERNAL_STORAGE) are required.

Extensions

You can use extensions to shorten your http and http client code:

import 'package:chuck_interceptor/chuck_interceptor.dart';

// http package extension
http.post(Uri.parse('https://jsonplaceholder.typicode.com/posts'), body: body)
    .then((response) => chuck.onHttpResponse(response, body: body));

// HttpClient extension
httpClient.postUrl(Uri.parse("https://jsonplaceholder.typicode.com/posts"))
    .interceptWithChuck(chuck, body: body, headers: {});

Example

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

flutter pub run build_runner build --delete-conflicting-outputs

Libraries

chuck_interceptor