During application development, managing network requests could be one of the hectic tasks for you. If you managed the network requests efficiently, your app is likely going to succeed in the market. Responses returned by a network may contain unexpected results, and in order to have a better user experience, you need to take care of such snags in advance. In this article, we are going to get familiar with Dio in Flutter. When you start working on a large application, you need to do something more advanced. Your application will face lots of problems with network handling. In that case, we need some advanced connection library that has extra features like interceptors, logs, cache, etc. that will be helpful in many tasks like adding the token authentication for each request and logging requests. In this article, we’re going to learn about Dio and have a look at the best practices for handling networking in Flutter. you can also hire a flutter developer for this task. What is Dio in Flutter? Dio is a powerful HTTP client for Dart. It supports interceptors, global configuration, FormData, request cancellation, file downloading, and timeout, among others. Flutter offers an HTTP package that’s good for performing basic network tasks but is pretty intimidating to use when handling some advanced features. If we compare the HTTP package with Dio, Dio provides an intuitive API for performing advanced networking tasks with minimal effort. The normal HTTP library can do the things which dio does and we get it in flutter SDK too. But it’s not that easy to learn or understand the http library so dio would be better. Related Topic – How to add Firebase project in Flutter app Get Started with Dio To get started with Dio, we first need to add dependencies. dependencies:dio: ^3.0.8 Then install the package using the command line in your terminal and import it: To install the package: flutter pub get Or pub get Now use this in your dart code: import ‘package:dio/dio.dart’; GET Request To use methods of the Dio HTTP client, we have to create an instance of the Dio client. After that, we can call all methods of Dio. As you can see in the code below, we have created an instance of Dio to call GET requests. Future<dynamic> getData() async { try { Response response; var dio = Dio(); /// apiUrl is basically the route from where you get data response = await dio.get(‘$apiUrl/persons’); debugPrint(response.data.toString()); } catch (_) { rethrow; } } POST Request The instance of Dio provides a POST method by which we can pass param in JSON format. After getting the request using the Dio instance, await for the request you want to post. Future postData() async { try { Response response; var dio = Dio(); /// apiUrl is basically the route from where you get data response = await dio.post(‘$apiUrl/persons’, data: { ‘name’: ‘xyz’, ‘age’: ’22’, ‘gender’: ‘Male’, }); debugPrint(response.data.toString()); } catch (_) { rethrow; } } Multiple Concurrent Requests When you need to call different APIs in the same instance of time it tends to get confusing a lot. At that time, we can use dio to get the responses from different APIs. Future multipleConcurrentRequests() async { var dio = Dio(); try { List<Response> response = await Future.wait( [ dio.post(‘$apiUrl/persons’), dio.get(‘/token’), ], ); } catch (_) { rethrow; } } To Download a File from Server To download a file from the server, Dio provides a download method. In this method, we have to pass the complete path of the file. Future downloadingFile() async { Response response; var dio = Dio(); try { response = await dio.download(‘https://www.google.com/’, ‘./xx.html’); return response.data; } catch (_) { rethrow; } } Get Response Stream With the help of stream response, we can receive a sequence of events. To get a response stream with the Dio client, we need to set responseType stream. Future responseStream() async { try { Response<ResponseBody> responseBody; responseBody = await Dio().get<ResponseBody>( /// apiUrl is basically your url apiUrl, options: Options( responseType: ResponseType.stream, ), ); } catch (_) { rethrow; } } Get Response with Bytes To get a response in bytes, we have to set responseType to ‘bytes’. As you can see: Future responseBtyes() async { try { Response<List<int>> response; response = await Dio().get<List<int>>( /// apiUrl is basically your url apiUrl, options: Options(responseType: ResponseType.bytes), ); } catch (_) { rethrow; } } Send FormData To send the FormData, we use the instance FormData from the map and specify where we want to send the data and wait for the post. Future sendingFormData() async { var dio = Dio(); try { var formData = FormData.fromMap({ ‘name’: ‘xyz’, ‘age’: 25, }); /// apiUrl is basically your url await dio.post(apiUrl, data: formData); } catch (_) { rethrow; } } Upload Multiple Files to Server by FormData When you need to upload multiple files to the server by your formData, at that time you can use MultiPartFile. And then awaiting for it step by step and vice versa can reduce your valuable time. Additionally, we can pass the required param with the same request. Future uploadingMultipleFiles(File file) async { var dio = Dio(); try { var formData = FormData.fromMap( { ‘name’: ‘xyz’, ‘age’: 25, ‘file’: await MultipartFile.fromFile( file.path, filename: ‘upload.txt’, ), ‘files’: [ await MultipartFile.fromFile(‘./text1.txt’, filename: ‘text1.txt’), await MultipartFile.fromFile(‘./text2.txt’, filename: ‘text2.txt’), ] }, ); /// apiUrl is basically your url var response = await dio.post(apiUrl, data: formData); return response; } catch
