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

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.

How to install packages in your Flutter app

This short article shows how to add packages to a Flutter application so that you can use existing code and you don’t have to write everything yourself.

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 GET, POST, PUT, 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 statusCode, contentLength, 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!

Click to subscribe

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 statusCode, headers, 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.

Parsing complex JSON in Flutter

Parse different types of simple and complex JSON structures using built-in dart:convert library in Flutter

Conclusion

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

Related articles

The Flutter pubspec.yaml in detail

The pubspec.yaml file is the main configuration file for your Flutter app. In this article, we’ll have a look at its contents.

How to organize your Flutter app assets, styles, colors, images

A growing app has a lot of resources included that are used in various places. With this approach, you’ll know where to put things and how to reference them.

All you need to know about the default Flutter project folders and files

A new Flutter project contains a lot of files and folders. In this article, we’ll inspect them and reveal their purposes.