Flutter Dio: Your Go-To HTTP Client for Network requests

Welcome, Flutter developers, to this exciting blog post where we will dive deep into the world of HTTP requests in Flutter using the Dio package. Whether you are a proficient Flutter developer looking to enhance your skills or an experienced developer eager to explore the wonders of Flutter Dio, this blog post will be a viable resource for you. Let's embark on this journey of mastering Dio and HTTP requests in Flutter.

‍

Understanding the Importance of HTTP Requests in Flutter

Before we delve into the Flutter Dio package, let's take a moment to appreciate the significance of handling HTTP requests in Flutter applications. As modern mobile and web applications rely heavily on data from servers, making API calls and dealing with responses becomes an essential part of the development process. A robust HTTP client allows developers to interact with remote servers seamlessly, fetching and updating data as needed.

Flutter, being a versatile framework, offers multiple options for handling HTTP requests. One of the most popular and powerful choices is the Dio package. Flutter Dio provides a simple and intuitive API for making HTTP requests, handling interceptors, and dealing with complex scenarios like file uploads and downloads. Now, let's move on to the core of this post and explore the Flutter Dio package in detail.

‍

Introducing Dio: The HTTP Client for Flutter

Dio is a comprehensive and high-performance HTTP client for Dart that works flawlessly with Flutter. It provides many features, making it an ideal choice for handling HTTP requests in Flutter applications. Some of the key features include:

Dio: HTTP client for Networking in Flutter.

‍

Simple and expressive API for making various HTTP requests:

Dio provides a clean and expressive API that allows developers to make various types of HTTP requests easily. Whether you need to perform GET, POST, PUT, DELETE, or other types of requests, Dio has got you covered.

‍

Built-in support for interceptors to modify request and response data:

Interceptors are powerful features that Dio offers, allowing you to intercept and modify both request and response data. This is useful when you need to add custom headers, log requests, handle authentication, or perform any other pre or post-processing tasks.

‍

Support for sending form data, JSON, and handling multipart requests:

Dio simplifies the process of sending form data and JSON payloads with ease. Additionally, it supports handling multipart requests for scenarios like uploading files to servers.

‍

Cancellation of ongoing requests for efficient resource management:

With Flutter Dio, you can easily cancel ongoing HTTP requests. This feature helps in efficient resource management, preventing unnecessary data transfers and improving the overall performance of your application.

‍

Efficient handling of timeouts and retries for enhanced reliability:

Dio provides built-in mechanisms for handling timeouts and retries. This ensures that your application gracefully handles scenarios where the server response might be delayed or when the request needs to be retried.

‍

Global configuration options for customizing client behaviour:

Dio allows you to set global configurations that apply to all requests made by the client. This includes options like setting default headers, base URLs, and more, which can save you from duplicating code across different requests.

And much more!

Now, let's install the Flutter Dio package and explore its capabilities through practical examples.

‍

Installing Flutter Dio Package

Before we begin, ensure you have a Flutter project set up. If you haven't already, you can create a new Flutter project using the following command:

1     dependencies:
2    
3    dio: ^5.3.0
4    
5     

Then, run the following command to fetch the package:

1     flutter pub get
2    
3     

Making Simple GET Requests with Dio

Let's start our journey with Dio by making a simple GET request to fetch data from an API. We'll use the "jsonplaceholder.typicode.com" service, which provides mock JSON data for testing purposes. We'll retrieve a list of users and display their names. Here's how you can do it:

1     import 'package:flutter/material.dart';
2    import 'package:dio/dio.dart';
3    
4    class User {
5      final int id;
6      final String name;
7    
8      User({required this.id, required this.name});
9    
10      factory User.fromJson(Map<String, dynamic> json) {
11        return User(
12          id: json['id'],
13          name: json['name'],
14        );
15      }
16    }
17    
18    class DioExample extends StatefulWidget {
19      @override
20      _DioExampleState createState() => _DioExampleState();
21    }
22    
23    class _DioExampleState extends State<DioExample> {
24      List<User> users = [];
25    
26      @override
27      void initState() {
28        super.initState();
29        fetchUsers();
30      }
31    
32      Future<void> fetchUsers() async {
33        try {
34          Response response = await Dio().get('https://jsonplaceholder.typicode.com/users');
35          List<dynamic> jsonData = response.data;
36    
37          setState(() {
38            users = jsonData.map((user) => User.fromJson(user)).toList();
39          });
40        } catch (e) {
41          print('Error fetching users: $e');
42        }
43      }
44    
45      @override
46      Widget build(BuildContext context) {
47        return Scaffold(
48          appBar: AppBar(title: Text('Dio Example')),
49          body: ListView.builder(
50            itemCount: users.length,
51            itemBuilder: (context, index) {
52              return ListTile(title: Text(users[index].name));
53            },
54          ),
55        );
56      }
57    }
58    
59    void main() {
60      runApp(MaterialApp(home: DioExample()));
61    }
62     

In this example, we created a simple Flutter app that fetches a list of users from the API and displays their names in a ListView. Let's break down the key parts of the code:

1. The User class: This class represents a user object with attributes id and name. We defined a factory constructor fromJson to convert JSON data into a User object.
2. The DioExample widget: This widget is the main entry point of the application. It is a stateful widget, allowing us to manage the user's list.
3. The initState method: This method is called when the widget is moving into the widget tree. In this case, we use it to trigger the fetchUsers method to fetch data from the API.
4. The fetchUsers method: This asynchronous method uses the Dio package to make a GET request to the API. We await the response from the API and parse the JSON data into a list of User objects. Finally, we use setState to update the user's list, triggering a rebuild of the UI to display the fetched data.

With this example, you now know how to use Flutter Dio to make simple GET requests in Flutter applications. Next, let's explore how to handle errors gracefully when making HTTP requests.

‍

Handling Errors with Dio

When making Flutter Dio HTTP requests, it's crucial to handle errors gracefully to ensure a smooth user experience. Dio provides multiple ways to handle errors; one common method is trying and catching. Let's extend our previous example to handle errors more effectively:

1     // Previous code...
2    
3    class _DioExampleState extends State<DioExample> {
4      List<User> users = [];
5      bool isLoading = true;
6    
7      @override
8      void initState() {
9        super.initState();
10        fetchUsers();
11      }
12    
13      Future<void> fetchUsers() async {
14        try {
15          Response response = await Dio().get('https://jsonplaceholder.typicode.com/users');
16          List<dynamic> jsonData = response.data;
17    
18          setState(() {
19            users = jsonData.map((user) => User.fromJson(user)).toList();
20            isLoading = false;
21          });
22        } catch (e) {
23          print('Error fetching users: $e');
24          setState(() {
25            isLoading = false;
26          });
27        }
28      }
29    
30      @override
31      Widget build(BuildContext context) {
32        return Scaffold(
33          appBar: AppBar(title: Text('Dio Example')),
34          body: isLoading
35              ? Center(child: CircularProgressIndicator())
36              : ListView.builder(
37                  itemCount: users.length,
38                  itemBuilder: (context, index) {
39                    return ListTile(title: Text(users[index].name));
40                  },
41                ),
42        );
43      }
44    }
45    
46    void main() {
47      runApp(MaterialApp(home: DioExample()));
48    }
49     

In this enhanced version, we added a loading indicator to display while the data is fetched. If an error happens during the HTTP request, we catch the exception and set isLoading to false to stop showing the loading indicator. This way, the app gracefully handles any errors that may occur during the data retrieval process.

‍

Sending POST Request with Dio

Apart from GET requests, Dio Flutter also supports various other request methods, including POST, PUT, DELETE, and more. Let's see how we can make a POST request using Dio. In this example, we'll create a simple form that permits users to add new users to the API.

1     import 'package:flutter/material.dart';
2    import 'package:dio/dio.dart';
3    
4    class User {
5      final int id;
6      final String name;
7      final String email;
8    
9      User({required this.id, required this.name, required this.email});
10    
11      factory User.fromJson(Map<String, dynamic> json) {
12        return User(
13          id: json['id'],
14          name: json['name'],
15          email: json['email'],
16        );
17      }
18    }
19    
20    class DioPostExample extends StatefulWidget {
21      @override
22      _DioPostExampleState createState() => _DioPostExampleState();
23    }
24    
25    class _DioPostExampleState extends State<DioPostExample> {
26      final TextEditingController nameController = TextEditingController();
27      final TextEditingController emailController = TextEditingController();
28    
29      void addUser() async {
30        String name = nameController.text;
31        String email = emailController.text;
32    
33        if (name.isEmpty || email.isEmpty) return;
34    
35        try {
36          Response response = await Dio().post(
37            'https://jsonplaceholder.typicode.com/users',
38            data: {'name': name, 'email': email},
39          );
40    
41          User newUser = User.fromJson(response.data);
42    
43          print('New user added with ID: ${newUser.id}');
44    
45          // Clear the text fields after successful submission
46          nameController.clear();
47          emailController.clear();
48        } catch (e) {
49          print('Error adding user: $e');
50        }
51      }
52    
53      @override
54      Widget build(BuildContext context) {
55        return Scaffold(
56          appBar: AppBar(title: Text('Dio POST Example')),
57          body: Padding(
58            padding: EdgeInsets.all(16.0),
59            child: Column(
60              crossAxisAlignment: CrossAxisAlignment.start,
61              children: [
62                TextField(
63                  controller: nameController,
64                  decoration: InputDecoration(labelText: 'Name'),
65                ),
66                TextField(
67                  controller: emailController,
68                  decoration: InputDecoration(labelText: 'Email'),
69                ),
70                SizedBox(height: 16),
71                ElevatedButton(
72                  onPressed: addUser,
73                  child: Text('Add User'),
74                ),
75              ],
76            ),
77          ),
78        );
79      }
80    }
81    
82    void main() {
83      runApp(MaterialApp(home: DioPostExample()));
84    }
85     

In this example, we created a form with two text fields for the user's name and email. When the "Add User" button is pressed, we extract the values from the text fields and make a POST request to the API with the user's details. If the request is acceptable, we parse the response into a User object and print the new user's ID.

Let's break down the key parts of the code:

1. The DioPostExample widget: This widget represents the main entry point of the application for the POST request example. It is a stateful widget that allows us to manage the state of the form.
2. The addUser method: This method is called when the "Add User" button is pressed. It extracts the values from the text fields and checks if both the name and email are provided. If they are not empty, it sends a POST request to the API using Dio. The data parameter in the Dio().post() method is used to send the user's data as a JSON payload.
3. The User class: This class represents a user object with attributes id, name, and email. We defined a factory constructor fromJson to convert JSON data into a User object.

With this example, you now know how to use Flutter Dio to send POST requests in Flutter applications. It's important to note that Dio also supports other request methods like PUT and DELETE, which can be used in similar ways.

‍

Customizing Flutter Dio with Interceptors

Interceptors are a powerful feature of the Flutter Dio package that allows us to intercept and modify requests and responses. This feature comes in handy when you want to add custom headers, log requests, handle authentication, or perform any other pre or post-processing tasks. Let's explore how to add an interceptor to our Dio client:

1     import 'package:flutter/material.dart';
2    import 'package:dio/dio.dart';
3    
4    class DioInterceptExample extends StatefulWidget {
5      @override
6      _DioInterceptExampleState createState() => _DioInterceptExampleState();
7    }
8    
9    class _DioInterceptExampleState extends State<DioInterceptExample> {
10      Dio dio = Dio();
11    
12      @override
13      void initState() {
14        super.initState();
15        setupInterceptors();
16        fetchUsers();
17      }
18    
19      void setupInterceptors() {
20        dio.interceptors.add(InterceptorsWrapper(
21          onRequest: (options, handler) {
22            // Perform tasks before sending the request
23            print('Sending request to: ${options.uri}');
24            handler.next(options);
25          },
26          onResponse: (response, handler) {
27            // Perform tasks on successful response
28            print('Received response with status: ${response.statusCode}');
29            handler.next(response);
30          },
31          onError: (error, handler) {
32            // Handle errors
33            print('Error occurred: $error');
34            handler.next(error);
35          },
36        ));
37      }
38    
39      Future<void> fetchUsers() async {
40        try {
41          Response response = await dio.get('https://jsonplaceholder.typicode.com/users');
42          List<dynamic> jsonData = response.data;
43          print('Users: $jsonData');
44        } catch (e) {
45          print('Error fetching users: $e');
46        }
47      }
48    
49      @override
50      Widget build(BuildContext context) {
51        return Scaffold(
52          appBar: AppBar(title: Text('Dio Interceptor Example')),
53          body: Center(child: Text('Check the console for logs')),
54        );
55      }
56    }
57    
58    void main() {
59      runApp(MaterialApp(home: DioInterceptExample()));
60    }
61     

In this example, we added an interceptor to our Dio client using dio.interceptors.add(). We provided a custom InterceptorsWrapper that allows us to define functions for onRequest, onResponse, and onError.

These functions will be executed before making a request, after receiving a response, and when an error occurs, respectively. In this case, we simply log the relevant information, but you can perform any custom tasks within these interceptors.

Let's break down the key parts of the code:

1. The DioInterceptExample widget: This widget represents the main entry point of the application for the interceptor example. It is a stateful widget that allows us to manage the Dio client and fetch data.
2. The dio object: This is an instance of the Dio class that we use to make HTTP requests. We added the interceptors to this Dio client using the dio.interceptors.add() method.
3. The setupInterceptors method: This method is responsible for adding the interceptors to the Dio client. We provided custom functions for onRequest, onResponse, and onError. These functions are called at different stages of the request/response cycle and allow us to perform tasks like logging or error handling.
4. The fetchUsers method: This method is similar to what we used in the previous example to fetch users from the API. The only difference is that now our Dio client has interceptors, which will log information before making the request and after receiving the response.

With this example, you now have an understanding of how to customize Dio using interceptors to perform tasks like logging and error handling.

‍

Getting started with WiseGPT for your Flutter app!

On completing this comprehensive guide on the Flutter Dio package for HTTP requests. We have explored various aspects of making HTTP requests in Flutter, highlighting the importance of Dio, its key features, installation, practical examples, error handling, sending POST requests, and customization using interceptors. With Dio's powerful capabilities, you now have the tools to create robust and efficient Flutter applications that interact seamlessly with remote servers.

But that's not all! There's an exciting addition to your Flutter development toolkit that can make your workflow even more efficient and productive - WiseGPT. WiseGPT is a revolutionary plugin designed to generate code for APIs directly into your Flutter project, with no limit on the output size. Its unique abilities mirror your coding style, making it feel like an extension of your own coding prowess.

WiseGPT

One of the most remarkable features of WiseGPT is its promptless operation. Unlike traditional code generation tools, you don't need to provide explicit instructions or prompts. WiseGPT understands your context and generates code accordingly, saving you valuable time and effort.

With WiseGPT, tedious tasks like manual API requests, response parsing, and error management for complicated API endpoints are a thing of the past. It automates the entire process, creating models and functions seamlessly, leaving you free to focus on the more creative aspects of your project.

So why not take your Flutter development to the next level? Try out WiseGPT and experience the ease and efficiency of automated API code generation. Simply provide a collection of APIs, and WiseGPT will handle the rest, making your development process smoother and more enjoyable.

Thank you for joining us on this journey of mastering Flutter Dio and HTTP requests in Flutter. We hope this guide has equipped you with the knowledge and tools you need to build high-quality apps that provide exceptional user experiences. Happy coding, and don't forget to explore the power of WiseGPT in your future Flutter projects!

Short on time? Speed things up with DhiWise!!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.