How to inspect network calls in flutter application - flutter

Question

I'm making network calls in flutter by using HTTP package, i want to know which type of response is getting for those calls

Answer 1

In Flutter 17.1 version, they given cool feature for inspecting the Network calls,
open developer tools by tapping on open DevTools icon (which is in debug console of android studio) as show in below image
After that it will the install the tools and open Dart dev tools in a browser as shown in below image
Click on the right side top corner flask icon(which is highlighted in the above image),
it will refresh the page automatically and display the Network option in the tool bar as show in below image
Now you can inspect your each and every call

Answer 2

Use flutter_stetho dart package to inspect network calls
Visit https://pub.dev/packages/flutter_stetho
Include this to your package's pubspec.yaml
dependencies:
flutter_stetho:(version) >> for example flutter_stetho: ^0.4.1
Note: Based on dart version only, choose the Stetho package version
For Flutter 1.7.x with Dart 2.4, use version 0.3.0
For Flutter 1.8.x+ with Dart 2.5, use version 0.4.0 or higher

Answer 3

You can use devtools network inspector:
Open command platte
Search for openDevToolsNetwork

Answer 4

This is an example of me that returns a list of hotels from web service:
List<Hotel> list = list();
var res = await http.get('http://api-dadepardazan.nikoosoft.ir/api/cms/hotels',
headers: {"Access-Token": "bt316x312ba44c6183aa81c2ce0d3eff", "Client-Id":"20629heeba32cc87fra6637b257d73"});
if (res.statusCode == 200) {
try {
var data = json.decode(res.body);
var rest = data["result"];
for (var model in rest) {
list.add(Hotel.fromJson(model));
}
print('list loaded from web service');
} on FormatException catch (e) {
print("That string didn't look like Json.");
} on NoSuchMethodError catch (e) {
print('That string was null!');
}
} else {
print('Failed to call service');
}

Answer 5

You can use charles download here
Now add proxy in wifi connection in real device (No need to do for simulator or emulator).
Now do below code to configure setup with flutter Dio package.
Dio dio = new Dio();
(dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate =
(HttpClient client) {
client.findProxy = (uri) {
return "PROXY <Your_PC_IP_Where_Charles_is_running>:8888";
};
client.badCertificateCallback =
(X509Certificate cert, String host, int port) => true;
};

Answer 6

If you just want to know what the reponse.body is I don't think that you need a separate library to inspect network calls in Flutter when you already have an powerful http library by the official Flutter Dev Team.
Sample Code:
http.get("http://api.urbandictionary.com/v0/define?term=stackoverflow").then((response){
print("Status Code: ${response.statusCode}");//200 if successful
print("Response Body: ${response.body}");
// You can examine the response object either by referring the docs or using he suggestions you get in Android Studio / VS Code
})

Answer 7

The typical way to inspect network traffic from mobile apps is via a proxy. A superb tool for this is Charles Proxy.
Once you have Charles set up you don't actually need any additional Flutter plugins or packages to get it working, but you do need to set up Flutter to route through your local proxy (unfortunately Flutter ignores your device settings):
class MyProxyHttpOverride extends HttpOverrides {
#override
HttpClient createHttpClient(SecurityContext context) {
return super.createHttpClient(context)
..findProxy = (uri) {
return "PROXY localhost:8888;";
}
..badCertificateCallback =
(X509Certificate cert, String host, int port) => true;
}
}
// In your main.dart
HttpOverrides.global = MyProxyHttpOverride();
Of course, you'll need to change localhost:8888 to whatever your proxy settings are.
I also wrote a more detailed write up about this solution here.

Answer 8

You can use request_inspector to see you request