Mastering Network Requests in Flutter with Dio

Handling Network Requests in Flutter

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
• 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:

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 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:

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
• 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.