Flutterexperts

Tracing network calls in flutter is not an inbuilt feature where you observe and read your network requests, however, flutter provides testing and observation feature for UI and facilitating testing only for widgets makes it an ill-equipped framework, however, Flutter is now on the ground with DevTools where it provides accessing network request easy but there are also different techniques to do the same. so in order to full fill our requirement we use some techniques to sort it out.

Is Tracing Call Necessary?

As you know to make the request and receiving network call is a necessity for app development as there is nothing possible without exchanging data and it is important to observe data flow that’s why Tracing Network call is Necessary.

How Can We do this?

There are multiple techniques to do it like Devtools, Alice, Flipper, debug Proxy to trace network calls, and today we learn some of them so let’s see how to do it.

1. DevTools :

DevTools is a suite of performance and debugging tools for Dart and Flutter. It’s currently in beta release but is under active development. now the question is what we can do with the DevTools, so there are various features we can do with it

• Inspect the UI layout and state of a Flutter app.
• Diagnose UI jank performance issues in a Flutter app.
• CPU profiling for a Flutter or Dart app.
• Network profiling for a Flutter app.
• Source-level debugging of a Flutter or Dart app.
• Debug memory issues in a Flutter or Dart command-line app.
• View general log and diagnostics information about a running Flutter or Dart command-line app.

How to Use it

for using it in your flutter application first use need to install dev tools in your project for this you need to run this command in your terminal

flutter pub global activate devtools

it installs all required setup for your app, now you need to launch DevTools application server by running the command

flutter pub global run devtools

now you will find something like this in your commands, this is a local server of DevTools where you need to put a link to connect your app

and by clicking on the local server you will find this window

then start your application for debugging by running this command

flutter run

here you will find the link which you need to fill in that browser window which was opened by that local server host

 http://127.0.0.1:50976/Swm0bjIe0ks=/

you need to put this kind of URL into that DevTools folder and you will find this kind of window.

here you can inspect all available features like with tools like performance, debugger, network, and many more. Here it is the network tracing feature of it

here in the image, you can see all the requests and received responses to the app and everything which you need to know can be accessed easily.so it was a general introduction and installing of DevTools and working on it.

2. Alice:

Alice is an HTTP inspector for Flutter and based like Chuck-tools. Alice basically Alice intercepts and exposes the interface of inspecting call details of HTTP calls. you can open the inspector from notification which we receive when we make network calls. If I talk about the best suitability and work easiness then it is best suited for Dio plugin because Dio is the most advanced HTTP client for Dart language however Alice can also be used with other HTTP clients and it gets refreshed every time when new requests come.

How to install it

First, you need to install Alice by adding a dependency in yaml file

dependencies:
  alice: 

then run command

$ flutter packages get

and import this into your dart file

import 'package:alice/alice.dart';

now you are ready to use Alice so firstly you need to create an instance of it

Alice alice = Alice(showNotification: true, darkTheme: false,navigatorKey: navigationKey);

there are different options like notification, dark theme, and navigation key you can customize these things according to you as if you want to see the notification when a request comes in then true else false, same as with the dark theme and navigation key is important because it opens the inspector screen let’s see how and where we use navigation key.

Navigation is used in the material widget when you create your own unique global key and use it into the material widget.

GlobalKey<NavigatorState> navigationKey = GlobalKey<NavigatorState>();

after creating a global key we use it into the material widget

MaterialApp(
  navigatorKey: navigationKey,
  debugShowCheckedModeBanner: false,
  title: 'Flutter PWA',
  theme: ThemeData(
    brightness: Brightness.light,
    primarySwatch: Colors.blue,
    visualDensity: VisualDensity.adaptivePlatformDensity,
  ),
  darkTheme: ThemeData(brightness: Brightness.dark),
  home: HomePage(),
);

now you need to go the methods where you are making network calls if it is Dio then it is very easy to use it.

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

Dio consists of special feature which allows it to add interceptors with ease and it exposes special interceptors which you need to be pass to Dio instance.

as most of the people generally use HTTP to make network calls so if you want to use Alice with HTTP you need to log every request and response manually.

Here are some examples :

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 have other HTTP clients you can use a generic HTTP call interface:

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

if you have set your notification off and you want to access the inspector then you can use this method to open the inspector.

alice.showInspector();

You can find the complete example from here

alice | Flutter Package
Alice is an HTTP Inspector tool for Flutter which helps debugging http requests. It catches and stores http requests…pub.dev

so if you are done with this installation now its time to test the setup so once we run our app we get the notification in the device and after clicking on it we navigate to the screen where we find

here in the image, it is showing a network request made by the app and you can see the whole status of it by click on it, here when you click on the request you get 4 tabs for different pieces of information

Details of Tabs :

Overview: It shows the general information of HTTP call like methods, endpoint, request, and response time, amount of bytes and duration, connection security.

Request: It shows details of the HTTP request as time, request body and headers, amount of bytes sent, content type,

Response: It shows details of the HTTP response as time, amount of bytes received, status code, response body, and headers.

Error: It shows information about the error if any occurred, this tab will show errors only when you’re using Dio plugin

we also get different options of delete, stats, and save when we click on the toolbar we can use according to need.

Conclusion

In this article, we have discussed two techniques to intercept network call in the flutter where DevTools is official Flutter feature both have there own advantages and disadvantages in DevTools you don’t need to write the code for setup and you can easily do your work and it also provides features to inspect your UI and widgets while in the Alice you need to set up everything but once you get installed it, it becomes easy to use you can inspect each and everything on your respective devices.

So here only two techniques have been explained and all remaining techniques will be covered in upcoming blogs so stay connected with us. Thanks.

---

If this article has helped you a bit and found interesting please clap!👏

Thanks for reading this article if you find anything that could be improved please let me know, I would love to improve.💙

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.