Mastering Network Requests in Flutter with Dio
When building a mobile app, handling network requests is crucial for a seamless user experience. Unexpected results from network responses can lead to edge cases that need to be addressed proactively. In this article, we’ll explore how to handle REST API requests in Flutter using the powerful Dio package.
What is Dio?
Dio is a robust HTTP client for Dart that offers advanced features like interceptors, global configuration, FormData, request cancellation, file downloading, and timeout. While Flutter’s http package is suitable for basic network tasks, Dio provides an intuitive API for performing complex network operations with ease.
Getting Started with Dio
To begin, create a new Flutter project and add the Dio package to your pubspec.yaml file. Replace the content of your main.dart file with the following code:
“`dart
import ‘package:flutter/material.dart’;
import ‘package:dio/dio.dart’;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘Dio Demo’,
home: HomePage(),
);
}
}
“`
Testing with API Data
For demonstration purposes, we’ll use REQ | RES, a hosted REST API that provides sample user data and allows various network operation tests. We’ll start with a simple GET request to fetch single user data.
Defining a Model Class
To handle data returned from a REST API request, define a model class. For this example, we’ll create a simple class for storing single user data using JSON serialization.
Initializing Dio
Create a separate class containing the methods for performing network operations. Initialize Dio by defining the base URL of the API server and setting up the DioClient class.
Defining Network Requests
We’ll define methods for performing GET, POST, PUT, and DELETE requests using Dio. For instance, the GET request method will retrieve a single user data from the API by passing an id:
dart
Future<User?> getUser(int id) async {
try {
final response = await dio.get('/users/$id');
return User.fromJson(response.data);
} catch (e) {
return null;
}
}
Uploading Files
Dio simplifies the process of uploading files to a server. You can easily upload files using FormData and Dio.
Interceptors
Interceptors allow you to intercept Dio requests, responses, and errors before they are handled. You can use them for authorization, parsing JSON, handling errors, and debugging Dio network requests.
Choosing and Defining Your Base
Instead of passing the endpoint with baseUrl every time, define it inside BaseOptions and pass it once while instantiating Dio. This provides various customizations, such as defining connectTimeout and receiveTimeout for requests.
By mastering Dio, you can handle multiple simultaneous network requests with advanced error handling techniques, making networking in Flutter a breeze.