Using Dio in Flutter: A Comprehensive Guide

Dio is an HTTP client for Dart that simplifies working with APIs and performing HTTP requests. Built on top of Dart’s HttpClient, Dio offers powerful and flexible features, making API communication seamless in Flutter applications. In this tutorial, we’ll explore how to use Dio effectively and leverage its features.

Step 1: Installing Dio

To get started, add the Dio package to your Flutter project’s pubspec.yaml file:

dependencies:
  dio: ^5.4.0

Run the following command to install the package:

flutter pub get

Step 2: Making HTTP Requests with Dio

Dio provides an easy-to-use API for making HTTP requests. Here’s how to make a simple GET request using Dio:

final dio = Dio();
final response = await dio.get('https://jsonplaceholder.typicode.com/todos/1');
print(response.data);

Similarly, you can perform a POST request:

final dio = Dio();
final response = await dio.post(
  'https://jsonplaceholder.typicode.com/posts',
  data: {
    'title': 'My post',
    'body': 'This is my post content',
    'userId': 1,
  },
);
print(response.data);

Dio also supports PUT, DELETE, and other HTTP methods, making API interactions versatile.

Step 3: Using Interceptors

Interceptors allow modifying requests and responses before they are processed. They are useful for adding headers, handling errors, or logging requests.

final dio = Dio();
dio.interceptors.add(
  InterceptorsWrapper(
    onRequest: (options, handler) {
      options.headers['Authorization'] = 'Bearer my_token';
      return handler.next(options);
    },
  ),
);
final response = await dio.get('https://jsonplaceholder.typicode.com/todos/1');
print(response.data);

Step 4: Cancelling Requests

Dio provides cancellation tokens to cancel ongoing HTTP requests if they are no longer needed.

final dio = Dio();
final cancelToken = CancelToken();

final response = await dio.get(
  'https://jsonplaceholder.typicode.com/todos/1',
  cancelToken: cancelToken,
);
print(response.data);

// Cancel the request
cancelToken.cancel('Request cancelled');

Step 5: Handling Errors

Dio makes error handling straightforward by allowing you to intercept and manage errors globally.

final dio = Dio();
dio.on(DioError, (error, handler) {
  print('Request failed with error: ${error.message}');
  return handler.next(error);
});

final response = await dio.get('https://jsonplaceholder.typicode.com/todos/999');
print(response.data);

Conclusion

Dio is a powerful and flexible HTTP client for Dart and Flutter applications. In this tutorial, we covered:

• Installing and setting up Dio
• Making HTTP requests (GET, POST, etc.)
• Using interceptors for modifying requests
• Cancelling requests when needed
• Handling errors effectively

With its robust feature set, Dio simplifies API interactions in Flutter. Explore it further to optimize network calls in your projects!

Happy coding!