Flutter HTTP Interceptor

Neeraj Sharma

27 April 2023

Flutter HTTP Interceptor

We are going to learn about HTTP Interceptor in Retrofit. If you have not learned Retrofit in Flutter yet then we suggest you learn our Retrofit Integration in Flutter

What/Why we use Flutter HTTP Interceptor?

In most Mobile apps we need to communicate with the server to GET/POST data by the APIs. To perform some action when any network request is going to hit the server or receiving a response from the server we need to integrate Interceptor in Retrofit.

Hmmmmm….. which type of action? 😐 These types of actions are like logging the sending API requests or Response, Add common headers, etc…

Read more about Flutter app development from mobikul.

We believe in practice so let’s start coding examples to understand Flutter HTTP Interceptor working and integration Flow.

Dio dio = Dio();

String loginKey = null;

Map<String, String> headers = <String, String>{

'Authorization': Your key here,

'Accept': 'application/json',

'lang': 'en_US'

};

dio.options.headers = headers;

dio = addInterceptors(dio);

Dio addInterceptors(Dio dio) {
    return dio
      ..interceptors.add(InterceptorsWrapper(
          onRequest: (RequestOptions options) => requestInterceptor(options),
          onResponse: (Response response) => responseInterceptor(response)));
  }

/**
   * Log the request on console
   */
  dynamic responseInterceptor(Response response) async {
    debugPrint(response.statusCode.toString() +
        "--> ${response.request.method != null ? response.request.method.toUpperCase() : 'METHOD'} ${"" + (response.request.baseUrl ?? "") + (response.request.path ?? "")}");

if (response.data != null) {
      log("response: ->${response.data.toString()}");
    }
  }

/**
   * Log the request on console
   */
  requestInterceptor(RequestOptions options) {
    debugPrint(
        "--> ${options.method != null ? options.method.toUpperCase() : 'METHOD'} ${"" + (options.baseUrl ?? "") + (options.path ?? "")}");
    print("Headers:");
    options.headers.forEach((k, v) => print('$k: $v'));
    if (options.queryParameters != null) {
      print("queryParameters:");
      options.queryParameters.forEach((k, v) => print('$k: $v'));
    }
    if (options.data != null) {
      print("Body: ${options.data}");
    }
    print(
        "--> END ${options.method != null ? options.method.toUpperCase() : 'METHOD'}");
  }

Dio addInterceptors(Dio dio) {

return dio

..interceptors.add(InterceptorsWrapper(

onRequest: (RequestOptions options) => requestInterceptor(options),

onResponse: (Response response) => responseInterceptor(response)));

}

/**

* Log the request on console

dynamic responseInterceptor(Response response) async {

debugPrint(response.statusCode.toString() +

"--> ${response.request.method != null ? response.request.method.toUpperCase() : 'METHOD'} ${"" + (response.request.baseUrl ?? "") + (response.request.path ?? "")}");

if (response.data != null) {

log("response: ->${response.data.toString()}");

}

/**

* Log the request on console

requestInterceptor(RequestOptions options) {

debugPrint(

"--> ${options.method != null ? options.method.toUpperCase() : 'METHOD'} ${"" + (options.baseUrl ?? "") + (options.path ?? "")}");

print("Headers:");

options.headers.forEach((k, v) => print('$k: $v'));

if (options.queryParameters != null) {

print("queryParameters:");

options.queryParameters.forEach((k, v) => print('$k: $v'));

}

if (options.data != null) {

print("Body: ${options.data}");

}

print(

"--> END ${options.method != null ? options.method.toUpperCase() : 'METHOD'}");

}

Let me explain! We are using DIO to use Interceptor in the Retrofit. First of all, we add some common headers in the Deo object these headers will automatically add to your all APIs.
After we use the addInterceptor() function to logging the request/response in console. InterceptorsWrapper class has many functions and onRequest and onResponse are two from them which we used in the above code.onRequest will be called when any API hit to log the request details in Logcat and the same for Response onResponse will be called.

Note -: You can add the common attributes from the interceptor Either GET/POST or any other API.

You can take reference – https://github.com/flutterchina/dio/#interceptors

To see more interesting Flutter blogs – https://mobikul.com/category/flutter/

Happy Coding <:)…/>

I hope this blog will help you to integrate HTTP Interceptor in Flutter, For any query comment down!

Thank you