How To Make HTTP Requests With Flutter And Parse JSON Result Data

Flutter category image

Introduction

This short article shows how to perform HTTP requests from a Flutter application. We have a look at the most common request types GET, POST, PUT, and DELETE.

Performing HTTP requests is a must-have for every app nowadays. In this article, I am going to show you how to add this capability to your Flutter app. We will have a look at two packages to accomplish this task: The http package and the dio package. They are very similar and you can use whatever you like more. In the end, we focus on parsing JSON results from requests, so that the data can be used within our app.

If you are unfamiliar with installing 3rd party packages, have a look at my article about this topic.

HTTP package

Using the http package is pretty simple. Import it in your file by adding
import 'package:http/http.dart' at the top. Then you get access to all the required http functions. See the usage examples below.

You can see examples for the methods GETPOSTPUT, and DELETE. These are the most common ones, so we’ll focus on them.

Every call returns a Response object with details about the requests’ execution. It contains properties like statusCodecontentLength, or reasonPhrase in case of failures. Details about the status codes will be discussed in the coming section.

response.body contains a string with the return values of the request. To make a Dart Map<String, dynamic> from it, use the jsonDecode function.

Want More Flutter Content?

Join my bi-weekly newsletter that delivers small Flutter portions right in your inbox. A title, an abstract, a link, and you decide if you want to dive in!

DIO package

Dio is pretty similar to the http package. First, import it with import 'package:dio/dio.dart'. Then you can use it like this:

Every call returns a Response object with details about the requests’ execution. It contains properties like statusCodeheaders, or statusMessage in case of failures. Details about the status codes will be discussed in the coming section.

response.data contains a dynamic object with the return values of the request. To make a Dart Map<String, dynamic> from it, you just need to cast it to that type with the as operator.

HTTP status codes

To verify the correct execution of a request, you can evaluate the status code of the returned response. This gives you a good hint (and sometimes even the exact error) when debugging apps. A complete list of all status codes can be found at the Mozilla Developer Network. I’ll introduce the most common ones.

Simple rule: 200–299 ✅, everything else ❌

200 OK
The request succeeded. Any method can return this code.

201 Created
The request succeeded and a new resource was created. Typically returned by a POST or PUT request.

204 No Content
The request returned no data but indicates successful execution.

400 Bad Request
The server cannot process the client data. This happens mostly if the data is sent in the wrong format or required data is missing. Check the error message for details.

401 Unauthorized
The client needs to authenticate itself, before the server processes the request. Maybe a header field with an identifier is missing in the request.

403 Forbidden
The client does not have the right to execute this operation.

404 Not Found
The requested resource cannot be found by the server.

500 Internal Server Error
A situation occurred, that the server can’t handle. This happens usually due to programming errors on the server-side.

Parse JSON result

If you want to work with custom objects instead of Map<String, dynamic>, you can convert the JSON in a fast and simple way. Let’s assume, the queried API returns the following JSON:

The class, you need to create to map the data successfully, looks like this:

This can be very nasty and boring and of course, there are more complex scenarios like lists of objects or nested objects. If you want to dive deep into the parsing topic, check out this article which explains everything in detail.

🔔 Hint

However, the quick way is to use dart quicktype. It’s an online tool that automatically creates data classes from JSON input. Just paste the JSON result into the editor, select Dart as language, and copy the created code. No need to write data classes by hand!

Conclusion

With this guide, you should be able to perform HTTP requests from your Flutter app and parse the response data.


Want More Flutter Content?

Join my bi-weekly newsletter that delivers small Flutter portions right in your inbox. A title, an abstract, a link, and you decide if you want to dive in!

Become A Firebase Expert!

Take a deep dive into Firebase and learn how to really handle their services. This ebook makes you an instant Firebase professional!

Flutter โค๏ธ Firebase

Get started with Firebase and learn how to use it in your Flutter apps. My detailed ebook delivers you everything you need to know! Flutter and Firebase are a perfect match!