How to send path in Retrofit in flutter?

Vandana Sharma

27 April 2023

In this blog, we will learn “how to send path in retrofit in flutter?”.

Before starting the code implementation, I am giving you a brief description of the blog topic.

Retrofit is the easiest way to call rest API’s in flutter. But it’s quite confusing to send path in retrofit.
I will make it clear in this blog.

Read more about Flutter app development from mobikul.

Implementation

For sending path in retrofit in flutter, I am assuming that you have basic knowledge of simple API callings in retrofit.

Let’s start the code implementation.

Step 1:-Add dependencies

Add all the basic dependencies necessary for the retrofit method in the flutter.

In your pubspec.yaml file, add the following dependencies.

//In your dependencies add the following

dependencies:

flutter:

sdk: flutter

retrofit: ^2.0.1

//In your dev_dependencies add the following

dev_dependencies:

flutter_test:

sdk: flutter

build_runner: ^2.1.4

retrofit_generator: ^2.0.1+1

built_value_generator: ^8.1.2

json_serializable: ^5.0.2

Step 2:-Code Impementation

As you know that all the APIs are added in the APiClient file in retrofit flutter.

Let’s add the path in the dummy API.

I am taking a dummy base URL and end URL. you can add your own.

Suppose we are sending the product id as the path.so, we need to add the correct key of product id.

for example, here the key is “product_id” of product Id.

//ApiClient file

part 'ApiClient.g.dart';

const String BASE_URL="base_url.com";

@RestApi(baseUrl:BASE_URL)
abstract class ApiClient {
  factory ApiClient({String? baseUrl}){
    Dio dio = Dio();
    dio.options = BaseOptions(
        receiveTimeout: 50000, connectTimeout: 50000, baseUrl: BASE_URL);
    dio.options.headers["Content-Type"] = "application/json";

dio.interceptors.add(LogInterceptor(
        request: true,
        requestBody: true,
        requestHeader: true,
        responseBody: true,
        responseHeader: true)
    );
    dio.interceptors.add(InterceptorsWrapper(
        onRequest: (options, handler) {
          return handler.next(options);
        },
        onResponse: (response, handler) {
          log("interceptor" + response.data.toString());
          return handler.next(response);
          },
        onError: (DioError e, handler) {
          return handler.next(e);
    ));
    return _ApiClient(dio, baseUrl: baseUrl);
  }
@POST("endUrl/data/{product_id}) 
Future<DummyModel> apiCall( @Path("product_id") 
int productId,//the path we want to add in the api. 
@Query("token") String customerToken, 
@Query("channel_id") String channelId, 
@Query("params") Map<String,dynamic> params, );

//ApiClient file

part 'ApiClient.g.dart';

const String BASE_URL="base_url.com";

@RestApi(baseUrl:BASE_URL)

abstract class ApiClient {

factory ApiClient({String? baseUrl}){

Dio dio = Dio();

dio.options = BaseOptions(

receiveTimeout: 50000, connectTimeout: 50000, baseUrl: BASE_URL);

dio.options.headers["Content-Type"] = "application/json";

dio.interceptors.add(LogInterceptor(

request: true,

requestBody: true,

requestHeader: true,

responseBody: true,

responseHeader: true)

);

dio.interceptors.add(InterceptorsWrapper(

onRequest: (options, handler) {

return handler.next(options);

onResponse: (response, handler) {

log("interceptor" + response.data.toString());

return handler.next(response);

onError: (DioError e, handler) {

return handler.next(e);

));

return _ApiClient(dio, baseUrl: baseUrl);

}

@POST("endUrl/data/{product_id})

Future<DummyModel> apiCall( @Path("product_id")

int productId,//the path we want to add in the api.

@Query("token") String customerToken,

@Query("channel_id") String channelId,

@Query("params") Map<String,dynamic> params, );

Step 3:-Run the command

now the following retrofit command in your terminal.

Retrofit flutter command needs to run after add API:–“flutter packages pub run build_runner build“.

Step 4:-OutPut after running the command

you will get the following output after the successful result of the command in the retrofit flutter.

Congratulations!!!! you have learned that how to send path in retrofit.

For more details and methods you can refer to the official doc of flutter here.

For more interesting blogs check out here – https://mobikul.com/blog/

Hope this blog helped you with a better understanding that how to send path in Retrofit in flutter?

Thanks for reading.😇