Flutter: Simplifying API Calls with Retrofit and Dio

Eren Gün
2 min readAug 2, 2023

--

img src

As a Flutter developer, an essential part of your job is to fetch, send, and manage data from an API. Retrofit and Dio are two libraries that can make this task more manageable. In this article, i will guide you on setting up a Retrofit client in your Flutter application.

What is Retrofit?

Retrofit is a type-safe HTTP client for Android and Java, which has been adapted for Dart and Flutter with the Dio package. It simplifies networking tasks by generating boilerplate code for us.

Setting up the Retrofit Client

To set up a Retrofit client, you need to define an abstract class with the API methods you want to use. Here’s an example:

import 'package:dio/dio.dart';
import 'package:retrofit/retrofit.dart';
import 'package:your_project/models/product/product_response.dart';

part 'product_rest_client.g.dart';

@RestApi(baseUrl: 'Your API Endpoint')
abstract class ProductRestClient {
factory ProductRestClient(Dio dio, {String baseUrl}) = _ProductRestClient;
@GET('/')
Future<ProductResponse> fetchProduct();
@DELETE('/{id}')
Future<void> deleteProduct(@Path('id') String id);
@POST('/')
Future<ProductResponse> createProduct(@Body() ProductCreateRequest body);
}

In this class, we’ve defined three API endpoints: one for fetching product data, one for deleting a product, and another for creating a product. Each method corresponds to an HTTP method (GET, DELETE, POST) and maps to a specific endpoint.

The @RestApi annotation marks the interface for Retrofit. The baseUrl parameter is where you put the common part of your API URL. The Dio object is passed to the ProductRestClient constructor to create an instance of the class.

The @GET, @DELETE, and @POST annotations specify the type of HTTP request. The string passed in the annotation is the endpoint for the request. The return type of the methods is Future<ProductResponse>, which will contain the response from the API.

In conclusion, Retrofit and Dio are potent tools for simplifying API calls in your Flutter applications. They provide a clean and straightforward way to manage your network requests, and we hope this article helped you understand how to set them up in your Flutter application. Stay tuned for our next article on implementing the MVVM architecture in Flutter!

--

--

Eren Gün

Hi, I'm Eren, a quick learner and developer. Passionate about tech, Flutter, Node.js. Seeking growth! 🚀