“This is the 8th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021”

Functional view

Today we are going to take a look at how the network debugging function is implemented. First, we will see what the function is like. When we make a network request through DIO, we will record the information of the network request

So today is divided into two parts to look at the source code the first part is through what way to record each interface request data, the second is each interface request data is displayed

The source code to view

The code I looked at today is in Flutter_ume_kit_dio

Data records

Dart registration requires passing in the dio object and adding interceptors to dio so that the http_interceptor.dart is available You can override the onRequest, onResponse, and onError methods and store the response in httpContainer

At this point we have the response for all the network requests, and now the data logging code is finished. Let’s look at the data display code

The data show

Data to demonstrate the code in pluggable_state dart, through InspectorInstance. HttpContainer. PagedRequests get all the response information, So in ResponseCardState we have a get method that gets the information

Response<dynamic> get _response => widget.response; RequestOptions get _request => _response.requestOptions; /// The start time for the [_request]. DateTime get _startTime => _response.startTime; /// The end time for the [_response]. DateTime get _endTime => _response.endTime; /// The duration between the request and the response. Duration get _duration => _endTime.difference(_startTime); /// Status code for the [_response]. int get _statusCode => _response.statusCode ?? 0; /// Colors matching status. Color get _statusColor { if (_statusCode >= 200 && _statusCode < 300) { return Colors.lightGreen; } if (_statusCode >= 300 && _statusCode < 400) { return Colors.orangeAccent; } if (_statusCode >= 400 && _statusCode < 500) { return Colors.purple; } if (_statusCode >= 500 && _statusCode < 600) { return Colors.red; } return Colors.blueAccent; } /// The method that the [_request] used. String get _method => _request.method; /// The [Uri] that the [_request] requested. Uri get _requestUri => _request.uri; /// Data for the [_request]. String? get _requestDataBuilder { if (_request.data is Map) { return _encoder.convert(_request.data); } return _request.data? .toString(); } /// Data for the [_response]. String get _responseDataBuilder { if (_response.data is Map) { return _encoder.convert(_response.data); } return _response.data.toString(); }Copy the code

Today’s network request function is introduced, or relatively simple,UI related code is not introduced, if there is no clear place can look at the source code

conclusion

Ok, today’s source view is over here, as a student of Flutter, I hope you can give me more advice and discuss with me where there are problems