Flutter: Network Layer
One of the major topics to be faced when we are creating mobile applications is how to build a solid network layer which enables us to retrieve and represent data in an easy as well as reusable way.
A challenging problem which arises in this domain is to avoid boilerplate code as long as our project grows in size. The number of operations to perform might become huge so our aim is to develop extendable solid bases.
For this tutorial, we are going to focus on HTTP Dart package with the goal of wrapping its APIs within a custom Network Layer for our projects.
In the following sections, we explain the components which will define our layer and finally we are going to expose an example to test our code.
HTTP Request
One of the key components of the layer is the Request object. It contains the entire information related to the operations we want to perform in our destination resource.
In our layer, we will define an interface called ServiceProtocol which will define a set of rules that our requests need to follow in order to accomplish the HTTP Protocol:
- baseUrl: Base location for all of our resources (e.g. https://jsonplaceholder.typicode.com).
- path: Concrete location for our resource (e.g. /posts).
- method: HTTP defines methods, commonly known as verbs. Those methods indicate an action to be performed on a resource (e.g. POST, GET).
- headers: Essential information for the ongoing transaction (e.g. how the content will be encoded).
- parameters: If apply, the body parameters for our request.
- contentEncoding: Either URL or JSON. It defines how the body will be encoding in order to send the information to the destination resource.
Once the protocol has been defined, we can implement a class which works with it. To that end, we wrap the request into an object (HttpRequest).
HttpRequest will extend Dart’s base Request class and it will use the information provided by this protocol in order to describe the desired request.
HTTP Session
With this in mind, we can move forward and create our session object which will be responsible for sending the request. To that end, HttpSession object will open a communication channel with the destination resource.
We will define another rule to describe the way this object requests the resource to the destination.
HttpSession object will perform this protocol coupled with defining the logic to process the response:
HTTP Response
Whenever the destination resource performs the pertinent operations and responds with the desired content, the transaction completes.
We need to deal with the content in a certain way to satisfy the rules we have defined previously. To that end, we need to apply some data transformations.
To do so, we use the decode functionality provided by JSON Dart library. Once the data is ready, we will use polymorphism alongside generics, to translate this information to our application domain.
Request/Response Mapping
On this side, Mappers will perform data transformation between those two domains:
Class diagram
Example
To give an illustration of how this layer works, we will use this popular fake REST API for testing and prototyping.
Let’s look at the following example:
Firstly, we will create our request model. This class will extend our RequestMapable defined previously:
Secondly, we will add our response model. In the same way as request model. By contrast, response model will extend ListMapable since our JSON response has the following structure:
Thirdly, we will create and configure our service. To that end, we create a PostService class which will extend HttpRequestProtocol class:
Finally, our service is ready to be consumed:
You can download the entire project here: Github project.
Conclusion
All things considered, although this article may not describe the perfect solution, it is a good starting base that gives the programmer something solid and reusable.
Since we are not using 3rd party libraries, it is easy to investigate new features/details and add them to the correspondent classes without affecting the scope of our application.
In the meantime, if you have a suggestion as well as corrections, don’t hesitate to contact me at:
Or feel free to drop your comments below.
Happy coding! :)
