Networking in Flutter using Dio

Networking is a process to connect your app to remote servers or local servers with the help of internet. It allows to share data and information between client and server.

In flutter/Dart application to perform networking requests there are multiple clients available such as HTTP, Retrofit, & Dio. For today’s blog we are going to use Dio package it provide efficient API for making HTTP requests and support global configuration, interceptors, FormData, connection and receiver timeout features.

Check our Flutter app development services page.

Implementation

First Create a new flutter project and then add following dependency package in pubspec.yaml file

Dio :- For making HTTP requests.

Testing Example API

For testing dio network client we will use REQRES free API, and will fetch the list of users from the URL endpoint.

Creating model class

We will get the response as below for a single user details when the request is successful.

Create a model class for the user data with the help of response, model classes helps to handle data returned from REST API easily in flutter.

@JsonSerializable :- annotation to generate toJSON and fromJSON code for the classes.

part :- dart file named user_model.g.dart is created automatically when the build_runner command run in the terminal it contains autogenerated codes.

@JsonKey :- define the name key same as the keys received in Map object as response.

Initialize Dio client

Create a separate class to initialize the dio client as below.

getClient() :- Initialize the global dio client and return the dio object.

getUsers() :- call the GET API using dio and return the response.

Add interceptors and common headers

we will add common headers and interceptors to dio client as below inside getClient method to initialize the dio client.

Interceptors :- helps to Log the request and response in the console every time when the API is called, to verify the request body, headers, params send by the client to server and response body & headers received from server.

Headers :- send additional information about the request such as content-type, authorization token and Accepted response type to the server.

Connection timeout :- The time period within which the connection must be establised between the client and server after which the dio client cancel the connection and throw exception if it failed.

Receive timeout :- The time period within which the server should send the response back to client.

Interceptors Logs in console

Request body and headers printed as below inside console when the API is called.

Response body printed as below in console when the server send response.

Performing multiple Future call

First create new method inside dio client class to call multiple APIs and this method will return future List of Response.

Create User interface

create a stateful widget to create UI and display the list of users after getting successful response.

initState() :- initialize the dio client inside initstate and call the API to get users list from the server.

Output

Conclusion

Thanks for reading this article ❤️

I hope this blog will help you to learn about how to perform networking using dio in flutter and you will be able to implement it. For more updates, make sure to keep following Mobikul Blogs to learn more about flutter and android.

Happy Learning ✍️

For more interesting blogs you can check out https://mobikul.com/blog/

Reference

https://blog.logrocket.com/networking-flutter-using-dio/